For AI agents: the complete documentation index is available at /jp/core-sdk/map/web/llms.txt, the full documentation bundle is available at /jp/core-sdk/map/web/llms-full.txt, and this page is available as Markdown at /jp/core-sdk/map/web/v10/02-map-controllers/03-map-scale-controller.md.

Map Scale Controller

The map scale shows the scale at the current map zoom level. The map scale is not displayed by default, to add:

// init maplibre-gl map
const maplibreMap = new maplibregl.Map({
    container: 'map'
});
// maplibre listener
maplibreMap.on('load', function() {
  // add scale control, position in 'bottom-right'
  maplibreMap.addControl(new maplibregl.ScaleControl(), 'bottom-right');
});

You can choose where to put the map scale on the map:

options('top-left', 'top-right', 'bottom-left', 'bottom-right')

e.g.

maplibreMap.addControl(new maplibregl.ScaleControl(), 'bottom-right');

Sample web page:

#Map Scale Controller

Map Scale Controller