Measure¶

Measures distances and areas on the map, by clicking points or drawing freehand. It shows a live total while you draw, labels on the map, and a list of your measurements. Built on @mapbox/mapbox-gl-draw and Turf.js.

• id: measure
• Surfaces: top-bar (the panel is too big for a map corner)

Place it¶

"topBarWidgets": [{ "widgetName": "measure" }]

Behavior¶

• Pick a tool, then click on the map to measure. The total updates as you go. The freehand tools follow a mouse drag or a finger on a touch screen.
• Each measurement gets a total label on the map, and optionally a length label on each segment.
• The list shows every measurement, and you can clear them one at a time. Clear All asks first.
• Measured lines and outlines draw with a soft drop shadow, so they stand out from the basemap and your data, including after closing with Keep on Close.
• Three options sit in one row of toggles above the units: Edge Labels, Total and Keep on Close. Hover one for what it does.
• Escape cancels the current measurement and puts the tool down.
• While a tool is out or a measurement is being edited, clicking a layer doesn't open its popup.
• Settings only set each control's starting value. Users can change them, and their changes stick when the widget closes and reopens, until the page reloads.

Configuration: settings.measure¶

"measure": {
  "persistOnClose": false,
  "showTotal": true,
  "showEdgeLabels": false,
  "defaultLinearUnit": "kilometers",
  "defaultAreaUnit": "square-kilometers",
  "precision": 2,
  "linearUnits": ["kilometers", "miles", "meters"],
  "areaUnits": ["square-kilometers", "square-miles", "acres"]
}