From 22f268b88b91945df80935a142849e90e0a3ddb0 Mon Sep 17 00:00:00 2001 From: Siri Reiter Date: Sun, 20 May 2018 21:17:12 +0200 Subject: Highlight on hover (for a single polygon). --- src/js/tours.js | 43 +++++++++++++++++++++++++++++++++++++++++-- 1 file 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("Ture på Østerbro"); + ]); + +geojson = L.geoJson(polygon.toGeoJSON(), { + style: style, + onEachFeature: onEachFeature +}).addTo(map); +geojson.bindPopup("Ture på Østerbro"); var polygon = L.polygon([ [55.69916, 12.59171], [55.69505, 12.59359], -- cgit v1.2.3