leaflet-spotlight demo

init.js

// 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 myHighlightStyle = {
        radius: 3,
        opacity: 0,
        fillColor: "#ff0000",
        fillOpacity: 1
};

// Define a spotlight object and add it to the map using the ".addTo()" method
var mySpotlight = L.spotlight({
    spotlightType: "circleMarker",
    highlightStyle: myHighlightStyle, // Style with which highlighted points shall be drawn
    spotlightShape: dynamicCenterCircle, // Function which takes leaflet point and returns a turf polygon
    spotlightStyle: mySpotlightStyle, // Style with which the spotlight itself shall be drawn
    targetLayer: pointLayer // Layer onto which to apply the spotlight
}).addTo(map);

// Alternate method of adding a spotlight to a map
// map.addSpotlight(mySpotlight);

leaflet-spotlight.min.js

L.Map.include({_spotlightRegistry:{},addSpotlight:function(t){this._spotlightRegistry[t.id]=t.options},removeSpotlight:function(t){this.removeLayer(this._spotlightRegistry[t.id].spotlightLayer),this.removeLayer(this._spotlightRegistry[t.id].spotlightHighlightLayer),delete this._spotlightRegistry[t.id]},hasSpotlight:function(t){return console.log(t),this._spotlightRegistry[t.id]==t.options}}),L.SpotlightHandler=L.Handler.extend({addHooks:function(){this._map.addEventListener("mousemove",this._refreshSpotlights)},_refreshSpotlights:function(t){for(var i in this._spotlightRegistry){var e=this._spotlightRegistry[i];this.hasLayer(e.spotlightHighlightLayer)&&this.removeLayer(e.spotlightHighlightLayer),this.hasLayer(e.spotlightLayer)&&this.removeLayer(e.spotlightLayer);var o=turf.pointsWithinPolygon(this._spotlightRegistry[i].targetLayer.toGeoJSON(),e.spotlightShape([t.latlng.lng,t.latlng.lat]));"circleMarker"==e.spotlightType?"function"!=typeof e.highlightStyle?e.spotlightHighlightLayer=L.geoJSON(o,{pointToLayer:function(t,i){return L.circleMarker(i,e.highlightStyle)}}).addTo(this):e.spotlightHighlightLayer=L.geoJSON(o,{pointToLayer:function(t,i){return L.circleMarker(i,e.highlightStyle(t))}}).addTo(this):"marker"==e.spotlightType&&("function"!=typeof e.markerOptions?e.spotlightHighlightLayer=L.geoJSON(o,{pointToLayer:function(t,i){return L.marker(i,e.markerOptions)}}).addTo(this):e.spotlightHighlightLayer=L.geoJSON(o,{pointToLayer:function(t,i){return L.marker(i,e.markerOptions(t))}}).addTo(this)),e.spotlightLayer=L.geoJSON(e.spotlightShape([t.latlng.lng,t.latlng.lat]),{style:e.spotlightStyle}).addTo(this)}}}),L.Map.addInitHook("addHandler","spotlight",L.SpotlightHandler),L.Spotlight=L.Class.extend({options:{spotlightType:1,highlightStyle:1,spotlightShape:1,spotlightStyle:1,markerOptions:1,targetLayer:1},initialize:function(t){this.id=([1e7]+-1e3+-4e3+-8e3+-1e11).replace(/[018]/g,t=>(t^crypto.getRandomValues(new Uint8Array(1))[0]&15>>t/4).toString(16)),L.setOptions(this,t)},addTo:function(t){t.addSpotlight(this)}}),L.spotlight=function(t,i){return new L.Spotlight(t,i)};

spotlight_demo.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet@1.1.0/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>
    <div id="map"></div>
    <script src="init.js"></script>
</body>
</html>

style.css

#map {
    height: 95vh;
}