テキスト入力でシンボルをフィルター
アイコン名をテキスト入力し、シンボルをフィルターします。
<!DOCTYPE html><html><head><meta charset="utf-8"><title>テキスト入力でシンボルをフィルター</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-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"><input id="filter-input" type="text" name="filter" placeholder="Filter by name"></div> <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 layerIDs = []; // This array will contain a list used to filter against.const filterInput = document.getElementById('filter-input');const map = new mapboxgl.Map({container: 'map',style: 'mapbox://styles/mapbox/light-v10',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}-15`,'icon-allow-overlap': true,'text-field': symbol,'text-font': ['Open Sans Bold','Arial Unicode MS Bold'],'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', (e) => {// If the input value matches a layerID set// it's visibility to 'visible' or else hide it.const value = e.target.value.trim().toLowerCase();for (const layerID of layerIDs) {map.setLayoutProperty(layerID,'visibility',layerID.includes(value) ? 'visible' : 'none');}});});</script> </body></html>