Change zoom/pan behavior on Otu search map

wbbaker · Apr 12, 2023 · 3e5252a · 3e5252a
1 parent 6061d51
commit 3e5252a
Show file tree

Hide file tree

Showing 2 changed files with 60 additions and 7 deletions.
diff --git a/src/components/Map/VMap.global.vue b/src/components/Map/VMap.global.vue
@@ -89,7 +89,9 @@ const emit = defineEmits([
   'add:layer',
   'draw:start',
   'edit:layer',
-  'drag:layer'
+  'drag:layer',
+  'zoom:change',
+  'zoom:start'
 ])
 
 let mapObject
@@ -121,6 +123,17 @@ watch(
   { deep: true }
 )
 
+watch(
+  () => props.dragging,
+  (newVal) => {
+    if (newVal) {
+      mapObject.dragging.enable()
+    } else {
+      mapObject.dragging.disable()
+    }
+  }
+)
+
 onMounted(() => {
   const options = {
     center: props.center,
@@ -182,6 +195,9 @@ onMounted(() => {
       clearDrawLayers()
       emit('draw:start', e)
     })
+
+    mapObject.on('zoom', (e) => emit('zoom:change', e))
+    mapObject.on('zoomstart', (e) => emit('zoom:start', e))
   }
 
   tiles.osm.addTo(mapObject)
@@ -256,7 +272,13 @@ function setGeoJSON(geojson) {
   emit('geojson:ready', geoJSONGroup)
 }
 
+function getMapObject() {
+  return mapObject
+}
+
 defineExpose({
-  clearDrawLayers
+  clearDrawLayers,
+  getMapObject,
+  resizeMap
 })
 </script>
diff --git a/src/modules/otus/components/Search/OtuSearch.vue b/src/modules/otus/components/Search/OtuSearch.vue
@@ -8,18 +8,22 @@
       :label="otu.object_tag"
       @close="() => emit('close')"
     />
-    <div class="relative">
+    <div
+      class="relative"
+      :class="{ 'disable-zoom-out': disableZoom }"
+    >
       <VMap
         ref="mapRef"
         class="w-screen h-screen"
         controls
-        :dragging="!shapes"
-        :disable-zoom="!!shapes"
-        :zoom-bounds="6"
+        :dragging="!disableZoom"
+        :zoom-bounds="maxZoom"
         :geojson="shapes"
+        @geojson:ready="updateMaxZoom"
         @add:layer="(layer) => loadOTUs(JSON.stringify(layer.geometry))"
         @edit:layer="(layer) => loadOTUs(JSON.stringify(layer.geometry))"
         @drag:layer="(layer) => loadOTUs(JSON.stringify(layer.geometry))"
+        @zoom:change="handleZoom"
         :zoom="4"
       />
       <div
@@ -41,7 +45,7 @@
 </template>
 
 <script setup>
-import { ref, onMounted, onUnmounted } from 'vue'
+import { computed, ref, onMounted, onUnmounted } from 'vue'
 import TaxonWorks from '../../services/TaxonWorks'
 import SearchBar from './SearchBar.vue'
 import ListResults from './ListResults.vue'
@@ -64,6 +68,11 @@ const mapRef = ref(null)
 const list = ref([])
 const isTableVisible = ref(false)
 const isLoading = ref()
+const maxZoom = ref(6)
+const currentZoom = ref(6)
+const disableZoom = computed(
+  () => !!props.shapes && currentZoom.value <= maxZoom.value
+)
 
 onMounted(() => {
   document.addEventListener('keyup', handleKeyboard)
@@ -101,4 +110,26 @@ function loadOTUs(geojson) {
       isLoading.value = false
     })
 }
+
+function handleZoom(e) {
+  updateCurrentZoom()
+  if (disableZoom.value) {
+    mapRef.value.resizeMap()
+  }
+}
+
+function updateCurrentZoom() {
+  currentZoom.value = mapRef.value.getMapObject().getZoom()
+}
+
+function updateMaxZoom() {
+  maxZoom.value = mapRef.value.getMapObject().getZoom()
+  updateCurrentZoom()
+}
 </script>
+
+<style lang="scss" scoped>
+:deep(.disable-zoom-out .leaflet-control-zoom-out) {
+  display: none !important;
+}
+</style>