Highlight on hover (for a single polygon).

1 files changed, 41 insertions, 2 deletions

diff --git a/src/js/tours.js b/src/js/tours.js
index 1819b5f..0224d29 100644
--- a/src/js/tours.js
+++ b/src/js/tours.js
@@ -19,6 +19,40 @@ requirejs(['./slippymap'], function(_foo) {
 			map.layers.addOverlay(boundary(data), 'Regionsgrænse');
 		});
 */
+
+function style(feature) {
+    return {
+    weight: '2',
+    color: '#336699',
+    fillOpacity: '0.4'
+    };
+}
+
+var geojson;
+function highlightFeature(e) {
+    var layer = e.target;
+
+    layer.setStyle({
+        weight: 5,
+        color: '#666',
+        dashArray: '',
+        fillOpacity: 0.7
+    });
+
+    if (!L.Browser.ie && !L.Browser.opera && !L.Browser.edge) {
+        layer.bringToFront();
+    }
+}
+function resetHighlight(e) {
+    geojson.resetStyle(e.target);
+}
+function onEachFeature(feature, layer) {
+    layer.on({
+        mouseover: highlightFeature,
+        mouseout: resetHighlight
+    });
+}
+
 var polygon = L.polygon([
     [55.73275, 12.56572],
     [55.73247, 12.56692],
@@ -52,8 +86,13 @@ var polygon = L.polygon([
     [55.73127, 12.56357],
     [55.73131, 12.56424],
     [55.73124, 12.566]
-]).addTo(map);
-polygon.bindPopup("<a href=../../osterbro/>Ture på Østerbro</a>");
+    ]);
+
+geojson = L.geoJson(polygon.toGeoJSON(), {
+    style: style,
+    onEachFeature: onEachFeature
+}).addTo(map);
+geojson.bindPopup("<a href=../../osterbro/>Ture på Østerbro</a>");
 var polygon = L.polygon([
     [55.69916, 12.59171],
     [55.69505, 12.59359],