Add map props for disable zoom and drag

wbbaker · Mar 27, 2023 · 724896a · 724896a
1 parent 5a3b49c
commit 724896a
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 6 deletions.
diff --git a/src/components/Map/VMap.global.vue b/src/components/Map/VMap.global.vue
@@ -32,6 +32,11 @@ const props = defineProps({
     default: false
   },
 
+  dragging: {
+    type: Boolean,
+    default: false
+  },
+
   zoomAnimate: {
     type: Boolean,
     default: false
@@ -52,6 +57,11 @@ const props = defineProps({
     default: 18
   },
 
+  disableZoom: {
+    type: Boolean,
+    default: false
+  },
+
   center: {
     type: Array,
     default: () => [0, 0]
@@ -110,14 +120,27 @@ watch(
 )
 
 onMounted(() => {
+  const options = {
+    center: props.center,
+    zoom: props.zoom,
+    worldCopyJump: true,
+    dragging: props.dragging
+  }
+
+  if (props.disableZoom) {
+    Object.assign(options, {
+      scrollWheelZoom: false,
+      zoomControl: false,
+      doubleClickZoom: false,
+      touchZoom: false,
+      boxZoom: false
+    })
+  }
+
   drawnItems = new L.FeatureGroup()
   geoJSONGroup = new L.FeatureGroup()
 
-  mapObject = L.map(leafletMap.value, {
-    center: props.center,
-    zoom: props.zoom,
-    worldCopyJump: true
-  })
+  mapObject = L.map(leafletMap.value, options)
 
   mapObject.pm.setGlobalOptions({
     layerGroup: drawnItems
@@ -128,6 +151,10 @@ onMounted(() => {
   mapObject.addLayer(drawnItems)
   mapObject.addLayer(geoJSONGroup)
 
+  if (props.geojson) {
+    setGeoJSON(props.geojson)
+  }
+
   if (props.controls) {
     mapObject.pm.addControls({
       position: 'topleft',
@@ -204,7 +231,7 @@ onUnmounted(() => {
   observeMap?.disconnect()
 })
 
-const setGeoJSON = (geojson) => {
+function setGeoJSON(geojson) {
   if (geojson) {
     L.geoJSON(geojson, {
       ...geojsonDefaultOptions,

diff --git a/src/modules/otus/components/Panel/PanelMap/PanelMap.vue b/src/modules/otus/components/Panel/PanelMap/PanelMap.vue
@@ -5,6 +5,7 @@
       <VMap
         ref="map"
         class="h-96 max-h-96"
+        dragging
         :zoom="zoom"
         :geojson="geojson"
         @geojson:ready="isLoading = false"
@@ -20,6 +21,7 @@
       <OtuSearch
         v-if="isOtuSearchVisible"
         :otu="otu"
+        :shapes="geojson"
         @close="() => (isOtuSearchVisible = false)"
       />
     </div>

diff --git a/src/modules/otus/components/Search/OtuSearch.vue b/src/modules/otus/components/Search/OtuSearch.vue
@@ -14,6 +14,9 @@
         ref="mapRef"
         class="w-screen h-screen"
         controls
+        disable-zoom
+        :zoom-bounds="6"
+        :geojson="shapes"
         @draw:start="() => (geojson = {})"
         @add:layer="
           ($event) => {
@@ -50,6 +53,11 @@ const props = defineProps({
   otu: {
     type: Array,
     default: () => []
+  },
+
+  shapes: {
+    type: Object,
+    default: () => ({})
   }
 })