Provides direction markers that can indicate the position of a marker, even when it is out of range or covered by a control.

Can be used, for example, to highlight markers when hovered in a sidebar or similar.

A plugin for Leaflet, a JS library for interactive maps, version 1.0.0 or above (tested with 1.0.0 and 1.9.4).

Usage

Include leaflet.directionmarker.js on your page after Leaflet files.
If you want to place the direction markers on the direction pane (default), you also need one line of CSS:
```
.leaflet-direction-pane { z-index: 620; pointer-events: none; }
```
Initialize the plugin, pointing to the prefix where you have the 10 marker/arrow images stored:
```
L.Marker.Direction.initialize('./src/');
```
In case you use other controls than the default zoom and attribution controls, or you do not want direction markers to avoid all controls you use, register the ones to avoid for the plugin:
```
L.Marker.Direction.avoidControls(map, [map.zoomControl, layerControl]);
```

Create direction markers when needed and add them to the map:

L.marker.direction([52.5167,13.3833], {alt: "Berlin"}).addTo(map);

Examples

city-example.html (view in browser) shows how to use direction markers when hovering city names on a side bar. It also shows interaction with the Leaflet.markercluster plugin.
small-example.html (view in browser) shows a simple map with three markers and options to decide which of them (if any) should be pointed to by the direction marker. It also includes controls in all four corners to test the avoidance strategies when the marker is covered by controls.
mini-example.html (view in browser) uses the least code possible to show a single marker and a direction marker pointing to it.

L.Marker.Direction is a subclass of L.Marker with no extra public API. These default options are changed:
- pane: 'directionPane'
- keyboard: false
- raiseOnHover: false
L.Marker.Direction.initialize(pathPrefix, markerSize = [25, 41], arrowSize = [64, 64]) initializes the plugin and provides a prefix for the images. If you use custom images that are different sizes, you can pass the marker and arrow sizes. No shadows are used, and the anchors are in the corners or the middle of an edge.
L_Marker_Direction.avoidControls(map, controls) registers an array of controls to avoid on the given map. If no controls are explicitly registered for a map, the zoom control is avoided automatically. To avoid that, register an empty array.
L.marker.direction is the factory function to create direction markers, as per Leaflet convention.

No need to add script tags. Add leaflet2.directionmarker.js as leaflet-directionmarker to your importmap instead.
import {DirectionMarker} from 'leaflet-directionmarker';
Instead of L.marker.direction, refer to the imported DirectionMarker, use it with new to create markers, call initialize and avoidControls without new.
Examples use -leaflet2 in their file names:

Leaflet.DirectionMarker is free software, and may be redistributed under the MIT license.