Source: map/tools/ZoomButton.js

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

export { ZoomButton };

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

    constructor(map, position) {
        super();

        this.map = map;
        this.position = position || "top-left";

        this.initElement_();
        this.initMapEvents_();

        this.map.addTool(this, this.position);
    }

    /**
     * Initializes the element for the ZoomButton tool.
     */
    initElement_() {
        const element = this.getElement();
        element.classList.add("vef-tool", "tool-group");
        element.innerHTML = `
            <button title="Zoom in" class="zoom-in"><i class="fas fa-plus"></i></button>
            <button title="Zoom out" class="zoom-out"><i class="fas fa-minus"></i></button>
        `;
    }

    /**
     * Initializes the map events for the ZoomButton.
     */
    initMapEvents_() {
        const element = this.getElement();
        const toolZoomIn = element.querySelector(".zoom-in");
        const toolZoomOut = element.querySelector(".zoom-out");
    
        const zoomEnd = () => {
            const zoom = this.map.getZoom();
            const min = this.map.getMinZoom();
            const max = this.map.getMaxZoom();
            if (zoom <= min) {
                toolZoomIn.disabled = false;
                toolZoomOut.disabled = true;
            } else if (zoom >= max) {
                toolZoomIn.disabled = true;
                toolZoomOut.disabled = false;
            } else {
                toolZoomIn.disabled = false;
                toolZoomOut.disabled = false;
            }
        }
    
        this.map.on('zoom_end', zoomEnd);
        zoomEnd();
    
        toolZoomIn.addEventListener("click", () => {
            this.map.zoomIn();
        });
    
        toolZoomOut.addEventListener("click", () => {
            this.map.zoomOut();
        });
    }

}