---
title: "How to create a choropleth Map from GeoJSON using OpenLayers | Openlayers"
description: "Create a choropleth map from GeoJSON using OpenLayers."
---
> 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 OpenLayers
This tutorial will walk you through the process of adding a styled GeoJSON overlay to your map, displaying a popup on click, and creating a map legend. To demonstrate, we will be using GeoJSON formatted data from EUROSTAT that includes countries with attributes. Download the [sample data for 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
```
Check out the step-by-step tutorial [How to use OpenLayers](https://docs.maptiler.com/openlayers/examples/how-to-use-openlayers/)
1. Install the npm package.
```bash
npm install --save ol
```
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 "ol/ol.css";
```
```html
```
3. Include the following code in your JavaScript file (Example: main.js).
```js
import Map from 'ol/Map.js';
import View from 'ol/View.js';
import TileLayer from 'ol/layer/Tile.js';
import TileJSON from 'ol/source/TileJSON.js';
import Attribution from 'ol/control/Attribution.js';
import { defaults as defaultControls } from 'ol/control/defaults.js';
import { fromLonLat } from 'ol/proj.js';
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const attribution = new Attribution({
collapsible: false,
});
const source = new TileJSON({
url: `https://api.maptiler.com/maps/streets-v4/tiles.json?key=${key}`, // source URL
tileSize: 512,
crossOrigin: 'anonymous'
});
const map = new Map({
layers: [
new TileLayer({
source: source
})
],
controls: defaultControls({attribution: false}).extend([attribution]),
target: 'map',
view: new View({
constrainResolution: true,
center: fromLonLat([13.39, 52.51]), // starting position [lng, lat]
zoom: 3 // starting zoom
})
});
```
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. Add the GeoJSON layer. The following snippet creates GeoJSON layer hosted on MapTiler (check out the [How to Upload GeoJSON to MapTiler](https://docs.maptiler.com/guides/maps-apis/maps-platform/prepare-geojson-with-attributes-for-choropleth-map-and-upload-geojson-to-maptiler-cloud#PrepareGeoJSONwithattributesforchoroplethmapanduploadGeoJSONtoMapTilerCloud-UploadGeoJSONtoMapTilerCloud) tutorial). The GeoJSON used in the example contains Marriage indicators data from EUROSTAT. The dataset was filtered to just countries with some value of mean age of women at first marriage in 2019. Download the [sample data for average age at first marriage](https://docs.maptiler.com/sdk-js/assets/Mean_age_of_women_at_first_marriage_in_2019.geojson)
```js
zoom: 3 // starting zoom
})
});
const geojson = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: `https://api.maptiler.com/data/YOUR_CUSTOM_MAP_ID/features.json?key=${key}`,
}),
});
map.addLayer(geojson);
```
2. Create the functions to get the style based on the age attribute.
```js
zoom: 3 // starting zoom
})
});
const styles = function(feature,resolution) {
if (feature.get('age') >= 30) {color = '#8c2d04' ;}
else if (feature.get('age') >= 29 ){color ='#d94801';}
else if (feature.get('age') >= 28 ){color ='#f16913';}
else if (feature.get('age') >= 27 ){color ='#fd8d3c';}
else if (feature.get('age') >= 26 ){color ='#fdae6b';}
else if (feature.get('age') >= 25 ){color ='#fdd0a2';}
else if (feature.get('age') >= 24 ){color ='#fee6ce';}
else {color = '#fff5eb';}
return [
new ol.style.Style({
stroke: new ol.style.Stroke({
color: 'black',
width: 0.7,
}),
fill: new ol.style.Fill({
color: color,
}),
}),
]
};
const geojson = new ol.layer.Vector({
```
3. Create a choropleth map based on the age attribute. Change the `style` property of the layer.
```js
const geojson = new ol.layer.Vector({
source: new ol.source.Vector({
format: new ol.format.GeoJSON(),
url: `https://api.maptiler.com/data/YOUR_CUSTOM_MAP_ID/features.json?key=${key}`,
}),
style: styles
});
```
4. Create the popup `html` element.
```html
```
5. Create the style for the popup
```html
```
6. Create the overlay to anchor the popup
```js
const key = 'YOUR_MAPTILER_API_KEY_HERE';
const container = document.getElementById('popup');
const content = document.getElementById('popup-content');
const closer = document.getElementById('popup-closer');
const overlay = new ol.Overlay({
element: container,
autoPan: {
animation: {
duration: 250,
},
},
});
closer.onclick = function () {
overlay.setPosition(undefined);
closer.blur();
return false;
};
const source = new ol.source.TileJSON({
```
7. Add the overlay to the map
```js
const map = new ol.Map({
layers: [
new ol.layer.Tile({
source: source
})
],
overlays: [overlay],
controls: ol.control.defaults.defaults({attribution: false}).extend([attribution]),
target: 'map',
view: new ol.View({
constrainResolution: true,
center: ol.proj.fromLonLat([13.39, 52.51]), // starting position [lng, lat]
zoom: 3 // starting zoom
})
});
```
8. Create a function to display a popup when clicking on the geojson layer and show the information of the age attribute
```js
map.addLayer(geojson);
map.on('click', function (evt) {
const features = map.getFeaturesAtPixel(evt.pixel);
const feature = features.length ? features[0] : undefined;
if (feature.get('age')) {
const coordinate = evt.coordinate;
content.innerHTML = `
