Leaflet is a great JavaScript library for creating map visualizations in web applications. Leaflet is created with that specific purpose in mind. It caters for most of the things you want in a map visualization, such as zoom and pan, markers, popups (on hover and / or click), geo coordinate aware events, multiple layers – of type raster, vector, SVG, image and video – and multiple projections.
In an earlier article, I created a map of The Netherlands (from a GeoJSON file with provinces and major cities) and create markers on top of the map for the office locations of the Conclusion ecosystem from another GeoJSON file – all using d3.js. In the article you are currently reading, I will use the same GeoJSON file with data on the Conclusion office locations. And this time I will create a map using Leaflet and OpenStreetMap and then create a superimposed layer that has markers based on the features in the GeoJSON file. For these markers I will define the style and also a popup that appears when the marker is clicked upon.
Create a Web Page with a Map of The Netherlands
Step one is the creation of a HTML page that imports Leaflet and creates a Map of The Netherlands using OpenStreetMap. This is about as simple as things can be with Leaflet.
- Import the mandatory stylesheet for Leaflet
- Import the Leaflet JavaScript library (latest version at the time of writing)
- Define the Map – the container for all layers – and focus the map on the location 52 lat and 5 long – roughly the center of The Netherlands
- Define the Tiles Layer from the XYZ tiles service offered by OpenStreetMap
This is what we get:
A map of (most of) The Netherlands and out of the box support for zoom and pan.
Add Markers for Conclusion Office locations from GeoJSON features
In a second layer on top of the first one, defined from data in a remote GeoJSON features collection we will now add markers for office locations.
The data needs to be imported (step 2) using the URL (1), When the GeoJSON data has been fetched, a layer of type GeoJSON is added to the Map. By default, markers are displayed for all feature of type Point in the GeoJSON data.
We see the result of these lines of code:
Default markers on the map at the locations of the Conclusion offices as defined through the features in the GeoJSON file.
Next, we can customize the markers and also add a popup:
- for each feature from the GeoJSON feature collected that is processed to be added to the layer, invoke the function onEachFeature, passing the feature and the layer to the function
- in the function, define a popup to be bound to the feature; default behavior: when the marker is clicked upon, the popup shows up. The data presented in the popup is read from the properties on the features in the GeoJSON file; these look like this:
In the popup, this appears as: - The styling of the markers. The markers in this case are displayed as circles – with indicates color, size and opacity. Note that other marker types are available and custom marker types can be defined (see for example this tutorial).
The end result of adding just a few lines of code:
A live demo of this very simple web application is available here. The code – a simple single index.html can be inspected in the GitHub Repo.
Resources
GitHub Repo for this article.
Leaflet – https://leafletjs.com/ – an open-source JavaScript library for mobile-friendly interactive maps
Leaflet Tutorial on using GeoJSON – https://leafletjs.com/examples/geojson/
Tutorial on custom markers in Leaflet: https://leafletjs.com/examples/custom-icons/
Geoapify – Online geocoding tool Lookup addresses Online and for FREE – turn addresses into long/lat coordinates
GeoJSON file with data on Conclusion Office locations.
