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.
The JSON style is applied to the map.
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.
Notice that we refer to style styles.
Then we add this source to the map.
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.
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.
To display colors we need to add some styling to our
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.