Skip to main content

Filter Symbols by Text

Filter symbols and their associated name by text input.

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="utf-8" />
        <link rel="stylesheet" href="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.0.css" />
        <script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.19.0.js"></script>
        <style>
            body { margin: 0; padding: 0; }
            #map {
                position: absolute;
                top: 0;
                bottom: 0;
                width: 100%;
            }

            .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>
      </head>
      <body>
          <div id="map"></div>
          <div class="filter-ctrl">
          <input
          id="filter-input"
          type="text"
          name="filter"
          placeholder="Filter by name"
          autocomplete="off"
          />
          </div>

      <script>
        TrimbleMaps.APIKey = 'YOUR_API_KEY_HERE';
        const map = window.map = new TrimbleMaps.Map({
            container: 'map', // container id
            style: TrimbleMaps.Common.Style.TRANSPORTATION, //hosted style id
            center: [-77.38, 40], // starting position
            zoom: 7 // starting zoom
        });
            //Create geoJSON
            const geoJsonData = {
              type: 'geojson',
              data: {
                type: 'FeatureCollection',
                features:[
                  {
                    type: 'feature',
                    properties: {
                      icon: 'fuel',
                      name: 'Gas'
                    },
                    geometry: {
                      type: 'Point',
                      coordinates: [-77.759139, 39.674498]
                    }
                  },

                  {
                    type: 'feature',
                    properties: {
                      icon: 'atm',
                      name: 'Bank'
                    },
                    geometry: {
                      type: 'Point',
                      coordinates: [-77.594233, 39.531315]
                      }
                  },

                  {
                    type: 'feature',
                    properties: {
                      icon: 'grocery',
                      name: 'Grocery'
                    },
                    geometry: {
                      type: 'Point',
                      coordinates: [-77.407465, 39.387116]
                      }
                  },

                  {
                    type: 'feature',
                    properties: {
                      icon: 'atm',
                      name: 'Bank'
                    },
                    geometry: {
                      type: 'Point',
                      coordinates: [-76.852656, 40.252013]
                      }
                  },

                  {
                    type: 'feature',
                    properties: {
                      icon: 'fuel',
                      name: 'Gas'
                    },
                    geometry: {
                      type: 'Point',
                      coordinates: [-76.297846, 40.016829]
                      }
                  },

                  {
                    type: 'feature',
                    properties: {
                      icon: 'restaurant',
                      name: 'Restaurant'
                    },
                    geometry: {
                      type: 'Point',
                      coordinates: [-76.610957, 39.501651]
                      }
                  },

                  {
                    type: 'feature',
                    properties: {
                      icon: 'restaurant',
                      name: 'Restaurant'
                    },
                    geometry: {
                      type: 'Point',
                      coordinates: [-77.901850, 40.398589]
                      }
                  },

                  {
                    type: 'feature',
                    properties: {
                      icon: 'grocery',
                      name: 'Grocery'
                    },
                    geometry: {
                      type: 'Point',
                      coordinates: [-77.195979, 39.835690]
                      }
                  },

                  {
                    type: 'feature',
                    properties: {
                      icon: 'retail',
                      name: 'Shopping'
                    },
                    geometry: {
                      type: 'Point',
                      coordinates: [-77.454157, 40.042067]
                      }
                  }
                ]
              }
            };
            var layerIDs = [];
            // Looking at textbox and storing input into a variable.
            var filterInput = document.getElementById('filter-input');
            //Add a GeoJSON source containing place coordinates and information.
            map.on('load', function() {
                map.addSource('places', geoJsonData);
                geoJsonData.data.features.forEach(function(feature) {
                    var symbol = feature.properties['icon'];
                    var name = feature.properties['name'];
                    var layerID = "poi_" + name.toLowerCase();

                  if (!map.getLayer(layerID)) {

                  //Add layer to render icon
                  map.addLayer({
                    id: layerID,
                    type: 'symbol',
                    source: 'places',
                    layout:{
                        'icon-image': "poi_" + symbol,
                        "icon-size": 1,
                        "text-field": "{name}",
                        "icon-allow-overlap" : true,
                        "text-allow-overlap": true,
                        "text-font": ["Roboto Regular"],
                        "text-anchor": "top",
                        "text-offset": [0,1],
                        "text-padding": 20,
                        "text-size": 10
                        },
                    "filter": ["==", ["get", "name"], name ]
                    });

                    //Push the icon to an empty array.
                    layerIDs.push(layerID);
                }

                    // Monitor the textbox. If the input value matches a layerID,
                    // the visibility will be set to 'visible.'
                    filterInput.addEventListener('keyup', function(e){
                      var value = e.target.value.trim().toLowerCase();
                      layerIDs.forEach(function(layerID){
                        map.setLayoutProperty(
                          layerID,
                          'visibility',
                          layerID.indexOf(value) > -1 ? 'visible' : 'none'
                          );
                      })
                    })
                  });
                });
        </script>
    </body>
</html>
Last updated June 15, 2023.