Now we have everything in place except our maps. To create interactive maps, we can use external web mapping libraries written in JavaScript. One such library is Leaflet, which is perfectly capable of creating simple interactive maps. Leaflet has a simple and intuitive API, which is very easy to use. All we need is the library's code base and stylesheet loaded in our HTML document. Let's include Leaflet in our web page:
- Download the stable version of Leaflet from http://leafletjs.com/download.html.
- Extract the files in the downloaded archive in the web server's root folder. Optionally, create a new folder for the files to have a well-organized structure.
- Edit the map.html file with a code or text editor.
- Include Leaflet's code base (leaflet.js) with a <script> element using its relative path from the root folder in the HTML document's <head> section:
<script src="leaflet/leaflet.js" type="text/javascript">
</script>
- Include Leaflet's stylesheet (leaflet.css) with a <link> element in the HTML document's <head> section:
<link href="leaflet/leaflet.css" rel="stylesheet">
- Leaflet's methods can be accessed with the L variable by default. Test the references by refreshing the web page, opening the developer tools, and writing L in its Console. If there isn't such an object, check the permissions of the extracted files. They must be readable by every user:
Now that we have a reference to Leaflet's various methods, we can start creating web maps using its API. The API consists of methods exposed to the users of the library. Every good API has a thorough documentation on how to use the different methods, and Leaflet is not an exception. We can reach its API documentation at http://leafletjs.com/reference-1.0.3.html.