How to create a choropleth Map from GeoJSON using Leaflet

1. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

2. The next is up to you. You can center your map wherever you desire (modifying the starting position) and set an appropriate zoom level (modifying the starting zoom) to match your users’ needs. Additionally, you can change the map’s look (by updating the source URL); choose from a range of visually appealing map styles from our extensive MapTiler standard maps, or create your own to truly differentiate your application.

1. Add the GeoJSON layer. With Leaflet-AJAX it`s possible to fetch GeoJSON data hosted on MapTiler (check out the How to upload GeoJSON tutorial). The GeoJSON example uses data from Eurostat’s Marriage Indicators dataset, filtered to show only countries that have available data on women’s mean age at first marriage in 2019. If you want to use the same sample data, download the dataset.

2. Create the functions to get the style based on the age attribute.

3. Change the style property of the layer.

4. Create a function to display a popup when clicking on the GeoJSON layer and show the information of the age attribute.

5. Display a popup when clicking on the GeoJSON layer.

Now you have a basic choropleth map. It doesn’t include country labels on the top of our GeoJSON layer, so it might lack context. If you want to add the labels, continue with the workflow below.

Display labels over country polygons

On choropleth maps, it’s a good practice to include name labels. It helps users get oriented in the map, especially in areas of the world that are unfamiliar to them.

When we created a choropleth map with Leaflet.js, we basically created an overlay of a basemap, which means that our GeoJSON with marriage data covers the existing country labels. That makes the map challenging to read. Let’s fix it and add the labels back. The picture below shows the difference between a basic choropleth map without labels and a more readable map which we’ll get at the end of this workflow.

1. Prepare a basemap and label layer

MapTiler offers several basemap styles, each designed for a specific purpose. The Dataviz style was intended for data visualization, making it a perfect fit for choropleth maps. Dataviz also comes in a dark version, allowing your content to capture the user’s full focus.

• To get Dataviz-dark, go to your MapTiler Cloud account and select New map.
• On tab Simple, select Dataviz and switch to the dark preset.
• Click on Customize.

To display labels over GeoJSON, we will need two separate layers: the basemap without labels, and a new layer with labels. Prepare them in the Customize tool:

• In the left menu, select Layers.
• Switch to Verticality view.
• Hide all symbol layers. (The screenshot below shows the icon that marks symbol layers.)
• Save and publish the map. Now you’ve got a map without symbols (labels), which you can use as a new basemap in the next step.
• Repeat the steps above, but this time hide all non-symbol layers. This creates a label-only map, which we’ll use as the top layer to display the labels.

Note down the map IDs of both your new maps. On the Maps page, click on your map, which takes you to the map preview page. The URL of this page contains an alphanumeric string which is the map ID. Example: https://cloud.maptiler.com/maps/0198eca7-644f-7927-825f-e45f2dee80ac/

1. Replace your current basemap with your new map without labels. You’ll need the map ID from the previous step.

1. Create the label layer by using the other map you’ve created, with labels only.

1. Create a pane for labels.

Panes define in which order the layers get displayed.

For the pane, we define z-index, which specifies which panes can overlap our new labels pane. With z-index 550, our labels can be overlapped with markers, tooltips, and popups. This table shows the default pane settings:

Pane	Z-index	Description
mapPane	'auto'	The pane that contains all other map panes
tilePane	200	Pane for GridLayers and TileLayers
overlayPane	400	Pane for overlay shadows (e.g. Marker shadows)
shadowPane	500	Pane for vectors (Paths, like Polylines and Polygons), ImageOverlays,  VideoOverlays, circles, and GeoJSONs
markerPane	600	Pane for Icons of Markers
tooltipPane	650	Pane for Tooltips
popupPane	700	Pane for Popups

The labels are a raster tile layer that covers the entire map and will capture clicks and touches. If you click anywhere on the map, the web browser will assume that you clicked on the labels layer, not the GeoJSON layer, and the pop-up will not appear. We can fix the pop-up appearance by using the pointer-events. Tip: If you want to avoid this issue completely, switch to a different mapping library (e.g. MapTiler SDK or Openlayers) that supports vector tiles by default. Raster tiles return a raster layer (an image containing all layers) while vector tiles returns geometries; the benefit of geometries is that the layers stay separate and can be easily styled on the fly.

1. Assign a label pane to the label tiles definition.

Now your choropleth map should show country name labels nicely.