From a79e6ed74b292950b64d7d8dc6ef6c7314daaa63 Mon Sep 17 00:00:00 2001
From: Patrick Browne <pt.browne@gmail.com>
Date: Tue, 27 Sep 2022 13:38:53 +0200
Subject: [PATCH] fix: Map offset in edition page

---
 app/charts/map/map.tsx | 40 ++++++++++++++++++++++++++++++----------
 1 file changed, 30 insertions(+), 10 deletions(-)

diff --git a/app/charts/map/map.tsx b/app/charts/map/map.tsx
index a946bba22..5726341d7 100644
--- a/app/charts/map/map.tsx
+++ b/app/charts/map/map.tsx
@@ -67,11 +67,9 @@ const useStyles = makeStyles<Theme>((theme) => ({
 
 // Debounced function fixes the problem of maximizing window or opening a console,
 // when map was not resized initially.
-const resize = debounce((e: MapboxEvent, bbox: BBox) => {
-  if (e.originalEvent) {
-    e.target.resize();
-    e.target.fitBounds(bbox, { duration: 0 });
-  }
+const resizeAndFit = debounce((map: mapboxgl.Map, bbox: BBox) => {
+  map.resize();
+  map.fitBounds(bbox, { duration: 0 });
 }, 0);
 
 export const MapComponent = () => {
@@ -306,6 +304,31 @@ export const MapComponent = () => {
 
   const dataLoaded = features.areaLayer || features.symbolLayer;
 
+  const redrawMap = useEvent(() => {
+    if (!mapNodeRef.current) {
+      return;
+    }
+    const map = mapNodeRef.current.getMap() as mapboxgl.Map;
+    const bbox = map.getBounds().toArray() as BBox;
+    currentBBox.current = bbox;
+    resizeAndFit(map, lockedBBox || bbox);
+  });
+
+  const handleResize = useEvent((e: MapboxEvent) => {
+    if (e.originalEvent) {
+      redrawMap();
+    }
+  });
+
+  /**
+   * Redraw the map when style data has been downloaded to solve an offset problem between the viz
+   * layer and the base layer happening in Edge under precise conditions (Windows 10, Edge 105,
+   * resolution 1440x900).
+   */
+  const handleStyleData = useEvent(() => {
+    redrawMap();
+  });
+
   return (
     <>
       {locked ? null : (
@@ -322,6 +345,7 @@ export const MapComponent = () => {
           initialViewState={defaultViewState}
           mapLib={maplibregl}
           mapStyle={mapStyle}
+          onStyleData={handleStyleData}
           style={{
             position: "absolute",
             left: 0,
@@ -348,11 +372,7 @@ export const MapComponent = () => {
 
             onViewStateChange(e);
           }}
-          onResize={(e) => {
-            const bbox = e.target.getBounds().toArray() as BBox;
-            currentBBox.current = bbox;
-            resize(e, lockedBBox || bbox);
-          }}
+          onResize={handleResize}
           {...viewState}
         >
           <DeckGLOverlay