From a7e58558af9ae40c4f50f40f0f8141302d1da741 Mon Sep 17 00:00:00 2001
From: pablo014 <angelopablo014@gmail.com>
Date: Mon, 20 May 2024 16:05:42 -0700
Subject: [PATCH] fix(map): fix zoom in and out issue

---
 src/components/SimpleMap.vue        |  8 ++++----
 src/components/tags/LanguageTag.vue |  1 +
 src/hooks/live/useLiveChart.ts      |  2 +-
 src/pages/phone/PhoneSystem.vue     | 25 ++++++++++++++++++++-----
 4 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/components/SimpleMap.vue b/src/components/SimpleMap.vue
index 7ebb10351..c9ecbff67 100644
--- a/src/components/SimpleMap.vue
+++ b/src/components/SimpleMap.vue
@@ -27,7 +27,7 @@
               $emit('onZoomIn');
             }
           "
-          class="w-8 h-8 border-crisiscleanup-dark-100 border-t border-l border-r bg-white shadow-xl text-xl text-crisiscleanup-dark-400"
+          class="my-2 w-12 h-12 border-crisiscleanup-dark-100 border-t border-l border-r bg-white shadow-xl text-xl text-crisiscleanup-dark-400"
         />
         <base-button
           text=""
@@ -42,7 +42,7 @@
               $emit('onZoomOut');
             }
           "
-          class="w-8 h-8 border border-crisiscleanup-dark-100 bg-white shadow-xl text-xl text-crisiscleanup-dark-400"
+          class="w-12 h-12 border border-crisiscleanup-dark-100 bg-white shadow-xl text-xl text-crisiscleanup-dark-400"
         />
       </div>
       <base-button
@@ -66,7 +66,7 @@
         "
         icon="tree"
         icon-size="lg"
-        class="w-8 h-8 border my-1 border-crisiscleanup-dark-100 bg-white shadow-xl text-crisiscleanup-dark-400"
+        class="w-12 h-12 border my-1 border-crisiscleanup-dark-100 bg-white shadow-xl text-crisiscleanup-dark-400"
       />
       <base-button
         v-tooltip="{
@@ -89,7 +89,7 @@
             $emit('onZoomIncidentCenter');
           }
         "
-        class="w-8 h-8 border border-crisiscleanup-dark-100 my-1 bg-white shadow-xl text-crisiscleanup-dark-400"
+        class="w-12 h-12 border border-crisiscleanup-dark-100 my-1 bg-white shadow-xl text-crisiscleanup-dark-400"
       />
     </div>
     <WorksiteLegend
diff --git a/src/components/tags/LanguageTag.vue b/src/components/tags/LanguageTag.vue
index 58babadb7..aaef1bb24 100644
--- a/src/components/tags/LanguageTag.vue
+++ b/src/components/tags/LanguageTag.vue
@@ -29,6 +29,7 @@ export default defineComponent({
     },
   },
   setup(props) {
+    console.log(props.languageId)
     const { theme } = config;
     const language = ref(null);
     const styles = computed(() => {
diff --git a/src/hooks/live/useLiveChart.ts b/src/hooks/live/useLiveChart.ts
index c64e3c635..50eff444d 100644
--- a/src/hooks/live/useLiveChart.ts
+++ b/src/hooks/live/useLiveChart.ts
@@ -25,7 +25,7 @@ export default function useLiveChart(
   function getHeight() {
     const chartContainer = d3.select(`#${chartId}`);
     if (chartContainer) {
-      return Number(chartContainer.style('height').slice(0, -2)) || 0;
+      return Number(chartContainer.style('height')?.slice(0, -2)) || 0;
     }
 
     return 0;
diff --git a/src/pages/phone/PhoneSystem.vue b/src/pages/phone/PhoneSystem.vue
index 01b96d51b..3678a64c1 100644
--- a/src/pages/phone/PhoneSystem.vue
+++ b/src/pages/phone/PhoneSystem.vue
@@ -1081,7 +1081,7 @@ import {
   INTERACTIVE_ZOOM_LEVEL,
 } from '@/constants';
 import { averageGeolocation } from '@/utils/map';
-import type { MapUtils } from '@/hooks/worksite/useLiveMap';
+import type { MapUtils } from '@/hooks/worksite/useWorksiteMap';
 import { useCurrentUser } from '@/hooks';
 import PhoneOverlay from '@/components/phone/PhoneOverlay.vue';
 import useAcl from '@/hooks/useAcl';
@@ -1696,19 +1696,34 @@ export default defineComponent({
     }
 
     function zoomIn() {
-      mapUtils.value?.getMap().zoomIn();
+      mapUtils.value!.getMap().zoomIn();
     }
 
     function zoomOut() {
-      mapUtils.value?.getMap().zoomOut();
+      mapUtils.value!.getMap().zoomOut();
+    }
+
+    function fitLocation(location: Location) {
+      mapUtils.value!.fitLocation(location);
     }
 
     function getIncidentCenter() {
       const { incident_center } = Incident.find(
         currentIncidentId.value,
       ) as Incident;
-      if (incident_center) {
-        return [incident_center.coordinates[1], incident_center.coordinates[0]];
+      if (locationModels.length > 0) {
+        for (const location of locationModels) {
+          fitLocation(location);
+        }
+      } else {
+        const center = averageGeolocation(
+          mapUtils.value
+            ?.getPixiContainer()
+            ?.children.map((marker) => [marker.x, marker.y]),
+        );
+        if (center.latitude && center.longitude) {
+          mapUtils.value.getMap().setView([center.latitude, center.longitude], 6);
+        }
       }
       return [35.746_512_259_918_5, -96.411_509_631_256_56];
     }