prepping for github

iboates · Apr 7, 2019 · 224953b · 224953b
1 parent b9bc213
commit 224953b
Show file tree

Hide file tree

Showing 4 changed files with 129 additions and 0 deletions.
diff --git a/examples/01_toggleable_popup/init.js b/examples/01_toggleable_popup/init.js
@@ -0,0 +1,70 @@
+// Initialize map with spotlight enabled
+var map = L.map(
+    'map', {
+        spotlight: true, // This one enables spotlight on the map
+        scrollWheelZoom:false,
+        zoomControl: false,
+        boxZoom: false,
+        doubleClickZoom: false,
+        dragging: false
+     }).setView([50.11703222529853, 8.679703474044802], 18);
+
+// Alternate method of enabling spotlight
+//map.spotlight.enable();
+
+// Define default style for points (small black dot)
+var pointStyle = {
+    radius: 2,
+    opacity: 0,
+    fillColor: "#000000",
+    fillOpacity: 1
+}
+
+// Add layer to map
+var pointLayer = L.geoJSON(pointData, {
+    pointToLayer: function (feature, latlng) {
+        return L.circleMarker(latlng, pointStyle);
+    }
+}).addTo(map);
+
+// Define a function which takes a leaflet latlng as input and returns a turf polygon geometry (in this case, a circle)
+var dynamicCenterCircle = function (center) {
+    return turf.circle(
+        center,
+        25,
+        {"steps": 128, "units": "meters"}
+    );
+}
+
+// Define a style for the spotlight polygon itself (in this case, a black ring)
+var mySpotlightStyle = {
+    color: "#000000",
+    fillOpacity: 0
+};
+
+// Define a style for a leaflet point
+var myPopupContent = function(feature) {
+//    console.log(feature)
+    return '<p>' + feature.properties.id + '</p>';
+};
+
+// Define a spotlight object and add it to the map using the ".addTo()" method
+var mySpotlight = L.spotlight({
+    spotlightType: "popup",
+    spotlightShape: dynamicCenterCircle, // Function which takes leaflet point and returns a turf polygon
+    popupContent: myPopupContent, // Style with which the spotlight itself shall be drawn
+    spotlightStyle: mySpotlightStyle, // Style with which the spotlight itself shall be drawn
+    targetLayer: pointLayer // Layer onto which to apply the spotlight
+});
+
+// Make buttons control spotlight
+var toggleButton = document.getElementById("toggle-spotlight-button");
+toggleButton.addEventListener("click", function(e) {
+    if (!map.hasSpotlight(mySpotlight)) {
+        mySpotlight.addTo(map);
+        // Alternate method of adding a spotlight to a map
+        // map.addSpotlight(mySpotlight);
+    } else {
+        map.removeSpotlight(mySpotlight)
+    }
+});
diff --git a/examples/01_toggleable_popup/style.css b/examples/01_toggleable_popup/style.css
@@ -0,0 +1,7 @@
+#map {
+    height: 95vh;
+}
+
+#toggle-spotlight-button {
+    width: 100%;
+}
diff --git a/examples/01_toggleable_popup/toggleable_spotlight.html b/examples/01_toggleable_popup/toggleable_spotlight.html
@@ -0,0 +1,27 @@
+<!DOCTYPE html>
+<html lang="en">
+<head>
+    <meta charset="UTF-8">
+    <title>Title</title>
+
+    <link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css"
+          integrity="sha512-wcw6ts8Anuw10Mzh9Ytw4pylW8+NAD4ch3lqm9lzAsTxg0GFeJgoAtxuCLREZSC5lUXdVyo/7yfsqFjQ4S+aKw=="
+          crossorigin=""/>
+    <link rel="stylesheet" href="style.css">
+
+    <script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet/1.4.0/leaflet.js"></script>
+
+    <script src="../../src/leaflet-spotlight-extension.js"></script>
+
+    <script src='https://npmcdn.com/@turf/turf/turf.min.js'></script>
+    <script src="../data/points_5000.js"></script>
+
+</head>
+<body>
+    <button id="toggle-spotlight-button">Toggle Spotlight</button>
+    <div id="map"></div>
+    <br>
+    <br>
+    <script src="init.js"></script>
+</body>
+</html>
diff --git a/src/leaflet-spotlight-extension.js b/src/leaflet-spotlight-extension.js
@@ -34,6 +34,7 @@ L.SpotlightHandler = L.Handler.extend({
         // Create a mousemove event listener for this spotlight
         for (var spotlightId in this._spotlightRegistry) {
 
+            var _map = this;
             var currentSpotlight = this._spotlightRegistry[spotlightId];
 
             // On each mouse movement, remove the spotlight & highlighted features layer for this._map spotlightId
@@ -84,6 +85,30 @@ L.SpotlightHandler = L.Handler.extend({
                     }).addTo(this);
                 }
 
+            } else if (currentSpotlight.spotlightType == 'popup') {
+
+                currentSpotlight.spotlightHighlightLayer = L.geoJSON(highlightedPoints, {
+
+                    pointToLayer: function (feature, latlng) {
+
+                        var marker = L.marker(latlng, {
+                            icon: L.icon({
+                                iconUrl: L.Icon.Default
+                            })
+                        });
+
+                        marker.bindPopup(currentSpotlight.popupContent(feature));
+
+                        return marker
+
+                    }
+
+                })
+
+                currentSpotlight.spotlightHighlightLayer.on("add", function (event) {
+                    event.target.openPopup();
+                }).addTo(this);
+
             }
 
             // Add the spotlight to the map as a layer