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
.html
file. This code is the result of doing steps 1 to 12 of the tutorial How to create a countries map with your own data -
Include the
chroma-js
JavaScript file in the<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 thevizData
. -
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-color
property of the layer and get the color from thecreatePaintColor
function. -
Create a file called
legendControl.js
next to your.html
file. Copy the following code, paste it into thelegendControl.js
file. -
Add the mouse events listener to the map.
-
Create the legend html.
-
Create the
choroplethLegendControl
style. Back to theindex.html
add the following lines to the style header section. -
Include the
legendControl.js
JavaScript file in the <body> of your HTML file. -
Add the
choroplethLegendControl
to 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
legendControl.js
. -
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.
View complete source code on GitHub
Learn more
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.
Consult the JavaScript Maps API reference to learn about Ramps, scales, curves.
Read the following How-tos related to choropleth maps:
How to style a choropleth map in Edit Tool
Prepare GeoJSON with attributes for choropleth map and upload GeoJSON to MapTiler Cloud
JavaScript Maps API
Tutorials
- Get Started
- Learn the basics
- Display Marker
- GeoJSON Polygon Layer
- GeoJSON Line Layer
- GeoJSON Point Layer
- Raster Layer
- GeoJSON MultiGeom Layer
- Custom Map
- 3D Map
- Choropleth GeoJSON
- Geocoding
- 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
Video tutorials
Examples
- Add a 3D model
- Add a WMS source
- Add a canvas source
- Add a custom style layer
- Add a generated icon to the map
- Add a new layer below labels
- Add a pattern to a polygon
- Add a raster tile source
- Add a stretchable image to the map
- Add a third party vector tile source
- Add a vector tile source
- Add a video
- Add an animated icon to the map
- Add custom icons with Markers
- Add live realtime data
- Add multiple geometries from one GeoJSON source
- Add support for right-to-left scripts
- Animate a line
- Animate a marker
- Animate a point
- Animate a point along a route
- Animate a series of images
- Animate map camera around a point
- Attach a popup to a marker instance
- Center the map on a clicked symbol
- Change a layer's color with buttons
- Change a map's language
- Change building color based on zoom level
- Change the case of labels
- Change the default position for attribution
- Check if MapLibre GL JS is supported
- Create a draggable Marker
- Create a draggable point
- Create a gradient line using an expression
- Heatmap layer
- Hillshade layer
- Create a hover effect
- Polygon extrusion
- Create a time slider
- Style clusters
- Customize camera animations
- Disable map rotation
- Disable scroll zoom
- Display HTML clusters with custom properties
- Display a non-interactive map
- Display a popup
- Display a popup on click
- Display a popup on hover
- Display a satellite map
- Display and style rich text labels
- Display buildings in 3D
- Display line that crosses 180th meridian
- Display map navigation controls
- Draw GeoJSON points
- Extrude polygons for 3D indoor mapping
- Filter symbols by text input
- Filter symbols by toggling a list
- Fit a map to a bounding box
- Fit to the bounds of a LineString
- Fly to a location
- Fly to a location based on scroll position
- Generate and add a missing icon to the map
- Get coordinates of the mouse pointer
- Get features under the mouse pointer
- Jump to a series of locations
- Locate the user
- Measure distances
- Navigate the map with game-like controls
- Offset the vanishing point using padding
- Render world copies
- Restrict map panning to an area
- Set pitch and bearing
- Show drawn polygon area
- Show polygon information on click
- Slowly fly to a location
- Style lines with a data-driven property
- Toggle interactions
- Update a feature in realtime
- Use a fallback image
- Use locally generated ideographs
- Variable label placement
- View a fullscreen map
- View local GeoJSON
- View local GeoJSON (experimental)
- Visualize population density