Skip to content
Leaflet plugin for dynamically highlighting features of a layer near the mouse
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
examples prepping for github Apr 7, 2019
gif
src
.gitignore
LICENSE
README.md

README.md

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.

You can’t perform that action at this time.