Skip to content
master
Switch branches/tags
Code

Latest commit

 

Git stats

Files

Permalink
Failed to load latest commit information.
Type
Name
Latest commit message
Commit time
 
 
gif
 
 
src
 
 
 
 
 
 
 
 

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.

About

Leaflet plugin for dynamically highlighting features of a layer near the mouse

Resources

License

Packages

No packages published