Examples
Layers (31)
Display buildings in 3DExtrude polygons for 3D indoor mappingAdd a 3D modelAdjust a layer's opacityAnimate a lineAnimate a series of imagesAnimate a pointChange building color based on zoom levelChange the case of labelsDisplay HTML clusters with custom propertiesCreate and style clustersChange a layer's color with buttonsAdd a custom style layerStyle circles with a data-driven propertyStyle 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 layerCreate a gradient line using an expressionAdd multiple geometries from one GeoJSON sourceStyle ocean depth dataShow and hide layersChange worldview of administrative boundariesUpdate a choropleth layer by zoom levelVariable label placementVisualize population densityAdd hillshading

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>
<html>
<head>
<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/v1.0.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v1.0.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style>
.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;
}
</style>
<div id='map'></div>
<div id='map-overlay' class='map-overlay'></div>
<script>
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"
});
map.addLayer({
"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.
map.addLayer({
"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.appendChild(title);
overlay.appendChild(population);
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
popup.setLngLat(e.lngLat)
.setText(feature.properties.COUNTY)
.addTo(map);
});
map.on('mouseleave', 'counties', function() {
map.getCanvas().style.cursor = '';
popup.remove();
map.setFilter('counties-highlighted', ['in', 'COUNTY', '']);
overlay.style.display = 'none';
});
});
</script>
</body>
</html>