Add marker-change-on-hover functionality to debug.html.

mapbox · Apr 6, 2018 · d09e7dd · d09e7dd
1 parent 866ab7b
commit d09e7dd
Showing 1 changed file with 33 additions and 0 deletions.
diff --git a/debug/debug.html b/debug/debug.html
@@ -82,6 +82,39 @@
             "text-font": ["Open Sans Semibold", "Arial Unicode MS Bold"]
         }
     });
+
+    map.addLayer({
+        id: "marker",
+        type: "symbol",
+        source: "points",
+        layout: {
+            "icon-image": "bus-11",
+            "icon-size": 2,
+            "icon-ignore-placement": true,
+            "icon-allow-overlap": true
+        }
+    });
+
+    map.addLayer({
+        id: "marker-hover",
+        type: "symbol",
+        filter: ["==", "name", ""],
+        source: "points",
+        layout: {
+            "icon-image": "bus-15",
+            "icon-size": 2,
+            "icon-ignore-placement": true,
+            "icon-allow-overlap": true
+        }
+    });
+
+    map.on('mouseenter', 'marker', function(e) {
+        map.setFilter('marker-hover', ['==', 'name', e.features[0].properties.name])
+    });
+    map.on('mouseleave', 'marker', function(e) {
+        map.setFilter('marker-hover', ['==', 'name', ''])
+    });
+
 });
 
 map.on('click', function(e) {