JSFiddle - React, Tailwind, and code Playground

by Tristen Brown

JavaScript

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

var layerIDs = []; // Will contain a list used to filter against.
var filterInput = document.getElementById('filter-input');
var map = new mapboxgl.Map({
  container: 'map',
  style: 'mapbox://styles/mapbox/light-v10',
  center: [-98, 37],
  zoom: 3.25
});

map.on('load', function() {
  // Add a GeoJSON source containing place coordinates and information.
  map.addSource('places', {
    type: 'geojson',
    data: places
  });

var state = 'state-label';

  filterInput.addEventListener('keyup', function(e) {
    // If the input value matches a layerID set
    // it"s visibility to "visible" or else hide it.
    var value = e.target.value.trim().toLowerCase();
    layerIDs.forEach(function(layerID) {
      map.setLayoutProperty(
        layerID,
        'visibility',
        layerID.indexOf(value) > -1 ? 'visible' : 'none'
      );
    });
  });
});