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.11.0.css" />
<script src="https://maps-sdk.trimblemaps.com/v3/trimblemaps-3.11.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>