https://github.com/adoroszlai/leaflet-distance-markers
Leaflet plugin for displaying equidistant markers along a route
https://github.com/adoroszlai/leaflet-distance-markers
Last synced: 10 days ago
JSON representation
Leaflet plugin for displaying equidistant markers along a route
- Host: GitHub
- URL: https://github.com/adoroszlai/leaflet-distance-markers
- Owner: adoroszlai
- License: mit
- Created: 2014-02-03T06:41:17.000Z (about 11 years ago)
- Default Branch: master
- Last Pushed: 2023-10-15T17:30:13.000Z (over 1 year ago)
- Last Synced: 2025-04-13T16:09:25.256Z (10 days ago)
- Language: JavaScript
- Homepage:
- Size: 30.3 KB
- Stars: 73
- Watchers: 3
- Forks: 15
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
Awesome Lists containing this project
README
# leaflet-distance-markers
Plugin for Leaflet to display markers along a route at equivalent distances.
## Example
[demo](http://adoroszlai.github.io/leaflet-distance-markers/)
```javascript
// use defaults
var line = L.polyline(coords, {
distanceMarkers: true
});
// override defaults
var line = L.polyline(coords, {
distanceMarkers: { showAll: 11, offset: 1600, cssClass: 'some-other-class', iconSize: [16, 16] }
});
// show/hide markers on mouseover
var line = L.polyline(coords, {
distanceMarkers: { lazy: true }
});
line.on('mouseover', line.addDistanceMarkers);
line.on('mouseout', line.removeDistanceMarkers);
map.fitBounds(line.getBounds());
map.addLayer(line);
```
## Options
* **offset**: distance in meters between the markers (default: 1000 (= 1 km))
* **showAll**: the zoom level at which all distance markers will be shown -- zooming out once from this level will remove approximately half of the markers (default: 12)
* **lazy**: postpone adding the markers until Polyline.addDistanceMarkers is explicitly called (default: false)
* **cssClass**: CSS class to set on marker icons
* **iconSize**: size of the marker icon in pixels; type: [L.Point](http://leafletjs.com/reference.html#point) or array (default: `[12, 12]`); set to `null` to allow sizing via CSS class (see example on `icon-size` branch)
* **textFunction**: function to generate the text to be displayed in markers; parameters:
* `distance`: distance of the current marker
* `index`: index of the current marker (this is displayed by default)
* `offset`: distance between markers
## Requirements
* [Leaflet.GeometryUtil](https://github.com/makinacorpus/Leaflet.GeometryUtil)