Maps Web SDK

Class L.DistanceMeasurement

Extends L.Control
Category Widgets

This widget allows the user to do distance measurements over the map.

Basic example

var map = new L.Map('map', {
  key: "your-key",
  center: [52.373154, 4.890659],
  zoom: 13
});
var widget = new L.DistanceMeasurement();
widget.addTo(map);

Using options

var map = new L.Map('map', {
  key: "your-api-key",
  center: [52.373154, 4.890659],
  zoom: 13
});
var widget = new L.DistanceMeasurement({
  unitScheme: 'imperial',
  markerColor: '#99ff99'
});
map.addControl(widget);

Constructor

L.DistanceMeasurement([options])

Parameters
Name Description Required Type/Values Default
options No Object None
options.position Decides the location of the widget No "topleft" | "topright" | "bottomleft" | "bottomright" "topright"
options.markerColor Color of the markers used for each step of the ruler No String "#000"
options.lineColor Color or the ruler's line No String "#000"
options.unitScheme Indicate if the imperial measurement unit should be used for calculate the distances. If the value is null the widget will use the global unit measurement configuration. No "metric" | "imperial" | Null null
options.useArc Display great circle arcs instead of rect lines No Boolean false

Methods

activate( )

Activate the widget displaying the measurement controls and wait for the user to click over the map to start the first measurement.

This method is called automatically when the user press over the widget's main button.

deactivate( )

Deactivate the widget cleaning all the rulers over the map and hiding the measurement controls.

If a measurement was in progress, it will be cancel first.

redrawRulers( )

Destroy and create again all the visible rulers with the current widget options.

Useful when the options are changed and you need to apply them to all the previous measurements.

Events

L.DistanceMeasurement.Events.Activated

Fired when the user press over the button to activate the widget. After the first click over the map the measurement rule and the distance counter will appear.

L.DistanceMeasurement.Events.Cancelled

Fired when the user decide to cancel an active measurement.

L.DistanceMeasurement.Events.Changed

Fired when the ruler path changes (by adding more segments).
Properties
Name Description Type/Values Default
ruler Reference to the ruler instance MeasurementRuler None
newSegment The coordinates of the last new segment added L.LatLng None
distance Total ruler distance in meters after adding the new segment Number None

L.DistanceMeasurement.Events.Deactivated

Fired when the user press over the widget's button when is already activated disabling the widget and hiding the measurement controls.

L.DistanceMeasurement.Events.Disabled

Fired when the widget is disabled using the disable method.

L.DistanceMeasurement.Events.Enabled

Fired when the widget is enabled (after had been disabled) using the enable method.

L.DistanceMeasurement.Events.Finished

Fired when the user finish an active measurement.
Properties
Name Description Type/Values Default
ruler Reference to the ruler instance MeasurementRuler None
distance Total ruler distance in meters Number None

L.DistanceMeasurement.Events.Reset

Fired when all the measurements are cleared from the screen.

L.DistanceMeasurement.Events.Started

Fired when a new measurement starts. The measurement starts when the user make the first click on the map.