Tutorial: How to use free Leaflet maps on a web page
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 http://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
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.
Send your comment to the author