Map zoom

Author: BojanSovticEngIT

src/modules/documentExecution/dashboard/widget/MapWidget/LeafletWrapper.vue

@@ -14,7 +14,7 @@ import useAppStore from '@/App.store'
 import i18n from '@/App.i18n'
 import { emitter } from '@/modules/documentExecution/dashboard/DashboardHelpers'
 import { clearLayersCache, switchLayerVisibility } from './visibility/MapVisibilityHelper'
-import { ISelection, IVariable } from '../../Dashboard'
+import { ISelection, IVariable, IWidget } from '../../Dashboard'
 
 //#region inlined leaflet-layervisibility
 function validateFilter(filterFunc) {
@@ -112,14 +112,26 @@ const resizeMap = () => {
     }
 }
 
+const getMapZoomValue = (widgetModel: IWidget | undefined): number => {
+    const defaultZoom = 10
+
+    const zoom = widgetModel?.settings?.configuration?.map?.zoom
+    const autoCentering = widgetModel?.settings?.configuration?.map?.autoCentering
+
+    if (autoCentering) return defaultZoom
+
+    const parsedZoom = parseInt(zoom)
+    return isNaN(parsedZoom) ? defaultZoom : parsedZoom
+}
+
 onMounted(async () => {
     emitter.on('widgetResized', resizeMap)
 
     loadVariables()
 
     map = L.map(mapId, {
         center: navigator && !props.widgetModel.settings?.configuration?.map?.autoCentering ? await getCoords() : [0, 0],
-        zoom: parseInt(props.widgetModel.settings?.configuration?.map?.zoom) || 10,
+        zoom: getMapZoomValue(props.widgetModel),
         attributionControl: false
     })
 

src/modules/documentExecution/dashboard/widget/WidgetEditor/WidgetEditorSettingsTab/MapWidget/configuration/MapBaseLayerSettings.vue

@@ -1,7 +1,7 @@
 <template>
     <div v-if="mapSettings">
         <div class="row q-mx-md q-pb-lg items-center">
-            <q-input class="col" type="number" v-model="mapSettings.zoom" max="20" min="1" :label="$t('dashboard.widgetEditor.map.baseLayer.zoom')" />
+            <q-input class="col" type="number" v-model="mapSettings.zoom" max="20" min="1" :label="$t('dashboard.widgetEditor.map.baseLayer.zoom')" :disable="mapSettings.autoCentering" />
             <q-toggle class="col" v-model="mapSettings.showScale" :label="$t('dashboard.widgetEditor.map.baseLayer.showScale')" />
             <q-toggle class="col" v-model="mapSettings.autoCentering" :label="$t('dashboard.widgetEditor.map.baseLayer.autoCentering')" />
         </div>