Create Choropleth Web map with MapLibre Library
Go to MapTiler Cloud and choose a base map. 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 your content can have the full focus of the user. The MapTiler Customize tool offers you an easy way to adjust the map's colors to your needs.
After you Save the map you name it. Click on Create and then on Publish. Now, under Use vector style, click on MapLibre GL JS.
Here you can copy the sample code which has already defined the base map with your unique MapTiler API key. If you publish a map, you are also exposing your map key. MapTiler offers several methods to give you control over the key to avoid misuse. Read more about the possible protection of keys here.
Add GeoJSON to Sample Code.
<script> section of this sample code, we will first add GeoJSON source. The path to GeoJSON itself is defined in data and leads to hosted GeoJSON on MapTiler Cloud (After you insert the following code, your GeoJSON will not be visible!) This source will be named age.
We want to include GeoJSON under the label. That means we need to store labels from the base map style in some variable. In this example, the variable is called firstSymbolId.
Now we can add GeoJSON source as a layer to our map and color it by mean age. We also need to include firsSymbolID to
map.addLayer to display GeoJSON under labels.
PRO TIP: Do not choose colors randomly. If you do, color-blind people might have problems reading your map. Use cartographic tools like a color brewer, which can help you find the right color for your audience.
The states with the same color (e.g. Portugal and Spain) might be hard to distinguish at this stage. We can fix that by adding an outline. Don't forget to add firstSymbolId again. Without them, the outline might cut labels.
Add popup to GeoJSON
To add a popup, we need to create a new map.on constructor, which will be type click.
For the popup itself, we need to set Latitude and longitude. This is done by
function (e), which takes coordinates of the place where the user clicks. We can fill popup with
.setHTML(). This method combines normal text and part of our GeoJSON. Our GeoJSON has three properties: id, Age and NAME_ENGL. We can call them in .setHTML as
e.features.properties.<name of propertie>
To alert users of popups, you might change the cursor to a pointer when the mouse is over the states layer and change it back when it leaves.
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 colours we need to add some styling to our
Now you can add GeoJSON to a web map under a certain level of geometries from basemap and style it according to the values of GeoJSON properties. Your map can also have Popups indicated by the change between cursor and pointer and a legend that will help the users understand the map and information you are presenting.