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.”
NPM module setup
Include the following code in your JavaScript file (Example: app.js).
import * as maptilersdk from '@maptiler/sdk';
maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new maptilersdk.Map({
container: 'map', // container's id or the HTML element to render the map
style: maptilersdk.MapStyle.STREETS,
center: [-71.0131, 42.3585], // starting position [lng, lat]
zoom: 9.25, // starting zoom
scaleControl: true // add the scaleControl to the map
});
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
});
Basic JavaScript setup
Add options to the map to load the scale control to the map. The scaleControl shows a distance scale.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Display a map</title>
<script src="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.umd.min.js"></script>
<link href="https://cdn.maptiler.com/maptiler-sdk-js/v4.1.0/maptiler-sdk.css" rel="stylesheet" />
<style>
body { margin: 0; padding: 0; }
#map { position: absolute; top: 0; bottom: 0; width: 100%; }
</style>
</head>
<body>
<div id="map"></div>
<script>
maptilersdk.config.apiKey = 'YOUR_MAPTILER_API_KEY_HERE';
const map = new maptilersdk.Map({
container: 'map', // container's id or the HTML element to render the map
style: maptilersdk.MapStyle.STREETS,
center: [-71.0131, 42.3585], // starting position [lng, lat]
zoom: 9.25, // starting zoom
scaleControl: true // add the scaleControl to the map
});
</script>
</body>
</html>
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
});
The scaleControl units (“metric”, “imperial” or “nautical”) can be set in the config object config.unit (default: “metric”)
For example:
if (country_code === 'US' || country_code === 'MM' || country_code === 'LR') { //United States of America or Myanmar or Liberia
maptilersdk.config.unit = 'imperial';
}
Visit the MapTiler SDK JS API reference to know all the scaleControl options. Like changing the display distance units
