leaflet-spotlight v1.0.0

leaflet-spotlight

A Leaflet plugin for creating a "highlight" effect on features near the user's cursor.

Dependencies

• Leaflet >= 1.1.0
• turf.js >= 5.1.6

Installation

Via jsDelivr:

<script src="https://cdn.jsdelivr.net/npm/leaflet-spotlight@1.0.0/index.js"></script>

Via npm:

npm i leaflet-spotlight

Manually:

Import the library into your HTML document. Make sure that it is imported AFTER Leaflet and turf.js

<script src="src/leaflet-spotlight-extension.min.js"></script>

Examples

Detailed examples for various use cases can be found in the examples folder.

A simple spotlight highlighting all points (Demo) (Source) (Toggleable version demo) (Toggleable version source)

A (toggleable) simple marker-based spotlight highlighting all points (Demo) (Source)

A (toggleable) pair of spotlights, each of which selectively highlights points based on their attributes (Demo) (Source)

A (toggleable) pair of marker-based spotlights, each of which selectively highlights points based on their attributes (Demo) (Source)

How it works (generally)

The plugin enables an L.Map object to manage new L.Spotlight objects, which are linked to an L.Layer object in the map. You as the developer must define a function which receives a receives an L.latlng (which will be the user's mouse cursor), and constructs from it a turf.js Polygon. You also must specify either an L.Style object or a function which returns one, which will indicate how to draw the features which are contained within the spotlight area. You can also specify the style of the spotlight on the map itself.

See the javascript for the simple example for a detailed walkthrough.