--- title: "How to create a choropleth Map from GeoJSON using Leaflet | Leaflet" description: "Create a styled choropleth map using GeoJSON and Leaflet." --- > For AI agents: a documentation index is available at [/llms.txt](https://docs.maptiler.com/llms.txt). Markdown versions of all pages are available by appending .md to any URL. # How to create a choropleth Map from GeoJSON using Leaflet This tutorial shows you how to add a styled GeoJSON overlay to your map, adjust the placement of labels, display a popup on click, and create a map legend. We’ll use GeoJSON data from EUROSTAT that includes countries with attributes. To use the same data, [download the sample dataset of average age at first marriage](https://docs.maptiler.com/sdk-js/assets/Mean_age_of_women_at_first_marriage_in_2019.geojson). 1. Copy the following code, paste it into your favorite text editor, and save it as a `.html` file. ```html Display a choropleth Map from GeoJSON
MapTiler logo

© MapTiler © OpenStreetMap contributors

``` 1. Install the npm package. ```bash npm install --save leaflet ``` 2. Include the CSS file. If you have a bundler that can handle CSS, you can [`import`](#) the CSS or include it with a [``](#) in the head of the document via the CDN ```js import "leaflet/dist/leaflet.css"; ``` ```html ``` 3. Include the following code in your JavaScript file (Example: main.js). ```js import L from 'leaflet'; const key = 'YOUR_MAPTILER_API_KEY_HERE'; const map = L.map('map').setView([52.51, 13.39], 3); //starting position L.tileLayer(`https://api.maptiler.com/maps/dataviz-dark/{z}/{x}/{y}.png?key=${key}`,{ //style URL tileSize: 512, zoomOffset: -1, minZoom: 1, attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e", crossOrigin: true }).addTo(map); ``` 1. Replace `YOUR_MAPTILER_API_KEY_HERE` with [your own API key](https://cloud.maptiler.com/account/keys/). Make sure to [secure the key](https://docs.maptiler.com/guides/credentials/api-key/#secure-key) before you publish it. 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](https://cloud.maptiler.com/maps/), or create your own to truly differentiate your application. 1. Include the [Leaflet-AJAX plugin](https://github.com/calvinmetcalf/leaflet-ajax) JavaScript file in the `` of your HTML file. To add a GeoJSON from an external URL to Leaflet, we will need to use the `Leaflet-AJAX plugin`. ```html
MapTiler logo

© MapTiler © OpenStreetMap contributors

Mean age of
women at first marriage
in 2019

23
24
25
26
27
28
29
30

© MapTiler © OpenStreetMap contributors

Mean age of
women at first marriage
in 2019

23
24
25
26
27
28
29
30
``` ### Complete source code ```bash npm install --save leaflet leaflet-ajax ``` #### main.js ```js import L from 'leaflet'; import 'leaflet/dist/leaflet.css'; import 'leaflet-ajax' const key = 'YOUR_MAPTILER_API_KEY_HERE'; const map = L.map('map').setView([0, 0], 2); const layer = L.tileLayer(`https://api.maptiler.com/maps/YOUR_NO_LABEL_MAP_ID/{z}/{x}/{y}.png?key=${key}`, { tileSize: 512, zoomOffset: -1, minZoom: 1, attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e", crossOrigin: true }).addTo(map); map.createPane("labels"); map.getPane("labels").style.zIndex = 550; map.getPane("labels").style.pointerEvents = "none"; L.tileLayer(`https://api.maptiler.com/maps/YOUR_ONLY_LABEL_MAP_ID/{z}/{x}/{y}.png?key=${key}`, { //style URL tileSize: 512, zoomOffset: -1, minZoom: 1, attribution: "\u003ca href=\"https://www.maptiler.com/copyright/\" target=\"_blank\"\u003e\u0026copy; MapTiler\u003c/a\u003e \u003ca href=\"https://www.openstreetmap.org/copyright\" target=\"_blank\"\u003e\u0026copy; OpenStreetMap contributors\u003c/a\u003e", crossOrigin: true, pane: 'labels' }).addTo(map); function getColor(age) { return age > 30 ? '#8c2d04' : age > 29 ? '#d94801' : age > 28 ? '#f16913' : age > 27 ? '#fd8d3c' : age > 26 ? '#fdae6b' : age > 25 ? '#fdd0a2' : age > 24 ? '#fee6ce' : '#fff5eb'; } function getStyle(feature) { return { weight: 1, //size of outline opacity: 1, //outline opacity color: 'black', //colour of outline fillOpacity: 1, fillColor: getColor(feature.properties.age), }; } function popup(feature, layer) { layer.bindPopup(`

Average age of
women at first marriage
in 2019

${feature.properties.age}

`) } const geojson = new L.GeoJSON.AJAX(`https://api.maptiler.com/data/55336072-ef0f-4cb5-8671-b8d6ebbb0a05/features.json?key=${key}`, { onEachFeature: popup, style: getStyle }).addTo(map); ``` #### index.html ```html Display a choropleth Map from GeoJSON

© MapTiler © OpenStreetMap contributors

Mean age of
women at first marriage
in 2019

23
24
25
26
27
28
29
30
``` #### style.css ```css body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; } .legend { background-color: #000; border-radius: 3px; bottom: 30px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1); color: #fff; font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif; padding: 10px; position: absolute; right: 10px; z-index: 800; } .legend h4 { margin: 0 0 10px; } .legend div span { border-radius: 50%; display: inline-block; height: 10px; margin-right: 5px; width: 10px; } ``` ## Learn more Check out the following how-tos related to choropleth maps: - [How to style a choropleth map in the visual editor Map Designer](https://docs.maptiler.com/sdk-js/examples/countries-with-own-data/) - [How to prepare GeoJSON with attributes for choropleth map and upload it to MapTiler](https://docs.maptiler.com/guides/maps-apis/maps-platform/prepare-geojson-with-attributes-for-choropleth-map-and-upload-geojson-to-maptiler-cloud) ## Related examples ### [GeoJSON Layer](https://docs.maptiler.com/leaflet/examples/geojson-polygon/) Tutorials Add GeoJSON polygon overlays to Leaflet JS maps.