Layers (30)
Extrude polygons for 3D indoor mappingDisplay buildings in 3DAdjust a layer's opacityAdd a 3D modelAnimate a lineAnimate a series of imagesAnimate a pointChange building color based on zoom levelChange the case of labelsDisplay HTML clusters with custom propertiesChange a layer's color with buttonsCreate and style clustersStyle circles with a data-driven propertyAdd a custom style layerStyle lines with a data-driven propertyDisplay and style rich text labelsAdd a pattern to a polygonAdd a new layer below labelsAdd a GeoJSON lineDraw GeoJSON pointsAdd a GeoJSON polygonCreate a heatmap layerAdd hillshadingCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceStyle ocean depth dataChange worldview of administrative boundariesShow and hide layersUpdate a choropleth layer by zoom levelVisualize population density

Highlight features containing similar data

Hover over counties to highlight counties that share the same name.

Mapbox GL unsupported
Mapbox GL requires WebGL support. Please check that you are using a supported browser and that WebGL is enabled.
<!DOCTYPE html>
<meta charset='utf-8' />
<title>Highlight features containing similar data</title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.53.1/mapbox-gl.css' rel='stylesheet' />
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
.map-overlay {
font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
background-color: #fff;
box-shadow: 0 1px 2px rgba(0,0,0,0.10);
border-radius: 3px;
position: absolute;
width: 25%;
top: 10px;
left: 10px;
padding: 10px;
display: none;
<div id='map'></div>
<div id='map-overlay' class='map-overlay'></div>
mapboxgl.accessToken = '<your access token here>';
var map = new mapboxgl.Map({
container: 'map',
style: 'mapbox://styles/mapbox/streets-v11',
center: [-98, 38.88],
minZoom: 2,
zoom: 3
var overlay = document.getElementById('map-overlay');
// Create a popup, but don't add it to the map yet.
var popup = new mapboxgl.Popup({
closeButton: false
map.on('load', function() {
// Add the source to query. In this example we're using
// county polygons uploaded as vector tiles
map.addSource('counties', {
"type": "vector",
"url": "mapbox://mapbox.82pkq93d"
"id": "counties",
"type": "fill",
"source": "counties",
"source-layer": "original",
"paint": {
"fill-outline-color": "rgba(0,0,0,0.1)",
"fill-color": "rgba(0,0,0,0.1)"
}, 'settlement-label'); // Place polygon under these labels.
"id": "counties-highlighted",
"type": "fill",
"source": "counties",
"source-layer": "original",
"paint": {
"fill-outline-color": "#484896",
"fill-color": "#6e599f",
"fill-opacity": 0.75
"filter": ["in", "COUNTY", ""]
}, 'settlement-label'); // Place polygon under these labels.
map.on('mousemove', 'counties', function(e) {
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = 'pointer';
// Single out the first found feature.
var feature = e.features[0];
// Query the counties layer visible in the map. Use the filter
// param to only collect results that share the same county name.
var relatedFeatures = map.querySourceFeatures('counties', {
sourceLayer: 'original',
filter: ['in', 'COUNTY', feature.properties.COUNTY]
// Render found features in an overlay.
overlay.innerHTML = '';
// Total the population of all features
var populationSum = relatedFeatures.reduce(function(memo, feature) {
return memo + feature.properties.population;
}, 0);
var title = document.createElement('strong');
title.textContent = feature.properties.COUNTY + ' (' + relatedFeatures.length + ' found)';
var population = document.createElement('div');
population.textContent = 'Total population: ' + populationSum.toLocaleString();
overlay.style.display = 'block';
// Add features that share the same county name to the highlighted layer.
map.setFilter('counties-highlighted', ['in', 'COUNTY', feature.properties.COUNTY]);
// Display a popup with the name of the county
map.on('mouseleave', 'counties', function() {
map.getCanvas().style.cursor = '';
map.setFilter('counties-highlighted', ['in', 'COUNTY', '']);
overlay.style.display = 'none';