seems to work normally now as a proper leaflet plugin

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);
+//map.removeSpotlight(mySpotlight);

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,26 +55,27 @@ 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);
 
         }
 
     }
 
 });
 
+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);
     }
 

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];