♻️ Replace onMount hook by the use of a signal to set the Map target

frontend/package.json

@@ -30,7 +30,7 @@
 		"@stitches/core": "^1.2.8",
 		"date-fns": "^2.29.3",
 		"matrix-widget-api": "^1.1.1",
-		"ol": "^7.3.0",
+		"ol": "^8.2.0",
 		"solid-js": "^1.6.6",
 		"solid-transition-group": "^0.0.10",
 		"solidjs-lazily": "^0.1.2"

frontend/src/stopsSearchMenu/map.tsx

@@ -41,57 +41,13 @@ export const Map: ParentComponent<{}> = () => {
     // TODO: Set padding according to the marker design.
     const fitPointsPadding = [50, 50, 50, 50];
 
-    let mapDiv: HTMLDivElement | undefined;
     let popup: StopPopup | undefined = undefined;
 
+    const [mapRef, setMapRef] = createSignal<HTMLDivElement>();
+
     const stopVectorSource = new OlVectorSource({ features: [] });
     const stopVectorLayer = new OlVectorLayer({ source: stopVectorSource });
 
-    let overlay: OlOverlay | undefined = undefined;
-    let map: OlMap | undefined = undefined;
-
-    const displayedFeatures: Record<number, OlFeature> = {};
-
-    const buildMap = (div: HTMLDivElement): void => {
-        overlay = new OlOverlay({
-            element: popup,
-            autoPan: {
-                animation: {
-                    duration: 250,
-                },
-            },
-        });
-        map = new OlMap({
-            target: div,
-            controls: [], // remove controls
-            view: new OlView({
-                center: mapCenter,
-                zoom: 10,
-            }),
-            layers: [
-                new OlTileLayer({
-                    source: new OlOSM(),
-                }),
-                stopVectorLayer,
-            ],
-            overlays: [overlay],
-        });
-        console.log("map=", map);
-        map.on('singleclick', onClickedMap);
-    }
-
-    const onClickedMap = async (event): Promise<void> => {
-        const features = await stopVectorLayer.getFeatures(event.pixel);
-        // Handle only the first feature
-        if (features.length > 0) {
-            await onClickedFeature(features[0]);
-        }
-        else {
-            setPopupDisplayed(false);
-            setSelectedMapStop(undefined);
-        }
-    }
-
     const onClickedFeature = async (feature: OlFeatureLike): Promise<void> => {
         const stopId: number = feature.getId();
         const stop = getStop(stopId);
@@ -109,10 +65,48 @@ export const Map: ParentComponent<{}> = () => {
         }
     }
 
-    onMount(() => {
-        buildMap(mapDiv);
-    })
-        ;
+    const onClickedMap = async (event): Promise<void> => {
+        const features = await stopVectorLayer.getFeatures(event.pixel);
+        // Handle only the first feature
+        if (features.length > 0) {
+            await onClickedFeature(features[0]);
+        }
+        else {
+            setPopupDisplayed(false);
+            setSelectedMapStop(undefined);
+        }
+    }
+
+    const displayedFeatures: Record<number, OlFeature> = {};
+
+    const overlay = new OlOverlay({
+        element: popup,
+        autoPan: {
+            animation: {
+                duration: 250,
+            },
+        },
+    });
+    const map = new OlMap({
+        target: "map",
+        controls: [], // remove controls
+        view: new OlView({
+            center: mapCenter,
+            zoom: 10,
+        }),
+        layers: [
+            new OlTileLayer({
+                source: new OlOSM(),
+            }),
+            stopVectorLayer,
+        ],
+        overlays: [overlay],
+    });
+    map.on('singleclick', onClickedMap);
+
+    createEffect(() => {
+        map.setTarget(mapRef());
+    });
 
     // Filling the map with stops shape
     createEffect(() => {
@@ -211,7 +205,7 @@ export const Map: ParentComponent<{}> = () => {
     }
 
     return <>
-        <div ref={mapDiv!} class="map">
+        <div ref={setMapRef!} class="map">
             <StopPopup ref={popup!} stop={selectedMapStop()} show={isPopupDisplayed()} />
         </div>
         <For each={getFoundStops()}>{(stop) => <MapStop stop={stop} selected={selectedMapStop()} />}</For>