puts streetview and obliqueview as queries in url

CityOfPhiladelphia · Jan 30, 2025 · 887d92d · 887d92d
1 parent 419b88c
commit 887d92d
Show file tree

Hide file tree

Showing 9 changed files with 121 additions and 56 deletions.
diff --git a/src/App.vue b/src/App.vue
@@ -112,14 +112,16 @@ watch(
   () => locale.value,
   (newLocale, oldLocale) => {
     if (import.meta.env.VITE_DEBUG == 'true') console.log('watch locale:', newLocale, oldLocale);
+    let startQuery = { ...route.query };
     if (newLocale === MainStore.currentLang) {
       return;
     } else if (newLocale && newLocale != 'en-US') {
       MainStore.currentLang = newLocale;
-      router.push({ query: { 'lang': newLocale }});
+      router.push({ query: { ...startQuery, 'lang': newLocale }});
     } else {
       MainStore.currentLang = null;
-      router.push({ fullPath: route.path });
+      delete startQuery['lang'];
+      router.push({ query: { ...startQuery }});
     }
   }
 )

diff --git a/src/components/Topic.vue b/src/components/Topic.vue
@@ -46,7 +46,7 @@ const handleTopicClick = () => {
     MainStore.currentTopic = props.topicSlug;
   }
   if (import.meta.env.VITE_DEBUG == 'true') console.log('topic clicked:', props.topicName);
