Filter symbols by toggling checkboxes
This examples demonstrates a technique for filtering symbols on a map when the user toggles a checkbox.
This technique creates four symbol layers that share a common GeoJSON source. Each layer includes a filter
property so that it will only show one type of feature from the source based its icon
property (e.g. The poi-theatre
layer will only show features where the value of the icon
property is 'theatre'
)
When a checkbox is toggled, setLayoutProperty
is called to toggle the visibility of the respective layer.
An alternative technique using a single layer and map.setFilter
is availble at Filter symbols using a dynamic expression
This example uses the Mapbox Light style. The icon-image
used in this example comes from the Mapbox Light style's sprite.
To view all available images in a style's sprite or add additional images, open the style in Mapbox Studio and click the Images tab. To add a new image to the style at runtime see the Add an icon to the map example.
<!DOCTYPE html><html><head><meta charset="utf-8"><title>Filter symbols by toggling checkboxes</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no"><link href="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.css" rel="stylesheet"><script src="https://api.mapbox.com/mapbox-gl-js/v2.14.1/mapbox-gl.js"></script><style>body { margin: 0; padding: 0; }#map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><style>.filter-group {font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;font-weight: 600;position: absolute;top: 10px;right: 10px;z-index: 1;border-radius: 3px;width: 120px;color: #fff;} .filter-group input[type='checkbox']:first-child + label {border-radius: 3px 3px 0 0;} .filter-group label:last-child {border-radius: 0 0 3px 3px;border: none;} .filter-group input[type='checkbox'] {display: none;} .filter-group input[type='checkbox'] + label {background-color: #3386c0;display: block;cursor: pointer;padding: 10px;border-bottom: 1px solid rgba(0, 0, 0, 0.25);} .filter-group input[type='checkbox'] + label {background-color: #3386c0;text-transform: capitalize;} .filter-group input[type='checkbox'] + label:hover,.filter-group input[type='checkbox']:checked + label {background-color: #4ea0da;} .filter-group input[type='checkbox']:checked + label:before {content: '✔';margin-right: 5px;}</style><div id="map"></div><nav id="filter-group" class="filter-group"></nav> <script> // TO MAKE THE MAP APPEAR YOU MUST // ADD YOUR ACCESS TOKEN FROM // https://account.mapbox.com mapboxgl.accessToken = 'YOUR_MAPBOX_ACCESS_TOKEN';// This GeoJSON contains features that include an "icon"// property. The value of the "icon" property corresponds// to an image in the Mapbox Light style's sprite. (Note:// the name of images is the value of the "icon" property// + "-15".)const places = {'type': 'FeatureCollection','features': [{'type': 'Feature','properties': {'icon': 'theatre'},'geometry': {'type': 'Point','coordinates': [-77.038659, 38.931567]}},{'type': 'Feature','properties': {'icon': 'theatre'},'geometry': {'type': 'Point','coordinates': [-77.003168, 38.894651]}},{'type': 'Feature','properties': {'icon': 'bar'},'geometry': {'type': 'Point','coordinates': [-77.090372, 38.881189]}},{'type': 'Feature','properties': {'icon': 'bicycle'},'geometry': {'type': 'Point','coordinates': [-77.052477, 38.943951]}},{'type': 'Feature','properties': {'icon': 'music'},'geometry': {'type': 'Point','coordinates': [-77.031706, 38.914581]}},{'type': 'Feature','properties': {'icon': 'music'},'geometry': {'type': 'Point','coordinates': [-77.020945, 38.878241]}},{'type': 'Feature','properties': {'icon': 'music'},'geometry': {'type': 'Point','coordinates': [-77.007481, 38.876516]}}]}; const filterGroup = document.getElementById('filter-group');const map = new mapboxgl.Map({container: 'map',// Choose from Mapbox's core styles, or make your own style with Mapbox Studiostyle: 'mapbox://styles/mapbox/light-v11',center: [-77.04, 38.907],zoom: 11.15}); map.on('load', () => {// Add a GeoJSON source containing place coordinates and information.map.addSource('places', {'type': 'geojson','data': places}); for (const feature of places.features) {const symbol = feature.properties.icon;const layerID = `poi-${symbol}`; // Add a layer for this symbol type if it hasn't been added already.if (!map.getLayer(layerID)) {map.addLayer({'id': layerID,'type': 'symbol','source': 'places','layout': {// These icons are a part of the Mapbox Light style.// To view all images available in a Mapbox style, open// the style in Mapbox Studio and click the "Images" tab.// To add a new image to the style at runtime see// https://docs.mapbox.com/mapbox-gl-js/example/add-image/'icon-image': `${symbol}`,'icon-allow-overlap': true},'filter': ['==', 'icon', symbol]}); // Add checkbox and label elements for the layer.const input = document.createElement('input');input.type = 'checkbox';input.id = layerID;input.checked = true;filterGroup.appendChild(input); const label = document.createElement('label');label.setAttribute('for', layerID);label.textContent = symbol;filterGroup.appendChild(label); // When the checkbox changes, update the visibility of the layer.input.addEventListener('change', (e) => {map.setLayoutProperty(layerID,'visibility',e.target.checked ? 'visible' : 'none');});}}});</script> </body></html>