How to display an interactive choropleth map legend control
This tutorial shows how to display an interactive choropleth map legend control.
Move the mouse over the colored boxes of the legend to filter the elements of the map. Move the mouse over a country to see the population
Copy the following code, paste it into your favorite text editor, and save it as a
.htmlfile. This code is the result of doing steps 1 to 12 of the tutorial How to create a countries map with your own data
<head>of your HTML file. To create the legend we will use the chroma-js library. We are going to use the library to create the color scale and create the class breaks based on the
Get the population data from vizData.
Create the data equidistant breaks and the scale color. To do these calculations you can use any other library such as D3.js.
Create a function to create the choropleth map based on the breaks (limits) and color scale.
Create a choropleth map based on the population attribute. Change the
fill-colorproperty of the layer and get the color from the
Create a file called
legendControl.jsnext to your
.htmlfile. Copy the following code, paste it into the
Add the mouse events listener to the map.
Create the legend html.
choroplethLegendControlstyle. Back to the
index.htmladd the following lines to the style header section.
choroplethLegendControlto the map.
We already have the legend on our map. Now we’re going to add some functionality to the legend to make it interactive and allow you to filter items on the map. Back to the
Finally add the functionality to show the information of the selected element on the map in the legend. Hovering over a country with data will display the population in the corresponding category in the legend.
Check out the How to use and filter data for MapTiler Countries tutorial.
Visit the MapTiler Countries schema to know how it is organized into different thematic layers and which attribute and values each layer contains.
Read the following How-tos related to choropleth maps:
- Get Started
- Learn the basics
- Display Marker
- GeoJSON Layer
- Raster Layer
- Custom Map
- 3D Map
- Choropleth GeoJSON
- Reverse Geocoding
- Geocoder component
- Countries filter
- Countries with data
- Elevation profile
- Center map by IP
- Disputed borders by IP
- Map language by IP
- Cookie consent by IP
- Scale control
- Style switcher
- Minimap control
- Legend control
- Choropleth Legend