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

<template>
    <div class="gba-control-zoom btn-group-vertical">
        <!-- <button ref="inputPlus" type="button" class="button is-light is-small" :click.prevent="zoomIn">
            <fa-icon [icon]="faPlus"></fa-icon>
        </button> -->
        <!-- <BaseButton ref="inputPlus" :icon="mdiPlus" color="white" rounded small @click.prevent="zoomIn" /> -->
        <button
            ref="inputPlus"
            class="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 hover:bg-gray-200 text-sm p-1"
            type="button"
            @click.prevent="zoomIn"
        >
            <BaseIcon v-if="mdiPlus" :path="mdiPlus" />
        </button>

        <button
            ref="inputMinus"
            class="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 hover:bg-gray-200 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';

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') private _inputPlus: HTMLElement;
    @Ref('inputMinus') private _inpuMinus: HTMLElement;

    mapService = MapService();

    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.nativeElement.disabled = false;
        this._inputPlus.setAttribute('aria-disabled', 'false');

        // this._inpuMinus.nativeElement.disabled = false;
        this._inpuMinus.setAttribute('aria-disabled', 'false');

        if (map.getZoom() === map.getMinZoom()) {
            // this._inpuMinus.nativeElement.disabled = true;
            this._inpuMinus.setAttribute('aria-disabled', 'true');
        }
        if (map.getZoom() === map.getMaxZoom()) {
            // this._inputPlus.nativeElement.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: 500;
}

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

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