map broken in Map Settings Page fixed

RyanBirtch-aot · Jul 25, 2024 · e11174f · e11174f
1 parent 01cb3d5
commit e11174f
Show file tree

Hide file tree

Showing 2 changed files with 18 additions and 4 deletions.
diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts
@@ -75,18 +75,19 @@ export default class Component extends (FieldComponent as any) {
     const { numPoints, defaultZoom, readOnlyMap, center, defaultValue } =
       this.component;
 
-
     const { readOnly: viewMode } = this.options;
 
     let initialCenter;
     if (center && center.features && center.features[0]) {
       initialCenter = center.features[0].coordinates;
+    } else {
+      initialCenter = DEFAULT_CENTER;
     }
 
     this.mapService = new MapService({
       mapContainer,
       drawOptions,
-      center: center ? initialCenter : DEFAULT_CENTER,
+      center: initialCenter,
       form,
       numPoints,
       defaultZoom,

diff --git a/components/src/components/Map/services/MapService.ts b/components/src/components/Map/services/MapService.ts
@@ -26,14 +26,18 @@ class MapService {
   options;
   map;
   drawnItems;
+
   constructor(options) {
     this.options = options;
 
     if (options.mapContainer) {
       const { map, drawnItems } = this.initializeMap(options);
       this.map = map;
       this.drawnItems = drawnItems;
+
       map.invalidateSize();
+      // Triggering a resize event after map initialization
+      setTimeout(() => window.dispatchEvent(new Event('resize')), 0);
       // Event listener for drawn objects
       map.on('draw:created', (e) => {
         let layer = e.layer;
@@ -54,6 +58,10 @@ class MapService {
       map.on(L.Draw.Event.EDITED, (e) => {
         options.onDrawnItemsChange(drawnItems.getLayers());
       });
+
+      map.on('resize', () => {
+        map.invalidateSize();
+      });
     }
   }
 
@@ -68,22 +76,23 @@ class MapService {
       viewMode,
     } = options;
 
-
     if (drawOptions.rectangle) {
       drawOptions.rectangle.showArea = false;
     }
+
     const map = L.map(mapContainer).setView(
       center,
       defaultZoom || DEFAULT_MAP_ZOOM
     );
     L.tileLayer(DEFAULT_MAP_LAYER_URL, {
       attribution: DEFAULT_LAYER_ATTRIBUTION,
     }).addTo(map);
+
     // Initialize Draw Layer
     let drawnItems = new L.FeatureGroup();
     map.addLayer(drawnItems);
-    // Add Drawing Controllers
 
+    // Add Drawing Controllers
     if (!readOnlyMap) {
       if (!viewMode) {
         let drawControl = new L.Control.Draw({
@@ -95,6 +104,7 @@ class MapService {
         map.addControl(drawControl);
       }
     }
+
     // Checking to see if the map should be interactable
     const componentEditNode =
       document.getElementsByClassName(COMPONENT_EDIT_CLASS);
@@ -111,6 +121,7 @@ class MapService {
     }
     return { map, drawnItems };
   }
+
   bindPopupToLayer(layer) {
     if (layer instanceof L.Marker) {
       layer
@@ -140,6 +151,7 @@ class MapService {
         .openPopup();
     }
   }
+
   loadDrawnItems(items) {
     const { drawnItems } = this;
     if (!drawnItems) {
@@ -169,6 +181,7 @@ class MapService {
       }
     });
   }
+
   hasChildNode(parent, targetNode) {
     if (parent === targetNode) {
       return true;