Migrate ZoomControl to vue

src/components/Map.vue

@@ -216,7 +216,7 @@ export default defineComponent({
 			center: new LatLng(0, 0),
 			fadeAnimation: false,
 			zoomAnimation: true,
-			zoomControl: true,
+			zoomControl: false,
 			preferCanvas: true,
 			attributionControl: false,
 			crs: CRS.Simple,

src/components/MapUI.vue

@@ -23,6 +23,7 @@
 		<div id="ui__top-left" class="ui__section section--vertical">
 			<div class="ui__toolbar toolbar--vertical">
 				<LogoControl v-for="logo in logoControls" :key="JSON.stringify(logo)" :options="logo"></LogoControl>
+				<ZoomControl :leaflet="leaflet"></ZoomControl>
 				<LoadingControl :leaflet="leaflet" :delay="500"></LoadingControl>
 			</div>
 		</div>
@@ -59,6 +60,7 @@ import MapContextMenu from "@/components/map/MapContextMenu.vue";
 import LoginControl from "@/components/map/control/LoginControl.vue";
 import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
 import LoadingControl from "@/components/map/control/LoadingControl.vue";
+import ZoomControl from "@/components/map/control/ZoomControl.vue";
 
 export default defineComponent({
 	props: {
@@ -69,6 +71,7 @@ export default defineComponent({
 	},
 
 	components: {
+		ZoomControl,
 		LoadingControl,
 		LogoControl,
 		CoordinatesControl,

src/components/map/control/ZoomControl.vue

@@ -0,0 +1,88 @@
+<!--
+  - Copyright 2022 James Lyne
+  -
+  - Licensed under the Apache License, Version 2.0 (the "License");
+  - you may not use this file except in compliance with the License.
+  - You may obtain a copy of the License at
+  -
+  - http://www.apache.org/licenses/LICENSE-2.0
+  -
+  - Unless required by applicable law or agreed to in writing, software
+  - distributed under the License is distributed on an "AS IS" BASIS,
+  - WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+  - See the License for the specific language governing permissions and
+  - limitations under the License.
+  -->
+
+<template>
+	<div class="zoom ui__element ui__group">
+		<button class="ui__button" type="button" title="Zoom in" aria-label="Zoom in"
+		        :disabled="!canZoomIn" @click.prevent="zoomIn">
+			<span aria-hidden="true">+</span>
+		</button>
+		<button class="ui__button" type="button" title="Zoom out" aria-label="Zoom out"
+		        :disabled="!canZoomOut" @click.prevent="zoomOut">
+			<span aria-hidden="true">−</span>
+		</button>
+	</div>
+</template>
+
+<script lang="ts">
+import {defineComponent, onUnmounted} from "@vue/runtime-core";
+	import LiveAtlasLeafletMap from "@/leaflet/LiveAtlasLeafletMap";
+	import {useStore} from "@/store";
+	import {onMounted, ref} from "vue";
+
+	export default defineComponent({
+		props: {
+			leaflet: {
+				type: Object as () => LiveAtlasLeafletMap,
+				required: true,
+			}
+		},
+
+		setup(props) {
+			const store = useStore(),
+				canZoomIn = ref<boolean>(false),
+				canZoomOut = ref<boolean>(false);
+
+			const zoomIn = () => props.leaflet.zoomIn();
+			const zoomOut = () => props.leaflet.zoomOut();
+
+			const updateZoom = () => {
+				canZoomIn.value = props.leaflet.getZoom() < props.leaflet.getMaxZoom();
+				canZoomOut.value = props.leaflet.getZoom() > props.leaflet.getMinZoom();
+			}
+
+			onMounted(() => {
+				updateZoom();
+				props.leaflet.on('zoom', updateZoom);
+			});
+
+			onUnmounted(() => props.leaflet.off('zoom', updateZoom));
+
+			return {
+				canZoomIn,
+				canZoomOut,
+
+				zoomIn,
+				zoomOut,
+			}
+		}
+	});
+</script>
+
+<style lang="scss" scoped>
+	.zoom {
+		@media (max-width: 480px) and (pointer: coarse), (max-height: 480px) and (pointer: coarse), (max-height: 400px) {
+			display: none;
+		}
+
+		.ui__button {
+			font-family: sans-serif;
+			font-weight: bold;
+			font-size: 2.2rem;
+			text-indent: 0.1rem;
+		}
+	}
+</style>