Scale control display
This tutorial shows how to display a scale control on the map.
-
Add options to the map to load the scale control to the map. The
scaleControl
shows a distance scale. -
Include the following code in your JavaScript file (Example: app.js).
-
Replace
YOUR_MAPTILER_API_KEY_HERE
with your actual MapTiler API key. -
Change the control position to display the control on the
bottom-left
corner of the map. By default the control is howing on thebottom-right
corner of the map iftrue
. You can specify a corner position ("top-left"
,"top-right"
,"bottom-left"
,"bottom-right"
) to change the control position.const map = new maptilersdk.Map({ container: 'map', // container id style: maptilersdk.MapStyle.STREETS, center: [16.611342, 49.197304], // starting position [lng, lat] zoom: 12, // starting zoom scaleControl: "bottom-left" // add the scaleControl to the bottom-left corner of the map });
View complete source code on GitHub
Learn more
Check out the How to change the map labels language based on visitor’s location to learn how to get the country based on visitor’s location. This would allow you to change the control units depending on the country.
The scaleControl
units (“metric”, “imperial” or “nautical”) can be set in the config object config.unit (default: “metric”)
For example:
Visit the MapTiler SDK JS API reference to know all the scaleControl
options. Like change the display distance units