Choropleth Map with OpenLayers

OpenLayers

Create a data-driven choropleth map using a style function to color polygons based on property values.

progress_activityLoading map...

function getColor(value) {
  return value > 80 ? '#b5179e' : value > 60 ? '#e63946' : value > 40 ? '#f4a261' : value > 20 ? '#e9c46a' : '#2a9d8f';
}
var geojson = {
  type: 'FeatureCollection',
  features: [
    { type: 'Feature', properties: { name: 'Zone A', value: 85 }, geometry: { type: 'Polygon', coordinates: [[[2.30, 48.87], [2.34, 48.87], [2.34, 48.85], [2.30, 48.85], [2.30, 48.87]]] } },
    { type: 'Feature', properties: { name: 'Zone B', value: 45 }, geometry: { type: 'Polygon', coordinates: [[[2.34, 48.87], [2.38, 48.87], [2.38, 48.85], [2.34, 48.85], [2.34, 48.87]]] } },
    { type: 'Feature', properties: { name: 'Zone C', value: 15 }, geometry: { type: 'Polygon', coordinates: [[[2.30, 48.85], [2.34, 48.85], [2.34, 48.83], [2.30, 48.83], [2.30, 48.85]]] } }
  ]
};
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: new ol.format.GeoJSON().readFeatures(geojson, { featureProjection: 'EPSG:3857' })
  }),
  style: function(feature) {
    return new ol.style.Style({
      fill: new ol.style.Fill({ color: getColor(feature.get('value')) + '99' }),
      stroke: new ol.style.Stroke({ color: '#333', width: 1 })
    });
  }
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
    vectorLayer
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.34, 48.855]), zoom: 14 })
});

<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/ol@10.10.0/ol.css" />
<script src="https://unpkg.com/ol@10.10.0/dist/ol.js"></script>
<style>
body { margin: 0; padding: 0; }
#map { width: 100%; height: 100vh; }
</style>
</head>
<body>
<div id="map"></div>
<script>
function getColor(value) {
  return value > 80 ? '#b5179e' : value > 60 ? '#e63946' : value > 40 ? '#f4a261' : value > 20 ? '#e9c46a' : '#2a9d8f';
}
var geojson = {
  type: 'FeatureCollection',
  features: [
    { type: 'Feature', properties: { name: 'Zone A', value: 85 }, geometry: { type: 'Polygon', coordinates: [[[2.30, 48.87], [2.34, 48.87], [2.34, 48.85], [2.30, 48.85], [2.30, 48.87]]] } },
    { type: 'Feature', properties: { name: 'Zone B', value: 45 }, geometry: { type: 'Polygon', coordinates: [[[2.34, 48.87], [2.38, 48.87], [2.38, 48.85], [2.34, 48.85], [2.34, 48.87]]] } },
    { type: 'Feature', properties: { name: 'Zone C', value: 15 }, geometry: { type: 'Polygon', coordinates: [[[2.30, 48.85], [2.34, 48.85], [2.34, 48.83], [2.30, 48.83], [2.30, 48.85]]] } }
  ]
};
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: new ol.format.GeoJSON().readFeatures(geojson, { featureProjection: 'EPSG:3857' })
  }),
  style: function(feature) {
    return new ol.style.Style({
      fill: new ol.style.Fill({ color: getColor(feature.get('value')) + '99' }),
      stroke: new ol.style.Stroke({ color: '#333', width: 1 })
    });
  }
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
    vectorLayer
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.34, 48.855]), zoom: 14 })
});

</script>
</body>
</html>

import Map from 'ol/Map';
import View from 'ol/View';
import TileLayer from 'ol/layer/Tile';
import { fromLonLat } from 'ol/proj';
import 'ol/ol.css';

function getColor(value) {
  return value > 80 ? '#b5179e' : value > 60 ? '#e63946' : value > 40 ? '#f4a261' : value > 20 ? '#e9c46a' : '#2a9d8f';
}
var geojson = {
  type: 'FeatureCollection',
  features: [
    { type: 'Feature', properties: { name: 'Zone A', value: 85 }, geometry: { type: 'Polygon', coordinates: [[[2.30, 48.87], [2.34, 48.87], [2.34, 48.85], [2.30, 48.85], [2.30, 48.87]]] } },
    { type: 'Feature', properties: { name: 'Zone B', value: 45 }, geometry: { type: 'Polygon', coordinates: [[[2.34, 48.87], [2.38, 48.87], [2.38, 48.85], [2.34, 48.85], [2.34, 48.87]]] } },
    { type: 'Feature', properties: { name: 'Zone C', value: 15 }, geometry: { type: 'Polygon', coordinates: [[[2.30, 48.85], [2.34, 48.85], [2.34, 48.83], [2.30, 48.83], [2.30, 48.85]]] } }
  ]
};
var vectorLayer = new ol.layer.Vector({
  source: new ol.source.Vector({
    features: new ol.format.GeoJSON().readFeatures(geojson, { featureProjection: 'EPSG:3857' })
  }),
  style: function(feature) {
    return new ol.style.Style({
      fill: new ol.style.Fill({ color: getColor(feature.get('value')) + '99' }),
      stroke: new ol.style.Stroke({ color: '#333', width: 1 })
    });
  }
});
var map = new ol.Map({
  target: 'map',
  layers: [
    new ol.layer.Tile({ source: new ol.source.XYZ({ url: 'https://api.maptiler.com/maps/streets-v4/256/{z}/{x}/{y}.png?key=YOUR_MAPTILER_KEY', attributions: '&copy; <a href="https://www.maptiler.com/copyright/">MapTiler</a>' }) }),
    vectorLayer
  ],
  view: new ol.View({ center: ol.proj.fromLonLat([2.34, 48.855]), zoom: 14 })
});

How it works

A choropleth map colors regions based on data values. In OpenLayers, this is achieved with a style function that reads each feature’s properties and returns a matching style.

The getColor() helper maps numeric values to color thresholds. The style function is called for every feature during rendering, so colors update automatically if feature properties change. GeoJSON data is parsed with ol.format.GeoJSON using featureProjection: 'EPSG:3857' to convert coordinates.

Key APIs

API	Description	Docs
`ol.format.GeoJSON`	Parse GeoJSON into OpenLayers features	openlayers.org
Style function	Dynamic styling per feature	openlayers.org
`feature.get()`	Read feature properties by key	openlayers.org

FAQ

How do I load GeoJSON from an external URL?

Use new ol.source.Vector({ url: 'data.geojson', format: new ol.format.GeoJSON() }). The source fetches and parses the file automatically.

How do I add a legend?

Create an HTML element with color swatches matching your threshold values and position it as a map control or overlay.

Common mistakes

Forgetting featureProjection: 'EPSG:3857' when parsing GeoJSON: features will appear near the null island
Using fully opaque fills that obscure the basemap: append alpha ('99' hex) or use rgba()
Not closing polygon rings in the GeoJSON data

auto_awesome

Build maps using OpenLayers with AI

Generate code like this choropleth map with openlayers example using the OpenLayers skill in your IDE.

auto_awesomeGet skills keyGet a free API key

Related Examples

Polygon Features in OpenLayers
Load GeoJSON in OpenLayers
See how to do this in Leaflet, MapLibre GL JS or MapTiler SDK