Zoomable Choropleth Map from GeoJSON with OpenLayers

This article demonstrates how to overlay the GeoJSON on the web map. You will also learn how to style GeoJSON with polygon features. We will also guide you through adding a legend so that your final choropleth map can be easily understandable to users. This article uses the javascript library OpenLayers. Example code of shown choropleth map is available on GitHub.

We will work with the javascript library OpenLayers. If you want to create a choropleth map in MapLibre (which we recommend) or Leaflet library, follow the links at the end of this article. As an example data, we use countries with attributes from EUROSTAT in GeoJSON format. Here is explained how to prepare example data, which are used in this tutorial, and how to upload GeoJSON to MapTiler Cloud.

Let’s start with the basemap

Go to MapTiler Cloud → choose a basemap. We chose the Dark Street map for this demo, which you can find under Streets → customize a copy. This version of the Streetmap was specially designed so the user is fully focused on your content. The MapTiler Customize tool offers an easy way to adjust the colors of the map according to your needs.

Under the Use vector styles button, click on OpenLayers with vector tiles and copy the example code.

In the body section of the example, the code is <div> an element that will hold our choropleth map and script. In the script is defined JSON style and a new map with set center and zoom level.

 var styleJson = 'https://api.maptiler.com/maps/08a178db-70e3-4637-bcee-c3e63d17764c/style.json?key=<get-your-own>';
      var map = new ol.Map({
        target: 'map',
        view: new ol.View({
          constrainResolution: true,
          center: ol.proj.fromLonLat([15.27683,55.99870]),
          zoom: 4
        })
      });

The JSON style is applied to the map.

 olms.apply(map, styleJson);

Add GeoJSON to a map

For this example, we use the mean age of women in the first marriage in 2019 created from EUROSTAT data, which we upload to MapTiler Cloud. You can prepare the same data if you follow this article. Before we add GeoJSON to the map we must define the source of our GeoJSON as a layer.

var geojson = new ol.layer.Vector({
        source: new ol.source.Vector({
          format: new ol.format.GeoJSON(),
          url: `https://api.maptiler.com/data/55336072-ef0f-4cb5-8671-b8d6ebbb0a05/features.json?key=<get-your-own>`,
        }),
        zIndex: 1, 
        style: styles,
      });

Notice that we refer to style styles.

Then we add this source to the map.

map.addLayer(geojson)

Style GeoJSON based on attribute values

Because we refer in GeoJSON source to style: styles we need to define these styles before GeoJSON source. We want to have a different fill of our GeoJSON based on attribute values. We can do so by using conditions.

var styles = function(geojson,resolution) {
     if (geojson.get('age') >= 30) {color = '#8c2d04' ;}
     else if (geojson.get('age') >= 29 ){color ='#d94801';}
     else if (geojson.get('age') >= 28 ){color ='#f16913';}
     else if (geojson.get('age') >= 27 ){color ='#fd8d3c';}
     else if (geojson.get('age') >= 26 ){color ='#fdae6b';}
     else if (geojson.get('age') >= 25 ){color ='#fdd0a2';}
     else if (geojson.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,
          }),
        }),
      ]
    };

Add a legend to a choropleth map

Legend helps users to understand a map, and it’s easy to make with HTML. Go to the <body> section of your code and include the following code, which defines the legend header, colors for each category, and their meaning.

<div id="state-legend" class="legend"> 
  <h4>Average age of </br> women at first marriage </h4>
    <div><span style="background-color: #fff5eb"></span>23</div>
    <div><span style="background-color: #fee6ce"></span>24</div>
    <div><span style="background-color: #fdd0a2"></span>25</div>
    <div><span style="background-color: #fdae6b"></span>26</div>
    <div><span style="background-color: #fd8d3c"></span>27</div>
    <div><span style="background-color: #f16913"></span>28</div>
    <div><span style="background-color: #d94801"></span>29</div>
    <div><span style="background-color: #8c2d04"></span>30</div>
</div>

To display colors we need to add some styling to our <style> in <head>.

    .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: 1;
  }

  .legend h4 {
      margin: 0 0 10px;
  }

  .legend div span {
      border-radius: 50%;
      display: inline-block;
      height: 10px;
      margin-right: 5px;
      width: 10px;
  }

Conclusion

Now you can add GeoJSON to a web map and style it according to the values of GeoJSON properties with the OpenLayers library. Your map can also have a legend that will help the users understand the map and information you are presenting.

Zoomable choropleth map from GeoJSON with MapLibre
Zoomable choropleth map from GeoJSON in Leaflet
Prepare GeoJSON with attributes
Dark & Night map