Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

Add a scale bar to a map

Tags:

mapbox-gl-js

Is it possible to add a scale bar to a map?

I was hoping for something 'built in' like:

map.addControl(new mapboxgl.Scale({position: 'bottom-right'}));

Seems it was possible via a leaflet control in the classic js

L.control.scale().addTo(map);
like image 289
woowoowoo Avatar asked Sep 06 '16 23:09

woowoowoo


People also ask

How do you use a scale bar on a map?

The scale bar should shorter than the map itself. The largest distance (represented by the overall length of the scale bar) should be a round number, for example 1,000, and the subdivisions distances should be 50%, 25%, or 20% of that length.

What is a scale bar on a map?

Scale bars, or bar scales, are small graphics that indicate the proportions of a map to the original geographic area and help users measure distances on maps. While scale can be indicated as a ratio or in words (i.e. 1:10, or “One inch to ten miles”), scale bars allow users to measure distances in maps directly.


1 Answers

map.addControl(new mapboxgl.ScaleControl({position: 'bottom-right'}));

The documentation can be found here

  • disclaimer - I work at Mapbox
like image 111
mollymerp Avatar answered Sep 25 '22 19:09

mollymerp