Filter symbols by text input
Filter symbols by icon name by typing in a text input.
<!DOCTYPE html><html><head><meta charset="utf-8" /><title>Filter symbols by text input</title><meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no" /><script src="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.js"></script><link href="https://cdn.jsdelivr.net/npm/@goongmaps/goong-js@1.0.9/dist/goong-js.css" rel="stylesheet" /><style> body { margin: 0; padding: 0; } #map { position: absolute; top: 0; bottom: 0; width: 100%; }</style></head><body><style>.filter-ctrl {position: absolute;top: 10px;right: 10px;z-index: 1;} .filter-ctrl input[type='text'] {font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;width: 100%;border: 0;background-color: #fff;margin: 0;color: rgba(0, 0, 0, 0.5);padding: 10px;box-shadow: 0 0 0 2px rgba(0, 0, 0, 0.1);border-radius: 3px;width: 180px;}</style><div id="map"></div><div class="filter-ctrl"><inputid="filter-input"type="text"name="filter"placeholder="Filter by name"/></div> <script>var places = {'type': 'FeatureCollection','features': [{'type': 'Feature','properties': {'icon': 'theatre'},'geometry': {'type': 'Point','coordinates': [105.79998778336434, 21.01402924595785]}},{'type': 'Feature','properties': {'icon': 'theatre'},'geometry': {'type': 'Point','coordinates': [105.80844779933346, 21.017413597514967]}},{'type': 'Feature','properties': {'icon': 'bar'},'geometry': {'type': 'Point','coordinates': [105.82352901021386, 21.01464195668537]}},{'type': 'Feature','properties': {'icon': 'bicycle'},'geometry': {'type': 'Point','coordinates': [105.80997267336716, 21.002605417767967]}},{'type': 'Feature','properties': {'icon': 'music'},'geometry': {'type': 'Point','coordinates': [105.81375070070531, 21.010416584945258]}},{'type': 'Feature','properties': {'icon': 'music'},'geometry': {'type': 'Point','coordinates': [105.80842283412754, 21.006449448058355]}},{'type': 'Feature','properties': {'icon': 'music'},'geometry': {'type': 'Point','coordinates': [105.80123537896272, 21.002594218806486]}}]}; var layerIDs = []; // Will contain a list used to filter against.var filterInput = document.getElementById('filter-input');goongjs.accessToken = '8qzxZAuxcsctSlmOszInchP1A5GrmRBHJwCBCjO6';var map = new goongjs.Map({container: 'map',style: 'https://tiles.goong.io/assets/goong_map_web.json',center: [105.80123537896272, 21.002594218806486],zoom: 13}); map.on('load', function () {// Add a GeoJSON source containing place coordinates and information.map.addSource('places', {'type': 'geojson','data': places}); places.features.forEach(function (feature) {var symbol = feature.properties['icon'];var 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': {'icon-image': symbol + '-15','icon-allow-overlap': true,'text-field': symbol,'text-font': ['Roboto Regular'],'text-size': 11,'text-transform': 'uppercase','text-letter-spacing': 0.05,'text-offset': [0, 1.5]},'paint': {'text-color': '#202','text-halo-color': '#fff','text-halo-width': 2},'filter': ['==', 'icon', symbol]}); layerIDs.push(layerID);}}); 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');});});});</script> </body></html>