Phone System Zoom and Focus Issue

src/components/SimpleMap.vue

@@ -93,7 +93,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=""
@@ -108,7 +108,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
@@ -131,7 +131,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="{
@@ -153,7 +153,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"
       />
       <base-button
         v-if="props.showMapLayerToggle"

src/components/tags/LanguageTag.vue

@@ -29,6 +29,7 @@
     },
   },
   setup(props) {
+    console.log(props.languageId)
     const { theme } = config;
     const language = ref(null);
     const styles = computed(() => {

src/hooks/live/useLiveChart.ts

@@ -25,7 +25,7 @@
   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;

src/pages/phone/PhoneSystem.vue

@@ -776,7 +776,7 @@
   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';
@@ -1489,21 +1489,23 @@
     }
 
     function zoomIn() {
-      mapUtils.value?.getMap().zoomIn();
+      mapUtils.value!.getMap().zoomIn();
     }
 
     function zoomOut() {
-      mapUtils.value?.getMap().zoomOut();
+      mapUtils.value!.getMap().zoomOut();
+    }
+
+    function fitLocation(location: Location) {
+      console.log(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]];
-      }
-      return [35.746_512_259_918_5, -96.411_509_631_256_56];
+      return [incident_center.coordinates[1], incident_center.coordinates[0]];
     }
 
     function goToIncidentCenter() {