beginnings of a real leaflet plugin

iboates · Mar 6, 2019 · a794bce · a794bce
1 parent 0fa607a
commit a794bce
Show file tree

Hide file tree

Showing 3 changed files with 35 additions and 67 deletions.
diff --git a/index.html b/index.html
@@ -20,14 +20,16 @@
             integrity="sha512-mNqn2Wg7tSToJhvHcqfzLMU6J4mkOImSPTxVZAdo+lcPlk+GhZmYgACEe0x35K7YzW1zJ7XyJV/TT1MrdXvMcA=="
             crossorigin=""></script>
 
+    <script src="js/leaflet-spotlight-extension.js"></script>
+
     <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
     <script src="data/points_5000.js"></script>
 
     <script src="sidebar/js/jquery-sidebar.min.js"></script>
     <script src="sidebar/js/leaflet-sidebar.min.js"></script>
 
     <script src="js/featureStyles.js"></script>
-    <script src="js/leaflet-spotlight.js"></script>
+    <!--<script src="js/leaflet-spotlight.js"></script>-->
     <script src="js/init.js"></script>
     <!--<script src="js/initSimple.js"></script>-->
     <!--<script src="js/spotlightControl.js"></script>-->

diff --git a/js/init.js b/js/init.js
@@ -6,7 +6,7 @@ var pointLayer;
 $(document).ready(function() {
 
     // Initialize map & layers
-    map = L.map('map').setView([50.1109, 8.6821], 15);
+    map = L.map('map', {spotlight: true}).setView([50.1109, 8.6821], 15);
     L.tileLayer('http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);
 
     pointLayer = L.geoJSON(pointData, {
@@ -15,70 +15,7 @@ $(document).ready(function() {
         }
     }).addTo(map);
 
-    $(map).spotlight();
-
-    sidebar = L.control.sidebar('sidebar').addTo(map);
-
-    var dynamicCenterCircle;
-    var dynamicCenterRectangle;
-    var spotlightUUID = null;
-
-    // Attach a change listener to the shape selector box
-    $("#shape-selector").on("change", function() {
-
-        console.log
-        if (spotlightUUID !== null) {
-            $(map).removeSpotlight(spotlightUUID);
-        }
-
-        var spotlightValue = $("#shape-selector").val();
-
-        if (spotlightValue == "circle") {
-
-            dynamicCenterCircle = function (center) {
-                return turf.circle(
-                    center,
-                    $("#circle-radius-input").val(),
-                    {"steps": 128, "units": "meters"}
-                );
-            }
-
-            dynamicCenterCircle2 = function (center) {
-                return turf.circle(
-                    center,
-                    parseFloat($("#circle-radius-input").val())*2,
-                    {"steps": 128, "units": "meters"}
-                );
-            }
-
-            spotlightUUID = $(map).addSpotlight(pointLayer, dynamicCenterCircle, spotlightStyle, highlightStyle);
-
-        } else if (spotlightValue == "rectangle") {
-
-            dynamicCenterRectangle = function (center) {
-                return turf.transformRotate(
-                    turf.envelope(
-                        turf.featureCollection([
-                            turf.destination(center, $("#rectangle-height-input").val()/2, 0, {"units": "meters"}),
-                            turf.destination(center, $("#rectangle-width-input").val()/2, 90, {"units": "meters"}),
-                            turf.destination(center, $("#rectangle-height-input").val()/2, 180, {"units": "meters"}),
-                            turf.destination(center, $("#rectangle-width-input").val()/2, -90, {"units": "meters"})
-                        ])
-                    ),
-                    parseFloat($("#rectangle-rotation-input").val())
-                );
-            }
-
-            spotlightUUID =  $(map).addSpotlight(pointLayer, dynamicCenterRectangle, spotlightStyle, highlightStyle);
-
-        }
-
-        $(".shape-params").hide();
-        $("#"+spotlightValue+"-params").show();
-
-        console.log(spotlightUUID);
-        console.log(map);
-
-    });
+    // Alternate method of enabling spotlight
+//    map.spotlight.enable();
 
 });
diff --git a/js/leaflet-spotlight-extension.js b/js/leaflet-spotlight-extension.js
@@ -0,0 +1,29 @@
+L.SpotlightHandler = L.Handler.extend({
+
+    addHooks: function() {
+        L.DomEvent.on(document, 'mousemove', this._doSomething, this);
+    },
+
+    removeHooks: function() {
+        L.DomEvent.off(document, 'mousemove', this._doSomething, this);
+    },
+
+    _doSomething: function(ev) {
+
+        console.log(this._map)
+
+    }
+
+});
+
+L.Map.addInitHook('addHandler', 'spotlight', L.SpotlightHandler);
+
+L.Map.include({
+
+    _spotlightRegistry: {},
+
+});
+
+//L.Layer.Spotlight = L.Layer.extend({
+//
+//})