tethys.backend/resources/js/Components/Map/zoom.component.vue

<template>
    <div class="gba-control-zoom btn-group-vertical">
        <button
            ref="inputPlus"
            class="disabled:bg-gray-200 inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 text-sm p-1"
            type="button"
            @click.prevent="zoomIn"
        >
            <BaseIcon v-if="mdiPlus" :path="mdiPlus" />
        </button>

        <button
            ref="inputMinus"
            class="disabled:bg-gray-200 inline-flex cursor-pointer justify-center items-center whitespace-nowrap focus:outline-none transition-colors duration-150 border rounded ring-blue-700 bg-teal-50 text-black border-teal-50 text-sm p-1"
            type="button"
            @click.prevent="zoomOut"
        >
            <BaseIcon v-if="mdiMinus" :path="mdiMinus" />
        </button>
    </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Ref } from 'vue-facing-decorator';
import { MapService } from '@/Stores/map.service';

import BaseIcon from '@/Components/BaseIcon.vue';
import { mdiPlus, mdiMinus } from '@mdi/js';

@Component({
    name: 'zoom-control',
    components: {
        BaseIcon,
    },
})
export default class ZoomControlComponent extends Vue {
    mdiPlus = mdiPlus;
    mdiMinus = mdiMinus;

    /**
     * Connect map id.
     */
    @Prop() public mapId: string;

    @Ref('inputPlus') inputPlus: HTMLButtonElement;
    @Ref('inputMinus') inputMinus: HTMLButtonElement;

    mapService = MapService();
    map;

    // mounted() {
    //     let map = (this.map = this.mapService.getMap(this.mapId));
    //     map.on('zoomend zoomlevelschange', this.updateDisabled, this);
    // }

    // unmounted() {
    //     this.map.off('zoomend zoomlevelschange');
    // }

    public zoomIn() {
        let map = this.mapService.getMap(this.mapId);
        map && map.zoomIn();
    }

    public zoomOut() {
        let map = this.mapService.getMap(this.mapId);
        map && map.zoomOut();
    }

    public updateDisabled() {
        let map = this.mapService.getMap(this.mapId);
        // let className = 'leaflet-disabled';

        this.inputPlus.disabled = false;
        this.inputPlus.setAttribute('aria-disabled', 'false');

        this.inputMinus.disabled = false;
        this.inputMinus.setAttribute('aria-disabled', 'false');

        if (map.getZoom() === map.getMinZoom()) {
            this.inputMinus.disabled = true;
            this.inputMinus.setAttribute('aria-disabled', 'true');
        }
        if (map.getZoom() === map.getMaxZoom()) {
            this.inputPlus.disabled = true;
            this.inputPlus.setAttribute('aria-disabled', 'true');
        }
    }
}
</script>

<style lang="css">
.gba-control-zoom {
    -webkit-user-select: none;
    -moz-user-select: none;
    -ms-user-select: none;
    user-select: none;
    cursor: pointer;
    border-radius: 4px;
    position: absolute;
    left: 10px;
    top: 10px;
    z-index: 39;
}

.btn-group-vertical button {
    display: block;

    margin-left: 0;
    margin-top: 0.5em;
}
</style>