puts in popout buttons for cyclomedia and eagleview

CityOfPhiladelphia · Oct 8, 2024 · c759f96 · c759f96
1 parent 14bb1b5
commit c759f96
Show file tree

Hide file tree

Showing 4 changed files with 76 additions and 9 deletions.
diff --git a/src/assets/style.scss b/src/assets/style.scss
@@ -73,7 +73,7 @@ a {
 
 .map-panel-holder {
   width: 50%;
-  flex-grow: 1;
+  height: calc(100vh - 110px);
   margin-bottom: 0px;
 }
 
@@ -114,8 +114,7 @@ a {
 }
 
 .map-panel.cyclomedia-eagleview {
-  // height: 51.5%;
-  height: 52.5%;
+  height: 50%;
 }
 
 .map-class {

diff --git a/src/components/map/CyclomediaPanel.vue b/src/components/map/CyclomediaPanel.vue
@@ -13,7 +13,7 @@ const projection2272 = "+proj=lcc +lat_1=40.96666666666667 +lat_2=39.93333333333
 
 const cyclomediaInitialized = ref(false);
 
-const $emit = defineEmits(['updateCameraYaw', 'updateCameraLngLat', 'updateCameraHFov']);
+const $emit = defineEmits(['updateCameraYaw', 'updateCameraLngLat', 'updateCameraHFov', 'toggleCyclomedia']);
 
 watch(
   () => MapStore.currentAddressCoords,
@@ -152,25 +152,54 @@ onMounted( async() => {
   }
 })
 
+const popoutClicked = () => {
+  window.open('//cyclomedia.phila.gov/?lat=' + MapStore.cyclomediaCameraLngLat[1] + '&lng=' + MapStore.cyclomediaCameraLngLat[0], '_blank');
+  $emit('toggleCyclomedia');
+}
+
 </script>
 
 <template>
   <div class="cyclomedia-panel">
+
+    <div class="cyclomedia-pop-out">
+      <font-awesome-icon
+        icon="fa-external-link-alt"
+        @click="popoutClicked"
+      ></font-awesome-icon>
+    </div>
     <div
       id="cycloviewer"
       ref="cycloviewer"
       class="panoramaViewerWindow"
-    />
+    >
+    </div>
+
+    
+
   </div>
 </template>
 
 <style scoped>
 
 .cyclomedia-panel {
+  position: relative;
   height: 100%;
   width: 100%;
 }
 
+.cyclomedia-pop-out {
+  position: absolute;
+  right: 0;
+  z-index: 2;
+  background-color: white;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  cursor: pointer;
+  border-radius: 2px;
+}
 
 @media 
 only screen and (max-width: 768px),

diff --git a/src/components/map/EagleviewPanel.vue b/src/components/map/EagleviewPanel.vue
@@ -9,6 +9,8 @@ import { useMapStore } from '@/stores/MapStore';
 // import { config } from 'maplibre-gl';
 const MapStore = useMapStore();
 
+const $emit = defineEmits(['toggleEagleview']);
+
 const clientId = import.meta.env.VITE_EAGLEVIEW_CLIENT_ID;
 const clientSecret = import.meta.env.VITE_EAGLEVIEW_CLIENT_SECRET;
 const options = {
@@ -90,23 +92,58 @@ onMounted( async() => {
   // });
 });
 
+const popoutClicked = () => {
+  window.open('//pictometry.phila.gov/?lat=' + MapStore.currentAddressCoords[1] + '&lng=' + MapStore.currentAddressCoords[0], '_blank');
+  $emit('toggleEagleview');
+}
+
 </script>
 
 <template>
-  <div
-    id="eagleview"
-    class="eagleview-div"
-  />
+  <div class="eagleview-panel">
+
+    <div class="eagleview-pop-out">
+      <font-awesome-icon
+        icon="fa-external-link-alt"
+        @click="popoutClicked"
+      ></font-awesome-icon>
+    </div>
+
+    <div
+      id="eagleview"
+      class="eagleview-div"
+    />
+
+  </div>
 </template>
 
 <style>
 
+.eagleview-panel {
+  position: relative;
+  height: 100%;
+  width: 100%;
+}
+
 .eagleview-div {
   position: relative;
   height: 100%;
   width: 100%;
 }
 
+.eagleview-pop-out {
+  position: absolute;
+  right: 0;
+  z-index: 2;
+  background-color: white;
+  padding-left: 6px;
+  padding-right: 6px;
+  padding-top: 1px;
+  padding-bottom: 1px;
+  cursor: pointer;
+  border-radius: 2px;
+}
+
 @media 
 only screen and (max-width: 768px),
 (min-device-width: 768px) and (max-device-width: 1024px)  {

diff --git a/src/components/map/Map.vue b/src/components/map/Map.vue
@@ -1050,11 +1050,13 @@ const toggleEagleview = () => {
       @update-camera-yaw="updateCyclomediaCameraAngle"
       @update-camera-h-fov="updateCyclomediaCameraViewcone"
       @update-camera-lng-lat="updateCyclomediaCameraLngLat"
+      @toggle-cyclomedia="toggleCyclomedia"
     />
   </KeepAlive>
   <KeepAlive>
     <EagleviewPanel
       v-if="MapStore.eagleviewOn"
+      @toggle-eagleview="toggleEagleview"
     />
   </KeepAlive>
 </template>