✨ Add Filter for institution name

Author: ELC

index.html

@@ -40,6 +40,9 @@
             </span>
         </div>
         <button id="reset">Reset Zoom</button>
+        <div class="filter-ctrl">
+            <input id="filter-input" type="text" name="filter" placeholder="Filter Institution by Name" />
+        </div>
         <script src="./mapbox.js"></script>
         <!-- Google Analytics -->
         <script>

mapbox.js

@@ -5,6 +5,7 @@ var initial = [ -60.643775, -32.954626]
 var zoom = 1.5
 var url = 'https://raw.githubusercontent.com/ELC/jupyter-map/master/jupyter-map.geojson';
 var places; // Get value async below
+var filterInput = document.getElementById('filter-input');
 
 var map = new mapboxgl.Map({
     container: 'map',
@@ -43,8 +44,56 @@ async function addData() {
         }
     });
 
+    // Filter by Input
+
+    let layerIDs = [];
+
+    places.features.forEach(function(feature) {
+        var symbol = feature.properties['institution_name'];
+        var layerID = symbol.trim().toLowerCase();
+
+        // 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": "data",
+                "layout": {
+                    "icon-image": "marker-15",
+                    "icon-allow-overlap": true,
+                    "icon-size": 1.5,
+                    "text-field": "",
+                    'text-allow-overlap': true,
+                    'text-size': 14,
+                    "text-letter-spacing": 0.05,
+                    "text-offset": [0, 2],
+                },
+                "paint": {
+                    "text-color": "#202",
+                    "text-halo-color": "#fff",
+                    "text-halo-width": 2
+                },
+                "filter": ["==", "institution_name", 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.
+        map.setLayoutProperty('places', "visibility",
+            !e.target.value ? "visible" : "none");
+
+        var value = e.target.value.trim().toLowerCase();
+        layerIDs.forEach(function(layerID) {
+            map.setLayoutProperty(layerID, 'visibility',
+                layerID.includes(value) ? 'visible' : 'none');
+            map.setLayoutProperty(layerID, 'text-field',
+                (e.target.value && layerID.includes(value)) ? '{institution_name}' : '');
+        });
+    });
 }
 
 // First time
@@ -153,6 +202,9 @@ map.on('mouseleave', 'places', function(e) {
 });
 
 map.on('click', function(e) {
+    filterInput.value = ""
+    let event = new Event('keyup');
+    filterInput.dispatchEvent(event)
     map.getCanvas().style.cursor = '';
 });
 

style.css

@@ -49,4 +49,25 @@ a {
 .mapboxgl-popup {
     max-width: 300px;
     font: 12px/20px 'Helvetica Neue', Arial, Helvetica, sans-serif;
+}
+
+.filter-ctrl {
+    position: absolute;
+    top: 120px;
+    right: 12px;
+    z-index: 1;
+    width: 180px;
+}
+
+.filter-ctrl input[type=text] {
+    font: 12px/20px "Helvetica Neue", Arial, Helvetica, sans-serif;
+    width: 100%;
+    border: 0;
+    background-color: #fff;
+    height: 40px;
+    margin: 0;
+    color: rgba(0,0,0,.5);
+    padding: 10px;
+    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
+    border-radius: 3px;
 }