Skip to content

Latest commit

 

History

History
65 lines (41 loc) · 2.93 KB

README.md

File metadata and controls

65 lines (41 loc) · 2.93 KB
Raw

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/[email protected]/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.