Leaflet plugin for displaying equidistant markers along a route
JavaScript CSS

README.md

leaflet-distance-markers

Plugin for Leaflet to display markers along a route at equivalent distances.

Example

demo

// use defaults
var line = L.polyline(coords);

// override defaults
var line = L.polyline(coords, {
    distanceMarkers: { showAll: 11, offset: 1600, cssClass: 'some-other-class' }
});

// 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

Requirements