-  routeApp(router);
+  routeApp(router, route);
 
   setTimeout(() => {
     const element = document.getElementById(props.topicName+'-topic');

diff --git a/src/components/map/CyclomediaControl.vue b/src/components/map/CyclomediaControl.vue
@@ -4,9 +4,11 @@ const MainStore = useMainStore();
 import { useMapStore } from '@/stores/MapStore.js'
 const MapStore = useMapStore();
 
-import { computed } from 'vue';
+import { useRouter, useRoute } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
 
-defineEmits(['toggleCyclomedia']);
+import { computed } from 'vue';
 
 const imgSrc = computed(() => {
   return MainStore.publicPath + 'images/cyclomedia.png';
@@ -16,6 +18,18 @@ const cyclomediaOn = computed(() => {
   return MapStore.cyclomediaOn;
 });
 
+const toggleCyclomedia = () => {
+  let startQuery = { ...route.query };
+  if (import.meta.env.VITE_DEBUG) console.log('startQuery:', startQuery);
+  if (cyclomediaOn.value) {
+    delete startQuery['streetview'];
+    router.push({ query: { ...startQuery }});
+  } else {
+    delete startQuery['obliqueview'];
+    router.push({ query: { ...startQuery, 'streetview': !cyclomediaOn.value } });
+  }
+};
+
 </script>
 
 <template>
@@ -26,8 +40,9 @@ const cyclomediaOn = computed(() => {
   >
     <button
       type="button"
-      @click="$emit('toggleCyclomedia')"
+      @click="toggleCyclomedia"
     >
+    <!-- @click="$emit('toggleCyclomedia')" -->
       <img
         class="img-src"
         alt="street-view"

diff --git a/src/components/map/CyclomediaPanel.vue b/src/components/map/CyclomediaPanel.vue
@@ -5,6 +5,10 @@ const MapStore = useMapStore();
 import { useGeocodeStore } from '@/stores/GeocodeStore';
 const GeocodeStore = useGeocodeStore();
 
+import { useRouter, useRoute } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
+
 import $config from '@/config';
 
 import { format, subYears } from 'date-fns';
@@ -15,7 +19,7 @@ const projection2272 = "+proj=lcc +lat_1=40.96666666666667 +lat_2=39.93333333333
 
 const cyclomediaInitialized = ref(false);
 
-const $emit = defineEmits(['updateCameraYaw', 'updateCameraLngLat', 'updateCameraHFov', 'toggleCyclomedia']);
+const $emit = defineEmits(['updateCameraYaw', 'updateCameraLngLat', 'updateCameraHFov']);
 
 watch(
   () => MapStore.currentAddressCoords,
@@ -181,7 +185,9 @@ onMounted( async() => {
 
 const popoutClicked = () => {
   window.open('//cyclomedia.phila.gov/?lat=' + MapStore.cyclomediaCameraLngLat[1] + '&lng=' + MapStore.cyclomediaCameraLngLat[0], '_blank');
-  $emit('toggleCyclomedia');
+  let startQuery = { ...route.query };
+  delete startQuery['streetview'];
+  router.push({ query: { ...startQuery }});
 }
 
 </script>
@@ -202,8 +208,6 @@ const popoutClicked = () => {
     >
     </div>
 
-    
-
   </div>
 </template>
 

diff --git a/src/components/map/EagleviewControl.vue b/src/components/map/EagleviewControl.vue
@@ -5,7 +5,9 @@ const MainStore = useMainStore();
 import { useMapStore } from '@/stores/MapStore.js';
 const MapStore = useMapStore();
 
-defineEmits(['toggleEagleview']);
+import { useRouter, useRoute } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
 
 const imgSrc = computed(() => {
   return MainStore.publicPath + 'images/eagleview.png';
@@ -15,6 +17,18 @@ const eagleviewOn = computed(() => {
   return MapStore.eagleviewOn;
 });
 
+const toggleEagleview = () => {
+  let startQuery = { ...route.query };
+  if (import.meta.env.VITE_DEBUG) console.log('startQuery:', startQuery);
+  if (eagleviewOn.value) {
+    delete startQuery['obliqueview'];
+    router.push({ query: { ...startQuery }});
+  } else {
+    delete startQuery['streetview'];
+    router.push({ query: { ...startQuery, 'obliqueview': !eagleviewOn.value } });
+  }
+};
+
 </script>
 
 <template>
@@ -25,8 +39,9 @@ const eagleviewOn = computed(() => {
   >
     <button
       type="button"
-      @click="$emit('toggleEagleview')"
+      @click="toggleEagleview"
     >
+    <!-- @click="$emit('toggleEagleview')" -->
       <img
         class="img-src"
         alt="oblique-view"

diff --git a/src/components/map/EagleviewPanel.vue b/src/components/map/EagleviewPanel.vue
@@ -9,7 +9,9 @@ import { useMapStore } from '@/stores/MapStore';
 // import { config } from 'maplibre-gl';
 const MapStore = useMapStore();
 
-const $emit = defineEmits(['toggleEagleview']);
+import { useRouter, useRoute } from 'vue-router';
+const route = useRoute();
+const router = useRouter();
 
 const clientId = import.meta.env.VITE_EAGLEVIEW_CLIENT_ID;
 const clientSecret = import.meta.env.VITE_EAGLEVIEW_CLIENT_SECRET;
@@ -94,7 +96,9 @@ onMounted( async() => {
 
 const popoutClicked = () => {
   window.open('//pictometry.phila.gov/?lat=' + MapStore.currentAddressCoords[1] + '&lng=' + MapStore.currentAddressCoords[0], '_blank');
-  $emit('toggleEagleview');
+  let startQuery = { ...route.query };
+  delete startQuery['obliqueview'];
+  router.push({ query: { ...startQuery }});
 }
 
 </script>

diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
@@ -87,6 +87,13 @@ onMounted(async () => {
   map.on('load', () => {
     let canvas = document.querySelector(".maplibregl-canvas");
     canvas.setAttribute('tabindex', -1);
+
+    if (route.query.streetview) {
+      turnOnCyclomedia();
+    }
+    if (route.query.obliqueview) {
+      turnOnEagleview();
+    }
   })
 
   // add the address marker and camera icon sources
@@ -833,26 +840,40 @@ const removeAllCyclomediaMapLayers = () => {
   MapStore.setCyclomediaCameraLngLat(MapStore.cyclomediaCameraLngLat, null);
 }
 
-// toggle cyclomedia on and off
-const toggleCyclomedia = async() => {
-  if (import.meta.env.VITE_DEBUG == 'true') console.log('toggleCyclomedia, map.getStyle().sources:', map.getStyle().sources, 'map.getStyle().layers:', map.getStyle().layers);
-  MapStore.cyclomediaOn = !MapStore.cyclomediaOn;
-  if (MapStore.cyclomediaOn) {
-    MapStore.eagleviewOn = false;
-    const zoom = map.getZoom();
-    if (zoom > 16.5) {
-      await updateCyclomediaRecordings();
-      if (MapStore.cyclomediaCameraLngLat) {
-        if (import.meta.env.VITE_DEBUG == 'true') console.log('in toggleCyclomedia, calling updateCyclomediaCameraLngLat, MapStore.cyclomediaCameraLngLat:', MapStore.cyclomediaCameraLngLat);
-        updateCyclomediaCameraLngLat(MapStore.cyclomediaCameraLngLat);
-      }
-      if (MapStore.cyclomediaCameraHFov && MapStore.cyclomediaCameraYaw) {
-        if (import.meta.env.VITE_DEBUG == 'true') console.log('calling updateCyclomediaCameraViewcone');
-        updateCyclomediaCameraViewcone(MapStore.cyclomediaCameraHFov, MapStore.cyclomediaCameraYaw);
+watch(
+  () => route.query,
+  async newQuery => {
+    if (import.meta.env.VITE_DEBUG) console.log('Map.vue watch route.query.streetview, newQuery:', newQuery, 'map.loaded():', map.loaded());
+    if (map.loaded()) {
+      if (newQuery.streetview) {
+        turnOnCyclomedia();
+      } else if (newQuery.obliqueview) {
+        turnOnEagleview();
+      } else {
+        removeAllCyclomediaMapLayers();
+        MapStore.cyclomediaOn = false;
+        MapStore.eagleviewOn = false;
       }
     }
-  } else {
-    removeAllCyclomediaMapLayers();
+  }
+)
+
+// turn cyclomedia on
+const turnOnCyclomedia = async() => {
+  if (import.meta.env.VITE_DEBUG == 'true') console.log('Map.vue cyclo turnOnCyclomedia, map.getStyle().sources:', map.getStyle().sources, 'map.getStyle().layers:', map.getStyle().layers);
+  MapStore.cyclomediaOn = true;
+  MapStore.eagleviewOn = false;
+  const zoom = map.getZoom();
+  if (MapStore.cyclomediaCameraLngLat) {
+    if (import.meta.env.VITE_DEBUG == 'true') console.log('Map.vue cyclo in turnOnCyclomedia, calling updateCyclomediaCameraLngLat, MapStore.cyclomediaCameraLngLat:', MapStore.cyclomediaCameraLngLat);
+    updateCyclomediaCameraLngLat(MapStore.cyclomediaCameraLngLat);
+  }
+  if (zoom > 16.5) {
+    await updateCyclomediaRecordings();
+    if (MapStore.cyclomediaCameraHFov && MapStore.cyclomediaCameraYaw) {
+      if (import.meta.env.VITE_DEBUG == 'true') console.log('calling updateCyclomediaCameraViewcone');
+      updateCyclomediaCameraViewcone(MapStore.cyclomediaCameraHFov, MapStore.cyclomediaCameraYaw);
+    }
   }
 }
 
@@ -899,10 +920,11 @@ const updateCyclomediaRecordings = async () => {
 
 // everything for adding, moving, and orienting the cyclomedia camera icon and viewcone
 const updateCyclomediaCameraLngLat = (lngLat) => {
-  // if (import.meta.env.VITE_DEBUG == 'true') console.log('updateCyclomediaCameraLngLat is running, lngLat:', lngLat);
+  if (import.meta.env.VITE_DEBUG == 'true') console.log('Map.vue cyclo updateCyclomediaCameraLngLat is running 1, lngLat:', lngLat);
   if (!MapStore.cyclomediaOn) {
     return;
   } else {
+    if (import.meta.env.VITE_DEBUG) console.log('Map.vue cyclo updateCyclomediaCameraLngLat is running 2, lngLat:', lngLat);
     const theData = point(lngLat);
     map.getSource('cyclomediaCamera').setData(theData);
     $config.dorDrawnMapStyle.sources.cyclomediaCamera.data = theData;
@@ -977,13 +999,11 @@ const updateCyclomediaCameraViewcone = (cycloHFov, cycloYaw) => {
   $config.dorDrawnMapStyle.sources.cyclomediaViewcone.data = data;
 }
 
-const toggleEagleview = () => {
-  if (import.meta.env.VITE_DEBUG == 'true') console.log('toggleEagleview');
-  MapStore.eagleviewOn = !MapStore.eagleviewOn;
-  if (MapStore.eagleviewOn) {
-    MapStore.cyclomediaOn = false;
-    removeAllCyclomediaMapLayers();
-  }
+const turnOnEagleview = () => {
+  if (import.meta.env.VITE_DEBUG == 'true') console.log('turnOnEagleview');
+  MapStore.cyclomediaOn = false;
+  removeAllCyclomediaMapLayers();
+  MapStore.eagleviewOn = true;
 }
 
 </script>
@@ -1010,8 +1030,10 @@ const toggleEagleview = () => {
       v-if="MapStore.imageryOn"
       @set-imagery="setImagery"
     />
-    <EagleviewControl @toggle-eagleview="toggleEagleview" />
-    <CyclomediaControl @toggle-cyclomedia="toggleCyclomedia" />
+    <EagleviewControl />
+    <CyclomediaControl />
+    <!-- <EagleviewControl @toggle-eagleview="turnOnEagleview" />
+    <CyclomediaControl @toggle-cyclomedia="toggleCyclomedia" /> -->
     <OpacitySlider
       v-if="MainStore.currentTopic == 'deeds' && selectedRegmap"
       :initial-opacity="MapStore.regmapOpacity"
@@ -1050,15 +1072,15 @@ const toggleEagleview = () => {
       @update-camera-yaw="updateCyclomediaCameraAngle"
       @update-camera-h-fov="updateCyclomediaCameraViewcone"
       @update-camera-lng-lat="updateCyclomediaCameraLngLat"
-      @toggle-cyclomedia="toggleCyclomedia"
     />
   </KeepAlive>
+    <!-- @turn-off-cyclomedia="turnOffCyclomedia" -->
   <KeepAlive>
     <EagleviewPanel
       v-if="MapStore.eagleviewOn"
-      @toggle-eagleview="toggleEagleview"
     />
   </KeepAlive>
+  <!-- @toggle-eagleview="turnOnEagleview" -->
 </template>
 
 <style>

diff --git a/src/composables/useRouting.js b/src/composables/useRouting.js
@@ -1,30 +1,33 @@
 import { useMainStore } from '@/stores/MainStore';
 
 export default function useRouting() {
-  const routeApp = (router) => {
-    if (import.meta.env.VITE_DEBUG) console.log('routeApp')
+  const routeApp = (router, route) => {
+    if (import.meta.env.VITE_DEBUG) console.log('routeApp, router:', router, 'route:', route);
 
     const MainStore = useMainStore();
+    let startQuery = { ...route.query };
     if (!MainStore.currentAddress && MainStore.currentTopic == 'voting'){
       if (import.meta.env.VITE_DEBUG) console.log('routeApp routing to topic because MainStore.currentTopic:', MainStore.currentTopic);
+      // let startQuery = { ...route.query };
       if (MainStore.currentLang) {
-        router.replace({ name: 'topic', params: { topic: MainStore.currentTopic }, query: { lang: MainStore.currentLang } });
+        router.replace({ name: 'topic', params: { topic: MainStore.currentTopic }, query: { ...startQuery, 'lang': MainStore.currentLang } });
       } else {
-        router.replace({ name: 'topic', params: { topic: MainStore.currentTopic } });
+        delete startQuery['lang'];
+        router.replace({ name: 'topic', params: { topic: MainStore.currentTopic }, query: { ...startQuery } });
       }
     } else if (MainStore.currentAddress && MainStore.currentTopic == 'nearby') {
       if (import.meta.env.VITE_DEBUG) console.log('routeApp routing to address-topic-and-data');
-      router.push({ name: 'address-topic-and-data', params: { address: MainStore.currentAddress, topic: "nearby", data: MainStore.currentNearbyDataType || '311' } });
+      router.push({ name: 'address-topic-and-data', params: { address: MainStore.currentAddress, topic: "nearby", data: MainStore.currentNearbyDataType || '311' }, query: { ...startQuery } });
     } else if (MainStore.currentAddress && MainStore.currentTopic) {
       if (import.meta.env.VITE_DEBUG) console.log('routeApp routing to address-and-topic because MainStore has address and topic');
-      router.push({ name: 'address-and-topic', params: { address: MainStore.currentAddress, topic: MainStore.currentTopic } });
+      router.push({ name: 'address-and-topic', params: { address: MainStore.currentAddress, topic: MainStore.currentTopic }, query: { ...startQuery } });
     } else if (MainStore.currentAddress) {
       if (import.meta.env.VITE_DEBUG) console.log('routeApp routing to address because MainStore has address');
-      router.push({ name: 'address', params: { address: MainStore.currentAddress } });
+      router.push({ name: 'address', params: { address: MainStore.currentAddress }, query: { ...startQuery } });
     } else {
       if (import.meta.env.VITE_DEBUG) console.log('routeApp routing to not-found because no address or topic');
       MainStore.addressSearchRunning = false;
-      router.push({ name: 'not-found' });
+      router.push({ name: 'not-found', query: { ...startQuery } });
     }
   }
   return {

diff --git a/src/router/index.js b/src/router/index.js
@@ -323,13 +323,13 @@ const router = createRouter({
           MainStore.currentTopic = to.params.addressOrTopic;
           MainStore.currentAddress = null;
           MainStore.currentLang = to.query.lang;
-          routeApp(router);
+          routeApp(router, to);
         } else {
           if (import.meta.env.VITE_DEBUG === 'true') console.log('inside else, routing to address');
           MainStore.currentTopic = null;
           MainStore.currentAddress = to.params.addressOrTopic;
           MainStore.currentLang = to.query.lang;
-          routeApp(router);
+          routeApp(router, to);
         }
       }
     },
@@ -382,7 +382,7 @@ const router = createRouter({
           if (!GeocodeStore.aisData.features) {
             MainStore.currentTopic = null;
           }
-          routeApp(router);
+          routeApp(router, to);
         } else if (lat && lng) {
           MainStore.setLastSearchMethod('mapClick');
           await getParcelsAndPutInStore(lng, lat);
@@ -391,7 +391,7 @@ const router = createRouter({
             return false;
           }
           await checkParcelInAis();
-          routeApp(router);
+          routeApp(router, to);
         } else {
           return false;
         }