Scale control display

This tutorial shows how to display a scale control on the map.

The measurement units for the scale control can be defined in the configuration object with options such as “metric,” “imperial,” or “nautical.” The default unit is set to “metric.”

  1. Add options to the map to load the scale control to the map. The scaleControl shows a distance scale.

  1. Include the following code in your JavaScript file (Example: app.js).

  1. Replace YOUR_MAPTILER_API_KEY_HERE with your actual MapTiler API key.

  2. Change the control position to display the control on the bottom-left corner of the map. By default, the control is showing on the bottom-right corner of the map if true. 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: [-71.0131, 42.3585], // starting position [lng, lat]
     zoom: 9.25, // starting zoom
     scaleControl: "bottom-left" // add the scaleControl to the bottom-left corner of the map
   });

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 changing the display distance units

Distance measurement on map

Measure distances

Example

To calculate distances on the map, simply click on different points to create lines that will measure the distances using turf.length.
Change the default position for attribution

Change attribution default position

Example

Place attribution in the top-left position when initializing a map.
How to display a minimap or overview map control to aid the map navigation

Minimap control

Example

This tutorial shows how to display a minimap or overview map control in MapTiler SDK JS to aid the map navigation.
An extension of MapLibre GL JS

Module Usage

Module Reference