From e11174fae7099cdfebe54ce57f5796715061d626 Mon Sep 17 00:00:00 2001 From: abhilash-aot Date: Thu, 25 Jul 2024 16:13:27 -0700 Subject: [PATCH] map broken in Map Settings Page fixed --- components/src/components/Map/Component.ts | 5 +++-- .../src/components/Map/services/MapService.ts | 17 +++++++++++++++-- 2 files changed, 18 insertions(+), 4 deletions(-) diff --git a/components/src/components/Map/Component.ts b/components/src/components/Map/Component.ts index c32056163..2c5d35127 100644 --- 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 index 06b110b23..840cbb038 100644 --- a/components/src/components/Map/services/MapService.ts +++ b/components/src/components/Map/services/MapService.ts @@ -26,6 +26,7 @@ class MapService { options; map; drawnItems; + constructor(options) { this.options = options; @@ -33,7 +34,10 @@ class MapService { 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,10 +76,10 @@ class MapService { viewMode, } = options; - if (drawOptions.rectangle) { drawOptions.rectangle.showArea = false; } + const map = L.map(mapContainer).setView( center, defaultZoom || DEFAULT_MAP_ZOOM @@ -79,11 +87,12 @@ class MapService { 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;