update map when lat/lon change

Kitware · Feb 6, 2024 · f998cfd · f998cfd
1 parent d115904
commit f998cfd
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 1 deletion.
diff --git a/client/src/components/MapLocation.vue b/client/src/components/MapLocation.vue
@@ -21,9 +21,14 @@ export default defineComponent({
       type: Object as PropType<{ x?: number; y?: number } | undefined>,
       default: () => undefined,
     },
+    updateMap: {
+      type: Number,
+      defualt: 0,
+    },
   },
   emits: ['location'],
   setup(props, { emit }) {
+    const usCenter = { x: -90.5855, y: 39.8333 };
     const mapRef: Ref<HTMLDivElement | null> = ref(null);
     const map: Ref<any> = ref();
     const mapLayer: Ref<any> = ref();
@@ -32,7 +37,6 @@ export default defineComponent({
     const markerLocation: Ref<{ x: number; y: number } | null> = ref(null);
     watch(mapRef, () => {
       if (mapRef.value) {
-        const usCenter = { x: -90.5855, y: 39.8333 };
         const centerPoint = props.location && props.location.x && props.location.y ? props.location : usCenter;
         const zoomLevel = props.location && props.location.x && props.location.y ? 6 : 3;
         map.value = geo.map({ node: mapRef.value, center: centerPoint, zoom: zoomLevel });
@@ -79,6 +83,31 @@ export default defineComponent({
         }
       }
     });
+    watch(() =>  props.updateMap, () => {
+      if (props.location?.x && props.location?.y && markerLocation.value) {
+            markerLocation.value = { x: props.location?.x, y: props.location.y };
+            markerFeature.value
+              .data([markerLocation.value])
+              .style({
+                symbol: geo.markerFeature.symbols.drop,
+                symbolValue: 1 / 3,
+                rotation: -Math.PI / 2,
+                radius: 30,
+                strokeWidth: 5,
+                strokeColor: "blue",
+                fillColor: "yellow",
+                rotateWithMap: false,
+              })
+              .draw();
+              const centerPoint = props.location && props.location.x && props.location.y ? props.location : usCenter;
+              const zoomLevel = props.location && props.location.x && props.location.y ? 6 : 3;
+              if (map.value) {
+                map.value.zoom(zoomLevel);
+                map.value.center(centerPoint);
+              }
+
+        }
+    });
     return {
       mapRef,
     };

diff --git a/client/src/components/UploadRecording.vue b/client/src/components/UploadRecording.vue
@@ -117,6 +117,10 @@ export default defineComponent({
     longitude.value = lon;
   };
 
+  const updateMap = ref(0); // updates the map when lat/lon change by editing directly;
+
+  const triggerUpdateMap = () => updateMap.value += 1;
+
     return {
       errorText,
       fileModel,
@@ -134,11 +138,13 @@ export default defineComponent({
       longitude,
       gridCellId,
       publicVal,
+      updateMap,
       selectFile,
       readFile,
       handleSubmit,
       updateTime,
       setLocation,
+      triggerUpdateMap,
     };
   },
 });
@@ -264,12 +270,14 @@ export default defineComponent({
                         type="number"
                         label="LAT:"
                         class="mx-4"
+                        @change="triggerUpdateMap()"
                       />
                       <v-text-field
                         v-model="longitude"
                         type="number"
                         label="LON:"
                         class="mx-4"
+                        @change="triggerUpdateMap()"
                       />
                     </v-row>
                     <v-row>
@@ -284,6 +292,7 @@ export default defineComponent({
                       <map-location
                         :size="{width: 600, height: 400}"
                         :location="{ x: latitude, y: longitude}"
+                        :update-map="updateMap"
                         @location="setLocation($event)"
                       />
                       <v-spacer />