Maps SDK for Web

Class L.DistanceMeasurement

extends L.Control

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

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
Example
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);

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

All the class events are keys of the Events static member.

To learn more about how to listen events please refer to this documentation.

Activated : String

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.
Example

var widget = (new L.DistanceMeasurement()).addTo(map);
widget.on(L.DistanceMeasurement.Events.Activated, function (eventObject) {
     console.log(eventObject);
});

Cancelled : String

Fired when the user decide to cancel an active measurement.

Deactivated : String

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

Disabled : String

Fired when the widget is disabled using the disable method.

Enabled : String

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

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 L.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.Finished

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

Reset : String

Fired when all the measurements are cleared from the screen.

Started : String

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