Source: map/tools/ScaleControl.js

import { UiElement } from '../../ui/UiElement.js';
import { Map2D } from '../Map2D.js';

import "./ScaleControl.css";

export { ScaleControl };

/**
 * ScaleControl
 *
 * @author rhess <robin.hess@awi.de>
 * 
 * @memberof vef.map.tools
 */
class ScaleControl extends UiElement {


    constructor(map, position) {
        super();

        this.map = map;
        this.position = position || "bottom-left";
        this.maxWidth = 120;

        // initialize element

        this.getElement().title = "Scale";
        this.setClass(["tool-scale"]);
        this.setHtml(`<span class="scale-control-label"></span>`);

        this.map.addTool(this, this.position);
        this.map.on("move_end", () => this.update());

        this.update();
    }

    getRoundNum_(num) {
        const pow10 = Math.pow(10, (`${Math.floor(num)}`).length - 1);
        let d = num / pow10;

        d = d >= 10 ? 10 :
        d >= 5 ? 5 :
        d >= 3 ? 3 :
        d >= 2 ? 2 : 1;

        return pow10 * d;
    }

    update_(maxDistance) {
        const distance = this.getRoundNum_(maxDistance);

        this.query(".scale-control-label").style.width = `${Math.round(this.maxWidth * (distance / maxDistance))}px`;
        this.query(".scale-control-label").innerText = distance < 1000 ? `${distance} m` : `${distance / 1000} km`;
        //console.log(`${Math.round(this.maxWidth * (distance / maxDistance))}px`);
    }

    update() {
        if (this.map instanceof Map2D) {
            const map = this.map.leafletMap_;
            const y = map.getSize().y / 2;

            const distance = map.distance(
                map.containerPointToLatLng([0, y]),
                map.containerPointToLatLng([this.maxWidth, y])
            );
            this.update_(distance);
        }

    }

}