726b11ae79
retryableAsyncComponent: after the three retries the pane rendered blank. It now shows "This view couldn't load." with a Retry button (messages keys, 11 locales). Retry swaps in a fresh async component, since Vue keeps a rejected load for the life of the page. Each map control wrapper passes data-control (zoom-in, zoom-out, fullscreen, theme, location, help, share) to its button: an untranslated hook for probes, where title and aria-label are localised.
36 lines
1.3 KiB
Vue
36 lines
1.3 KiB
Vue
<!--
|
|
ZoomInButton.vue — Increments the map zoom level by one step.
|
|
|
|
Props:
|
|
map — the live mapboxgl.Map instance (Object, required)
|
|
isDark — theme flag forwarded from parent
|
|
disabled — grey out + block the click when the camera is already at maxZoom.
|
|
Declared EXPLICITLY (rather than relying on attribute fallthrough
|
|
reaching MapControlButton's own prop) so the contract is visible to
|
|
callers and survives any future inheritAttrs change.
|
|
-->
|
|
<script setup>
|
|
import { useI18n } from 'vue-i18n'
|
|
import MapControlButton from './MapControlButton.vue'
|
|
|
|
const { t } = useI18n()
|
|
|
|
const props = defineProps({
|
|
map: { type: Object, default: null },
|
|
isDark: { type: Boolean, default: false },
|
|
disabled: { type: Boolean, default: false }
|
|
})
|
|
|
|
function zoomIn() {
|
|
if (props.disabled) return
|
|
// Mapbox's discrete one-step zoom (a single bounded easing), NOT a continuous
|
|
// per-frame camera loop — keep it that way (see BUG-RESIZE-STROBE).
|
|
props.map?.zoomIn()
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<MapControlButton data-control="zoom-in" :is-dark="isDark" :disabled="disabled" :title="t('buttons.zoomIn')" @click="zoomIn">
|
|
<span style="font-size:20px;line-height:1;font-weight:600;">+</span>
|
|
</MapControlButton>
|
|
</template>
|