Filter symbols by text input

Filter symbols by icon name by typing in a text input. See the example: https://docs.mapbox.com/mapbox-gl-js/example/filter-markers-by-input/

by Tristen Brown

HTML

<script src="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.js"></script>
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-gl-js/v1.6.1/mapbox-gl.css">
<link rel="stylesheet" href="https://api.mapbox.com/mapbox-assembly/mbx/v0.28.2/assembly.min.css">
<div id='map' class='absolute top bottom w-full'></div>
<div class='absolute top left mx12 py12'>
  <input id='filter-input' class='input bg-white' type='text' name='filter' placeholder='Filter by state' value='Utah' />
</div>

JavaScript

mapboxgl.accessToken =
  'pk.eyJ1IjoidHJpc3RlbiIsImEiOiJjajZoOXU4Z2kwNnppMnlxd2d6bTFvZ2xtIn0.PP7AoUakMfeqdXFHdsY0oA';

const filterInput = document.getElementById('filter-input');
const map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/streets-v11',
  center: [-98, 37],
  zoom: 3
});

const lineLayers = [
  'tunnel-street-minor-low',
  'tunnel-street-minor-case',
  'tunnel-primary-secondary-tertiary-case',
  'tunnel-major-link-case',
  'tunnel-motorway-trunk-case',
  'tunnel-construction',
  'tunnel-major-link',
  'tunnel-street-minor',
  'tunnel-primary-secondary-tertiary',
  'tunnel-motorway-trunk',
  'road-minor-low',
  'road-minor-case',
  'road-street-low',
  'road-street-case',
  'road-secondary-tertiary-case',
  'road-primary-case',
  'road-major-link-case',
  'road-motorway-trunk-case',
  'road-construction',
  'road-major-link',
  'road-polygon',
  'road-minor',
  'road-street',
  'road-secondary-tertiary',
  'road-primary',
  'road-motorway-trunk',
  'bridge-street-minor-low',
  'bridge-street-minor-case',
  'bridge-primary-secondary-tertiary-case',
  'bridge-major-link-case',
  'bridge-motorway-trunk-case',
  'bridge-construction',
  'bridge-major-link',
  'bridge-street-minor',
  'bridge-primary-secondary-tertiary',
  'bridge-motorway-trunk',
  'bridge-major-link-2-case',
  'bridge-motorway-trunk-2-case',
  'bridge-major-link-2',
  'bridge-motorway-trunk-2'
];

const symbolLayers = [
  'state-label'
];

function applyFilter(value) {
  symbolLayers.forEach(key => {
    map.setPaintProperty(
      key,
      'text-opacity',
      ['match', ['get', 'name'],
        [value], 1, 0
      ]
    );
  });
  
  lineLayers.forEach(key => {
    map.setPaintProperty(
      key,
      'line-opacity',
      ['match', ['get', 'iso_3166_2'],
        [`US-${value.toUpperCase()}`], 1, 0
      ]
    );
  });
}

map.on('load', function() {
  filterInput.addEventListener('keyup', e => {
    const value = e.target.value.trim();
   ...