Map Controls

Currently Supported Controls

The currently supported controls are:

• Navigation control NavigationControl
• Scale control ScaleControl
• Fullscreen control FullscreenControl
• Mouse position control MousePositionControl
• Mini map control (overview/inset) MiniMapControl
• Button group control ButtonGroupControl

Example

显示代码

全屏显示

#

// Scale control
let scaleControl =  new vjmap.ScaleControl();
map.addControl(scaleControl, "bottom-left");

// Navigation control
let navigationControl = new vjmap.NavigationControl();
map.addControl(navigationControl, "top-right");

// Fullscreen control
let fullScreenControl = new vjmap.FullscreenControl();
map.addControl(fullScreenControl, "bottom-right");

// Mouse position control
let mousePositionControl =  new vjmap.MousePositionControl();
map.addControl(mousePositionControl, "top-left");

Mini Map Control (Overview/Inset)

map.addControl(new vjmap.MiniMapControl({
containerStyle: {
background: "#31346a85",
transform: "scale(0.6)",
transformOrigin: "100% 0%"
// Adjust transformOrigin based on placement position
//'top-right'
//transformOrigin: "100% 0%"
//'top-left'
//transformOrigin: "0% 0%"
//'bottom-right'
//transformOrigin: "100% 100%"
//'bottom-left'
//transformOrigin: "0% 100%"
}
}), 'top-right');

Button Group Control

显示代码

全屏显示

Custom Controls

Example

// Custom control to display zoom level
class CustomShowZoomControl {
    constructor(options = {}) {
        this.style = options.style || {};// Style
    }
    _insertControl() {
        this.container = document.createElement("div");
        this.container.classList.add("vjmap-ctrl");

        this.container.style.border = this.style.border || "1px";
        this.container.style.backgroundColor = this.style.backgroundColor || "#A0CFFF";

        this.panel = document.createElement("div");
        this._zoomend();
        this.container.appendChild(this.panel);
    }
    _zoomend() {
        let strZoom = `Current level: ${this.map.getZoom().toFixed(2)}`
        this.panel.innerHTML = strZoom;
    }
    onAdd(map) {
        this.map = map;
        this._insertControl();
        this.map.on("zoomend", this._zoomend.bind(this));
        return this.container;
    }

    onRemove() {
        this.map.off("zoomend", this._zoomend.bind(this));
        this.container.parentNode.removeChild(this.container);
    }

    getDefaultPosition() {
        return "bottom-left";
    }
}

let control = new CustomShowZoomControl({style: {border : "1px"}})
map.addControl(control);