diff --git a/js/init.js b/js/init.js index a21898d..57ba278 100644 --- a/js/init.js +++ b/js/init.js @@ -13,14 +13,46 @@ var pointLayer = L.geoJSON(pointData, { pointLayer.addTo(map) +dynamicCenterCircle = function (center) { + return turf.circle( + center, + 25, + {"steps": 128, "units": "meters"} + ); +} + +var mySpotlightStyle = { + color: "#ff0000", + fillOpacity: 0 +}; + +function myHighlightStyle(feature) { + + if (feature.properties.id % 2. == 0) { + return { + radius: 3, + opacity: 0, + fillColor: "#ff0000", + fillOpacity: 1 + } + } else { + return { + radius:3, + opacity: 0, + fillColor: "#0000ff", + fillOpacity: 1 + } + } +}; + // Alternate method of enabling spotlight //map.spotlight.enable(); var mySpotlight = L.spotlight("aaa", { - highlightStyle: 1, - spotlightShape: 2, - spotlightStyle: 3, - targetLayer: 4 + highlightStyle: myHighlightStyle, + spotlightShape: dynamicCenterCircle, + spotlightStyle: mySpotlightStyle, + targetLayer: pointLayer }); //var mySpotlight2 = new L.Spotlight("aaa", { @@ -34,4 +66,4 @@ var mySpotlight = L.spotlight("aaa", { mySpotlight.addTo(map); -map.removeSpotlight(mySpotlight); \ No newline at end of file +//map.removeSpotlight(mySpotlight); \ No newline at end of file diff --git a/js/leaflet-spotlight-extension.js b/js/leaflet-spotlight-extension.js index 5044b6f..4518ff2 100644 --- a/js/leaflet-spotlight-extension.js +++ b/js/leaflet-spotlight-extension.js @@ -3,49 +3,49 @@ L.Map.include({ _spotlightRegistry: {}, addSpotlight: function(spotlight) { - console.log("adding spotlight"); +// console.log("adding spotlight"); this._spotlightRegistry[spotlight.id] = spotlight.options; - console.log(this._spotlightRegistry); +// console.log(this._spotlightRegistry); }, removeSpotlight: function(spotlight) { - console.log("removing spotlight"); +// console.log("removing spotlight"); delete this._spotlightRegistry[spotlight.id]; - console.log(this._spotlightRegistry); +// console.log(this._spotlightRegistry); } }); -L.Map.addInitHook('addHandler', 'spotlight', L.SpotlightHandler); - L.SpotlightHandler = L.Handler.extend({ addHooks: function() { - L.DomEvent.on(document, 'mousemove', this._refreshSpotlights, this); +// L.DomEvent.on(document, 'mousemove', this._refreshSpotlights, this); +// this._map.addEventListener('mousemove', function(ev) {console.log(ev)}) + this._map.addEventListener('mousemove', this._refreshSpotlights); }, - removeHooks: function() { - L.DomEvent.off(document, 'mousemove', this._refreshSpotlights, this); - }, +// removeHooks: function() { +// L.DomEvent.off(document, 'mousemove', this._refreshSpotlights, this); +// }, _refreshSpotlights: function(ev) { // Create a mousemove event listener for this spotlight - for (var spotlightId in this._map._spotlightRegistry) { + for (var spotlightId in this._spotlightRegistry) { - var currentSpotlight = this._map._spotlightRegistry[spotlightId]; + var currentSpotlight = this._spotlightRegistry[spotlightId]; // On each mouse movement, remove the spotlight & highlighted features layer for this._map spotlightId - if (this._map.hasLayer(currentSpotlight.spotlightHighlightLayer)) { - this._map.removeLayer(currentSpotlight.spotlightHighlightLayer); + if (this.hasLayer(currentSpotlight.spotlightHighlightLayer)) { + this.removeLayer(currentSpotlight.spotlightHighlightLayer); } - if (this._map.hasLayer(currentSpotlight.spotlightLayer)) { - this._map.removeLayer(currentSpotlight.spotlightLayer); + if (this.hasLayer(currentSpotlight.spotlightLayer)) { + this.removeLayer(currentSpotlight.spotlightLayer); } // Find which points are highlighted by seeing if they are within the spotlight var highlightedPoints = turf.pointsWithinPolygon( - this._map._spotlightRegistry[spotlightId].targetLayer.toGeoJSON(), + this._spotlightRegistry[spotlightId].targetLayer.toGeoJSON(), currentSpotlight.spotlightShape([ev.latlng.lng, ev.latlng.lat]) ); @@ -55,19 +55,19 @@ L.SpotlightHandler = L.Handler.extend({ pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, currentSpotlight.highlightStyle) } - }).addTo(this._map); + }).addTo(this); } else { currentSpotlight.spotlightHighlightLayer = L.geoJSON(highlightedPoints, { pointToLayer: function (feature, latlng) { return L.circleMarker(latlng, currentSpotlight.highlightStyle(feature)) } - }).addTo(this._map); + }).addTo(this); } // Add the spotlight to the map as a layer currentSpotlight.spotlightLayer = L.geoJSON(currentSpotlight.spotlightShape([ev.latlng.lng, ev.latlng.lat]), { style: currentSpotlight.spotlightStyle - }).addTo(this._map); + }).addTo(this); } @@ -75,6 +75,7 @@ L.SpotlightHandler = L.Handler.extend({ }); +L.Map.addInitHook('addHandler', 'spotlight', L.SpotlightHandler); L.Spotlight = L.Class.extend({ @@ -91,7 +92,7 @@ L.Spotlight = L.Class.extend({ }, addTo: function(map) { - console.log(this); +// console.log(this); map.addSpotlight(this); } diff --git a/js/leaflet-spotlight-nojquery.js b/js/leaflet-spotlight-nojquery.js index fcaf120..0339c8a 100644 --- a/js/leaflet-spotlight-nojquery.js +++ b/js/leaflet-spotlight-nojquery.js @@ -8,6 +8,8 @@ function leafletSpotlight(map) { map.addEventListener('mousemove', function(ev) { for (var spotlightId in this._leafletSpotlight) { + + console.log(ev) var currentSpotlight = this._leafletSpotlight[spotlightId];