Tutorial: How to use Leaflet maps on a web page The Leaflet map javascript library, combined with the wide range of open source maps available world wide have transformed our ability to create maps and display dynamic data. index

Tutorial: How to use Leaflet maps on a web page

The Leaflet map javascript library, combined with the wide range of open source maps available world wide have transformed our ability to create maps and display dynamic data.

Leaflet is an open-source Javascript library from https://leafletjs.com/

It does all the hard work of creating and displaying maps. Best practice is to download the current set of files from leafletjs.com and then to host them on our own computer for development, and on our own server for others to use. The HTML files and the Leaflet files are then served from the same server. This avoids the security risks of using files from third parties that may also be blocked by the browser.

 

Numerous maps are available, and many are also open-source and free to use for non-commercial applications. Some require registration.  I have used maps from thunderforest.com,  openstreetmap.org, arcgisonline.com, and the modified openstreetmap from hikebike at wmflabs.org. Beware that some map providers such as Google track every use of their maps.

A comprehensive list of available map tiles is available from https://leaflet-extras.github.io/leaflet-providers/preview/

The simplest maps open to a fixed location and display points that relate to that location. The map might show the location of a business, a tourist attraction.

This frame shows a live view of the map we are creating: Zoom in on Haytor.

 

The head of the HTML document includes the links to access the leaflet.js and  leaflet.css files which we have downloaded from leafletjs.com and then uploaded to our own server.

Then in the body a div gives an id to the map and defines the space for it on the web page.

The map and its details is then created by our own script: basic-leaflet-map.js which is linked at the end of the HTML document so that it doesn't run before the map div has been created.

The HTML Code

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <link rel="stylesheet" type="text/css" href="leaflet.css" />
    <script type='text/javascript' src='jquery.min.js'></script>
    <script type='text/javascript' src='leaflet.js'></script>
</head>
<body>
    <h1>A basic map using leaflet</h1>
    <div id="map" style="width: 800px; height: 440px; border: 1px solid #AAA;"></div>
    <script src="basic-leaflet-map.js"></script>
</body>
</html>
 

The JavaScript code

 
var mylat '50.58007';
var mylong '-3.75578';
var myzoom '10';
var map L.map('map').setView([mylatmylong], myzoom);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    maxZoom17,
    attribution'&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
 
L.marker([mylatmylong]).addTo(map).bindPopup("<b>This is Haytor!</b>").openPopup();
L.circle([mylatmylong], 500, {
    color'red',
    fillColor'#f2d5df',
    fillOpacity0.2
}).addTo(map).bindPopup("");
 
markers = [{
    "name""Supermarket",
    "url""",
    "lat"50.54086,
    "lng": -3.60219
}, {
    "name""Information Centre",
    "url""https://www.dartmoor.gov.uk/",
    "lat"50.58093,
    "lng": -3.7453
}];
for (var 0markers.length; ++i) {
    L.marker([markers[i].latmarkers[i].lng], {
        iconnew L.DivIcon({
            className'my-div-icon',
            html'<span class="my-map-label">' markers[i].name '</span>'
        })
    }).addTo(map);
 
    L.marker([markers[i].latmarkers[i].lng]).addTo(map).bindPopup(markers[i].name);
}
 

The map needs a source for the map tiles at line 6. Note the addTo( map ), line 9, where 'map' is the id of the div we created in the HTML.

It also needs an initial latitude and longitude, set as variables in lines 2 and 3, then added to the map in line 5, and a zoom level that determines the initial scale of the map, line 7.

Markers can be added to the map. Initially we will use the default icon in the images folder downloaded with leaflet. The first marker is created at line 11. Each marker has a latitude and longitude and can have a number of other properties. A popup is the information that appears when you click on an a marker.

Geometric shapes can also be added to the map. In this example we are adding a circle at line 12. Again it must have a latitude and longitude.

Markers can be added from an array of their properties, which is more efficient than adding them individually. The array is set in lines 18 to 28, and then lines 29 to 35 will add all markers in this array to the map. The same process can be applied to markers added from a separate file, or by AJAX.

The next development of the map is not to show where something is, but to show where the user is currently located - using geolocation. This can then be extended to show points of interest around the current location of the user.

Tutorial: Where am I? Geolocation on a leaflet Map

Tutorial: Creating a Leaflet maps application to generate GPX tracks - markers and polylines

Using leaflet to display images with pan and zoom

Leaflet map tutorial - how to change the image displayed on zoom

leaflet map tutorial - how to display large and complex diagrams with pan and zoom

Leaflet Map tutorial - how to create a 360 degree panorama with pan and zoom

Leaflet Map tutorial - how to add markers and popups to an image or diagram displayed using leaflet