Filter symbols by toggling a list

Filter a set of symbols based on a property value in the data. See the example: https://docs.mapbox.com//mapbox-gl-js/example/filter-markers/

by rognstad

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.9.0/mapbox-gl.css">


<div id="map"></div>

CSS

body { margin: 0; padding: 0; }
	#map { position: absolute; top: 0; bottom: 0; width: 100%; }

JavaScript

mapboxgl.accessToken =
  'pk.eyJ1IjoienViaWVjYXIiLCJhIjoiY2p6YnBxenE0MDF6ZjNucXMxMjgzbGtodiJ9.qzrNE4LZ1JIR5l6t26Yjdw';
const places = {
  type: 'FeatureCollection',
  features: [
    {
      type: 'Feature',
      properties: {
        color: 'red'
      },
      geometry: {
        type: 'Point',
        coordinates: [-77.038659, 38.931567]
      }
    },
    {
      type: 'Feature',
      properties: {
        color: 'red'
      },
      geometry: {
        type: 'Point',
        coordinates: [-77.003168, 38.894651]
      }
    },
    {
      type: 'Feature',
      properties: {
        color: 'green'
      },
      geometry: {
        type: 'Point',
        coordinates: [-77.090372, 38.881189]
      }
    },
    {
      type: 'Feature',
      properties: {
        color: 'orange'
      },
      geometry: {
        type: 'Point',
        coordinates: [-77.052477, 38.943951]
      }
    },
    {
      type: 'Feature',
      properties: {
        color: 'purple'
      },
      geometry: {
        type: 'Point',
        coordinates: [-77.031706, 38.914581]
      }
    },
    {
      type: 'Feature',
      properties: {
        color: 'purple'
      },
      geometry: {
        type: 'Point',
        coordinates: [-77.020945, 38.878241]
      }
    },
    {
      type: 'Feature',
      properties: {
        color: 'purple'
      },
      geometry: {
        type: 'Point',
        coordinates: [-77.007481, 38.876516]
      }
    }
  ]
};

places.features.forEach((place, index) => {
  // add a unique id for feature-state
  place.properties.index = index;
  // add a boolean to use with ['get'] lookups (this is awkard here but makes sense with my real data)
  place.properties[place.properties.color] = true;
});

var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-77.04, 38.907],
  zoom: 11.15
});

map.on('load', function() {
  // Add a GeoJSON source containing place coordinates and information.
 ...