diff --git a/frontend/src/api/APIWorker.tsx b/frontend/src/api/APIWorker.tsx
index 3d4a09a89a..e83eb05d30 100644
--- a/frontend/src/api/APIWorker.tsx
+++ b/frontend/src/api/APIWorker.tsx
@@ -30,7 +30,7 @@ export function APIWorker() {
   const dispatch = useMainAppDispatch()
   const isSuperUser = useIsSuperUser()
   const { selectedVesselIdentity, vesselSidebarTab } = useMainAppSelector(state => state.vessel)
-  const { sideWindow } = useMainAppSelector(state => state)
+  const sideWindow = useMainAppSelector(state => state.sideWindow)
   const { openedBeaconMalfunctionInKanban, vesselBeaconMalfunctionsResumeAndHistory } = useMainAppSelector(
     state => state.beaconMalfunction
   )
diff --git a/frontend/src/features/MainWindow.tsx b/frontend/src/features/MainWindow.tsx
index b8bf026685..f1f1ad4aaf 100644
--- a/frontend/src/features/MainWindow.tsx
+++ b/frontend/src/features/MainWindow.tsx
@@ -24,7 +24,8 @@ export function MainWindow() {
     state => state.displayedComponent
   )
   const isVesselSidebarOpen = useMainAppSelector(state => state.vessel.vesselSidebarIsOpen)
-  const { mission, sideWindow } = useMainAppSelector(state => state)
+  const mission = useMainAppSelector(state => state.mission)
+  const sideWindow = useMainAppSelector(state => state.sideWindow)
 
   const warnOnUnload = useCallback(
     event => {
diff --git a/frontend/src/features/MapButtons/AlertsMapButton.tsx b/frontend/src/features/MapButtons/AlertsMapButton.tsx
index 93518acdd2..1d2c116841 100644
--- a/frontend/src/features/MapButtons/AlertsMapButton.tsx
+++ b/frontend/src/features/MapButtons/AlertsMapButton.tsx
@@ -12,7 +12,7 @@ import { ReactComponent as AlertsSVG } from '../icons/Icone_alertes.svg'
 export function AlertsMapButton() {
   const dispatch = useMainAppDispatch()
   const { previewFilteredVesselsMode } = useMainAppSelector(state => state.global)
-  const { sideWindow } = useMainAppSelector(state => state)
+  const sideWindow = useMainAppSelector(state => state.sideWindow)
 
   const isActive =
     sideWindow.status !== SideWindowStatus.CLOSED &&
diff --git a/frontend/src/features/MapButtons/BeaconMalfunctionsMapButton.tsx b/frontend/src/features/MapButtons/BeaconMalfunctionsMapButton.tsx
index 99187354d4..381251505d 100644
--- a/frontend/src/features/MapButtons/BeaconMalfunctionsMapButton.tsx
+++ b/frontend/src/features/MapButtons/BeaconMalfunctionsMapButton.tsx
@@ -12,7 +12,7 @@ import { ReactComponent as BeaconMalfunctionsSVG } from '../icons/Icone_VMS.svg'
 export function BeaconMalfunctionsMapButton() {
   const dispatch = useMainAppDispatch()
   const { previewFilteredVesselsMode } = useMainAppSelector(state => state.global)
-  const { sideWindow } = useMainAppSelector(state => state)
+  const sideWindow = useMainAppSelector(state => state.sideWindow)
 
   const isActive =
     sideWindow.status !== SideWindowStatus.CLOSED &&
diff --git a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx
index c94f8f865b..9d19801c18 100644
--- a/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx
+++ b/frontend/src/features/MapButtons/LayersSidebar/RegulatoryZones/search/RegulatoryLayerSearchResultTopic.tsx
@@ -104,12 +104,6 @@ function UnmemoizedRegulatoryLayerSearchResultTopic({
     }
   }
 
-  // console.group('RegulatoryLayerSearchResultTopic')
-  // console.log('regulatoryLayerLawType', regulatoryLayerLawType)
-  // console.log('regulatoryLayerTopic', regulatoryLayerTopic)
-  // console.log('topicDetails', topicDetails)
-  // console.groupEnd()
-
   return (
     <>
       <LayerTopic onClick={() => setZonesAreOpen(!zonesAreOpen)}>
diff --git a/frontend/src/features/MapButtons/Missions/index.tsx b/frontend/src/features/MapButtons/Missions/index.tsx
index a430db2a9e..720aace4cb 100644
--- a/frontend/src/features/MapButtons/Missions/index.tsx
+++ b/frontend/src/features/MapButtons/Missions/index.tsx
@@ -16,7 +16,7 @@ import { MapToolButton } from '../shared/MapToolButton'
 
 export function MissionsMenu() {
   const dispatch = useMainAppDispatch()
-  const { sideWindow } = useMainAppSelector(state => state)
+  const sideWindow = useMainAppSelector(state => state.sideWindow)
   const { leftBoxOpened } = useMainAppSelector(state => state.global)
   const { isMissionsLayerDisplayed } = useMainAppSelector(state => state.displayedComponent)
 
diff --git a/frontend/src/features/map/draw/DrawModal.tsx b/frontend/src/features/map/draw/DrawModal.tsx
index 9c6664783b..e992b73de6 100644
--- a/frontend/src/features/map/draw/DrawModal.tsx
+++ b/frontend/src/features/map/draw/DrawModal.tsx
@@ -40,7 +40,7 @@ const INTERACTION_LISTENER_BUTTON_LABEL: Partial<Record<InteractionListener, str
 export function DrawLayerModal() {
   const dispatch = useMainAppDispatch()
   const { drawedGeometry, initialGeometry, interactionType, listener } = useMainAppSelector(state => state.draw)
-  const { sideWindow } = useMainAppSelector(state => state)
+  const sideWindowStatus = useMainAppSelector(state => state.sideWindow.status)
   const coordinatesFormat = useMainAppSelector(state => state.map.coordinatesFormat)
   const initialFeatureNumberRef = useRef<number | undefined>(undefined)
 
@@ -76,10 +76,10 @@ export function DrawLayerModal() {
   }, [feature])
 
   useEffect(() => {
-    if (sideWindow.status === SideWindowStatus.CLOSED) {
+    if (sideWindowStatus === SideWindowStatus.CLOSED) {
       dispatch(closeDraw())
     }
-  }, [dispatch, sideWindow.status])
+  }, [dispatch, sideWindowStatus])
 
   const handleQuit = () => {
     dispatch(closeDraw())
diff --git a/frontend/src/features/map/layers/AdministrativeLayers.tsx b/frontend/src/features/map/layers/AdministrativeLayers.tsx
index e17330d16b..516634e965 100644
--- a/frontend/src/features/map/layers/AdministrativeLayers.tsx
+++ b/frontend/src/features/map/layers/AdministrativeLayers.tsx
@@ -9,21 +9,19 @@ import {
 } from '../../../domain/entities/layers'
 import { getVectorOLLayer } from '../../../domain/use_cases/layer/administrative/showAdministrativeZone'
 import { useMainAppSelector } from '../../../hooks/useMainAppSelector'
+import { monitorfishMap } from '../monitorfishMap'
 
-export type AdministrativeLayersProps = {
-  map?: any
-}
-function UnmemoizedAdministrativeLayers({ map }: AdministrativeLayersProps) {
+function UnmemoizedAdministrativeLayers() {
   const { showedLayers } = useMainAppSelector(state => state.layer)
   const isBackoffice = useMainAppSelector(state => state.global.isBackoffice)
 
   useEffect(() => {
-    if (!map && !showedLayers) {
+    if (!showedLayers) {
       return
     }
 
     function addAdministrativeLayersToMap() {
-      const olLayers = map.getLayers()
+      const olLayers = monitorfishMap.getLayers()
       const layersToInsert = showedLayers
         .filter(layer => layerOfTypeAdministrativeLayer(administrativeLayers, layer))
         .filter(layer => layersNotInCurrentOLMap(olLayers, layer))
@@ -38,7 +36,7 @@ function UnmemoizedAdministrativeLayers({ map }: AdministrativeLayersProps) {
     }
 
     function removeAdministrativeLayersToMap() {
-      const layers = map.getLayers()
+      const layers = monitorfishMap.getLayers()
       const layersToRemove = layers
         .getArray()
         .filter(olLayer => layerOfTypeAdministrativeLayerInCurrentMap(administrativeLayers, olLayer))
@@ -51,7 +49,7 @@ function UnmemoizedAdministrativeLayers({ map }: AdministrativeLayersProps) {
 
     addAdministrativeLayersToMap()
     removeAdministrativeLayersToMap()
-  }, [isBackoffice, map, showedLayers])
+  }, [isBackoffice, showedLayers])
 
   return <></>
 }
diff --git a/frontend/src/features/map/layers/BaseLayer.tsx b/frontend/src/features/map/layers/BaseLayer.tsx
index d4875a405b..947e046f98 100644
--- a/frontend/src/features/map/layers/BaseLayer.tsx
+++ b/frontend/src/features/map/layers/BaseLayer.tsx
@@ -7,14 +7,12 @@ import React, { useCallback, useEffect, useMemo, useRef } from 'react'
 import { LayerProperties } from '../../../domain/entities/layers/constants'
 import { useIsInLightMode } from '../../../hooks/authorization/useIsInLightMode'
 import { useMainAppSelector } from '../../../hooks/useMainAppSelector'
+import { monitorfishMap } from '../monitorfishMap'
 
 import type { ImageTile } from 'ol'
 import type Tile from 'ol/Tile'
 
-export type BaseLayerProps = {
-  map?: any
-}
-function UnmemoizedBaseLayer({ map }: BaseLayerProps) {
+function UnmemoizedBaseLayer() {
   const isInLightMode = useIsInLightMode()
   const selectedBaseLayer = useMainAppSelector(state => state.map.selectedBaseLayer)
 
@@ -109,14 +107,16 @@ function UnmemoizedBaseLayer({ map }: BaseLayerProps) {
   )
 
   useEffect(() => {
-    if (!map || !selectedBaseLayer || !baseLayersObjects[selectedBaseLayer]) {
+    if (!selectedBaseLayer || !baseLayersObjects[selectedBaseLayer]) {
       return
     }
 
     function showAnotherBaseLayer() {
-      const olLayers = map.getLayers()
-      // eslint-disable-next-line no-underscore-dangle
+      const olLayers = monitorfishMap.getLayers()
+      // eslint-disable no-underscore-dangle
+      // @ts-ignore
       const layerToRemove = olLayers.getArray().find(layer => layer.className_ === LayerProperties.BASE_LAYER.code)
+      // eslint-enable no-underscore-dangle
 
       olLayers.insertAt(0, baseLayersObjects[selectedBaseLayer]())
 
@@ -130,7 +130,7 @@ function UnmemoizedBaseLayer({ map }: BaseLayerProps) {
     }
 
     showAnotherBaseLayer()
-  }, [baseLayersObjects, map, selectedBaseLayer])
+  }, [baseLayersObjects, selectedBaseLayer])
 
   return <></>
 }
diff --git a/frontend/src/features/map/layers/DrawLayer.tsx b/frontend/src/features/map/layers/DrawLayer.tsx
index 621ec75a3d..f4669ecf7e 100644
--- a/frontend/src/features/map/layers/DrawLayer.tsx
+++ b/frontend/src/features/map/layers/DrawLayer.tsx
@@ -208,6 +208,7 @@ function resetModifyInteractions(map) {
 function resetDrawInteractions(map) {
   map.getInteractions().forEach(interaction => {
     if (interaction instanceof Draw) {
+      interaction.abortDrawing()
       interaction.setActive(false)
     }
   })
diff --git a/frontend/src/features/map/layers/FilterLayer.jsx b/frontend/src/features/map/layers/FilterLayer.jsx
index 92802c800c..8e0610c1e7 100644
--- a/frontend/src/features/map/layers/FilterLayer.jsx
+++ b/frontend/src/features/map/layers/FilterLayer.jsx
@@ -8,8 +8,9 @@ import { Stroke, Style } from 'ol/style'
 import { OPENLAYERS_PROJECTION, WSG84_PROJECTION } from '../../../domain/entities/map/constants'
 import { LayerProperties } from '../../../domain/entities/layers/constants'
 import { COLORS } from '../../../constants/constants'
+import { monitorfishMap } from '../monitorfishMap'
 
-const FilterLayer = ({ map }) => {
+const FilterLayer = () => {
   const { showedFilter, filterColor } = useSelector((state) => {
     const _showedFilter = state.filter?.filters?.find(filter => filter.showed)
     return {
@@ -59,26 +60,20 @@ const FilterLayer = ({ map }) => {
   }
 
   useEffect(() => {
-    if (map) {
-      map.getLayers().push(getLayer())
-    }
+    monitorfishMap.getLayers().push(getLayer())
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [map])
+  }, [])
 
   useEffect(() => {
-    if (map) {
-      getVectorSource()?.clear(true)
-      const feature = filterFeature && getVectorSource()?.getFormat().readFeatures(filterFeature)
-      if (feature) {
-        getVectorSource()?.addFeatures(feature)
-      }
+    getVectorSource()?.clear(true)
+    const feature = filterFeature && getVectorSource()?.getFormat().readFeatures(filterFeature)
+    if (feature) {
+      getVectorSource()?.addFeatures(feature)
     }
-  }, [map, filterFeature])
+  }, [filterFeature])
 
   useEffect(() => {
     layerRef?.current.setStyle(new Style({
diff --git a/frontend/src/features/map/layers/Mission/MissionLayer/index.tsx b/frontend/src/features/map/layers/Mission/MissionLayer/index.tsx
index 4d3f4cdc5e..05e6944ff3 100644
--- a/frontend/src/features/map/layers/Mission/MissionLayer/index.tsx
+++ b/frontend/src/features/map/layers/Mission/MissionLayer/index.tsx
@@ -8,15 +8,13 @@ import { MonitorFishLayer } from '../../../../../domain/entities/layers/types'
 import { getMissionFeaturePoint } from '../../../../../domain/entities/mission'
 import { useGetFilteredMissionsQuery } from '../../../../../domain/entities/mission/hooks/useGetFilteredMissionsQuery'
 import { useMainAppDispatch } from '../../../../../hooks/useMainAppDispatch'
+import { monitorfishMap } from '../../../monitorfishMap'
 
 import type { WebGLPointsLayerWithName } from '../../../../../domain/types/layer'
 import type { Feature } from 'ol'
 import type { Point } from 'ol/geom'
 
-export type MissionLayerProps = {
-  map?: any
-}
-function UnmemoizedMissionLayer({ map }: MissionLayerProps) {
+function UnmemoizedMissionLayer() {
   const dispatch = useMainAppDispatch()
   const { missions } = useGetFilteredMissionsQuery()
 
@@ -45,9 +43,6 @@ function UnmemoizedMissionLayer({ map }: MissionLayerProps) {
   }, [])
 
   useEffect(() => {
-    if (!map) {
-      return
-    }
     getVectorSource().clear()
 
     const features = missions
@@ -58,21 +53,17 @@ function UnmemoizedMissionLayer({ map }: MissionLayerProps) {
     }
 
     getVectorSource().addFeatures(features)
-  }, [dispatch, map, missions])
+  }, [dispatch, missions])
 
   useEffect(() => {
-    if (!map) {
-      return undefined
-    }
-
     getLayer().name = LayerProperties.MISSION_PIN_POINT.code
-    map.getLayers().push(getLayer())
+    monitorfishMap.getLayers().push(getLayer())
 
     return () => {
-      map.removeLayer(getLayer())
+      monitorfishMap.removeLayer(getLayer())
       getLayer().dispose()
     }
-  }, [getLayer, map])
+  }, [getLayer])
 
   return <></>
 }
diff --git a/frontend/src/features/map/layers/Vessel/VesselAlertAndBeaconMalfunctionLayer.jsx b/frontend/src/features/map/layers/Vessel/VesselAlertAndBeaconMalfunctionLayer.jsx
index c67fcb1035..e2eb12fe1b 100644
--- a/frontend/src/features/map/layers/Vessel/VesselAlertAndBeaconMalfunctionLayer.jsx
+++ b/frontend/src/features/map/layers/Vessel/VesselAlertAndBeaconMalfunctionLayer.jsx
@@ -9,8 +9,9 @@ import { LayerProperties } from '../../../../domain/entities/layers/constants'
 import { getVesselAlertAndBeaconMalfunctionStyle } from './style'
 import { getVesselCompositeIdentifier, vesselIsShowed } from '../../../../domain/entities/vessel/vessel'
 import { useIsSuperUser } from '../../../../hooks/authorization/useIsSuperUser'
+import { monitorfishMap } from '../../monitorfishMap'
 
-const VesselAlertAndBeaconMalfunctionLayer = ({ map }) => {
+const VesselAlertAndBeaconMalfunctionLayer = () => {
   const isSuperUser = useIsSuperUser()
   const {
     vessels,
@@ -57,17 +58,15 @@ const VesselAlertAndBeaconMalfunctionLayer = ({ map }) => {
   }
 
   useEffect(() => {
-    if (isSuperUser && map) {
+    if (isSuperUser) {
       getLayer().name = LayerProperties.VESSEL_BEACON_MALFUNCTION.code
-      map.getLayers().push(getLayer())
+      monitorfishMap.getLayers().push(getLayer())
     }
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [isSuperUser, map, getLayer])
+  }, [isSuperUser, getLayer])
 
   useEffect(() => {
     if (isSuperUser && vessels?.length) {
diff --git a/frontend/src/features/map/layers/Vessel/VesselAlertLayer.jsx b/frontend/src/features/map/layers/Vessel/VesselAlertLayer.jsx
index e00dace58d..884c1e4999 100644
--- a/frontend/src/features/map/layers/Vessel/VesselAlertLayer.jsx
+++ b/frontend/src/features/map/layers/Vessel/VesselAlertLayer.jsx
@@ -14,8 +14,9 @@ import {
   vesselIsShowed
 } from '../../../../domain/entities/vessel/vessel'
 import { useIsSuperUser } from '../../../../hooks/authorization/useIsSuperUser'
+import { monitorfishMap } from '../../monitorfishMap'
 
-const VesselAlertLayer = ({ map }) => {
+const VesselAlertLayer = () => {
   const isSuperUser = useIsSuperUser()
 
   const {
@@ -65,17 +66,15 @@ const VesselAlertLayer = ({ map }) => {
   }
 
   useEffect(() => {
-    if (isSuperUser && map) {
+    if (isSuperUser) {
       getLayer().name = LayerProperties.VESSEL_ALERT.code
-      map.getLayers().push(getLayer())
+      monitorfishMap.getLayers().push(getLayer())
     }
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [isSuperUser, map])
+  }, [isSuperUser])
 
   useEffect(() => {
     if (isSuperUser && vessels?.length) {
diff --git a/frontend/src/features/map/layers/Vessel/VesselBeaconMalfunctionLayer.jsx b/frontend/src/features/map/layers/Vessel/VesselBeaconMalfunctionLayer.jsx
index 7e636d0faa..bb3f8a9e4e 100644
--- a/frontend/src/features/map/layers/Vessel/VesselBeaconMalfunctionLayer.jsx
+++ b/frontend/src/features/map/layers/Vessel/VesselBeaconMalfunctionLayer.jsx
@@ -9,8 +9,9 @@ import { LayerProperties } from '../../../../domain/entities/layers/constants'
 import { getVesselBeaconMalfunctionStyle } from './style'
 import { getVesselCompositeIdentifier, vesselIsShowed } from '../../../../domain/entities/vessel/vessel'
 import { useIsSuperUser } from '../../../../hooks/authorization/useIsSuperUser'
+import { monitorfishMap } from '../../monitorfishMap'
 
-const VesselBeaconMalfunctionLayer = ({ map }) => {
+const VesselBeaconMalfunctionLayer = () => {
   const isSuperUser = useIsSuperUser()
 
   const {
@@ -58,17 +59,15 @@ const VesselBeaconMalfunctionLayer = ({ map }) => {
   }
 
   useEffect(() => {
-    if (isSuperUser && map) {
+    if (isSuperUser) {
       getLayer().name = LayerProperties.VESSEL_BEACON_MALFUNCTION.code
-      map.getLayers().push(getLayer())
+      monitorfishMap.getLayers().push(getLayer())
     }
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [isSuperUser, map, getLayer])
+  }, [isSuperUser, getLayer])
 
   useEffect(() => {
     if (isSuperUser && vessels?.length) {
diff --git a/frontend/src/features/map/layers/Vessel/VesselEstimatedPositionLayer.jsx b/frontend/src/features/map/layers/Vessel/VesselEstimatedPositionLayer.jsx
index 910acd7053..19853ab0b4 100644
--- a/frontend/src/features/map/layers/Vessel/VesselEstimatedPositionLayer.jsx
+++ b/frontend/src/features/map/layers/Vessel/VesselEstimatedPositionLayer.jsx
@@ -6,8 +6,9 @@ import { EstimatedPosition } from '../../../../domain/entities/estimatedPosition
 import { getVesselLastPositionVisibilityDates, Vessel, vesselIsShowed } from '../../../../domain/entities/vessel/vessel'
 import { Vector } from 'ol/layer'
 import { getEstimatedPositionStyle } from '../styles/vesselEstimatedPosition.style'
+import { monitorfishMap } from '../../monitorfishMap'
 
-const VesselEstimatedPositionLayer = ({ map }) => {
+const VesselEstimatedPositionLayer = () => {
   const {
     vessels,
     hideNonSelectedVessels,
@@ -59,20 +60,16 @@ const VesselEstimatedPositionLayer = ({ map }) => {
 
   useEffect(() => {
     function addLayerToMap () {
-      if (map) {
-        getLayer().name = LayerProperties.VESSEL_ESTIMATED_POSITION.code
-        map.getLayers().push(getLayer())
-      }
+      getLayer().name = LayerProperties.VESSEL_ESTIMATED_POSITION.code
+      monitorfishMap.getLayers().push(getLayer())
     }
 
     addLayerToMap()
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [map])
+  }, [])
 
   useEffect(() => {
     if (vessels && !showingVesselsEstimatedPositions) {
diff --git a/frontend/src/features/map/layers/Vessel/VesselInfractionSuspicionLayer.jsx b/frontend/src/features/map/layers/Vessel/VesselInfractionSuspicionLayer.jsx
index 073c762feb..e75da2964a 100644
--- a/frontend/src/features/map/layers/Vessel/VesselInfractionSuspicionLayer.jsx
+++ b/frontend/src/features/map/layers/Vessel/VesselInfractionSuspicionLayer.jsx
@@ -14,8 +14,9 @@ import {
   vesselIsShowed
 } from '../../../../domain/entities/vessel/vessel'
 import { useIsSuperUser } from '../../../../hooks/authorization/useIsSuperUser'
+import { monitorfishMap } from '../../monitorfishMap'
 
-const VesselInfractionSuspicionLayer = ({ map }) => {
+const VesselInfractionSuspicionLayer = () => {
   const isSuperUser = useIsSuperUser()
 
   const {
@@ -65,17 +66,15 @@ const VesselInfractionSuspicionLayer = ({ map }) => {
   }
 
   useEffect(() => {
-    if (isSuperUser && map) {
+    if (isSuperUser) {
       getLayer().name = LayerProperties.VESSEL_INFRACTION_SUSPICION.code
-      map.getLayers().push(getLayer())
+      monitorfishMap.getLayers().push(getLayer())
     }
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [isSuperUser, map])
+  }, [isSuperUser])
 
   useEffect(() => {
     if (isSuperUser && vessels?.length) {
diff --git a/frontend/src/features/map/layers/Vessel/VesselSelectedLayer.jsx b/frontend/src/features/map/layers/Vessel/VesselSelectedLayer.jsx
index 4b49770487..f3109308c4 100644
--- a/frontend/src/features/map/layers/Vessel/VesselSelectedLayer.jsx
+++ b/frontend/src/features/map/layers/Vessel/VesselSelectedLayer.jsx
@@ -11,8 +11,9 @@ import { LayerProperties } from '../../../../domain/entities/layers/constants'
 import { Vessel } from '../../../../domain/entities/vessel/vessel'
 
 import { getSelectedVesselStyle } from './style'
+import { monitorfishMap } from '../../monitorfishMap'
 
-const VesselSelectedLayer = ({ map }) => {
+const VesselSelectedLayer = () => {
   const { selectedVessel, vesselsTracksShowed } = useSelector(state => state.vessel)
   const { selectedBaseLayer } = useSelector(state => state.map)
 
@@ -36,17 +37,13 @@ const VesselSelectedLayer = ({ map }) => {
   }, [isLight])
 
   useEffect(() => {
-    if (map) {
-      layerRef.current.name = LayerProperties.SELECTED_VESSEL.code
-      map.getLayers().push(layerRef.current)
-    }
+    layerRef.current.name = LayerProperties.SELECTED_VESSEL.code
+    monitorfishMap.getLayers().push(layerRef.current)
 
     return () => {
-      if (map) {
-        map.removeLayer(layerRef.current)
-      }
+      monitorfishMap.removeLayer(layerRef.current)
     }
-  }, [map])
+  }, [])
 
   useEffect(() => {
     vectorSourceRef.current?.clear(true)
diff --git a/frontend/src/features/map/layers/Vessel/VesselsLabelsLayer.tsx b/frontend/src/features/map/layers/Vessel/VesselsLabelsLayer.tsx
index 2303ba2350..e55ce3716e 100644
--- a/frontend/src/features/map/layers/Vessel/VesselsLabelsLayer.tsx
+++ b/frontend/src/features/map/layers/Vessel/VesselsLabelsLayer.tsx
@@ -14,6 +14,7 @@ import {
 import { VesselLabelLine } from '../../../../domain/entities/vesselLabelLine'
 import { useIsSuperUser } from '../../../../hooks/authorization/useIsSuperUser'
 import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
+import { monitorfishMap } from '../../monitorfishMap'
 import { VesselLabelOverlay } from '../../overlays/VesselLabelOverlay'
 import { getLabelLineStyle } from '../styles/labelLine.style'
 
@@ -25,7 +26,7 @@ const MAX_LABELS_DISPLAYED = 200
 const MAX_LABELS_DISPLAYED_IN_PREVIEW = 400
 const NOT_FOUND = -1
 
-export function VesselsLabelsLayer({ map, mapMovingAndZoomEvent }) {
+export function VesselsLabelsLayer({ mapMovingAndZoomEvent }) {
   const throttleDuration = 250 // ms
 
   const isSuperUser = useIsSuperUser()
@@ -93,17 +94,13 @@ export function VesselsLabelsLayer({ map, mapMovingAndZoomEvent }) {
   }, [getVectorSource])
 
   useEffect(() => {
-    if (map) {
-      getLayer().name = LayerProperties.VESSELS_LABEL.code
-      map.getLayers().push(getLayer())
-    }
+    getLayer().name = LayerProperties.VESSELS_LABEL.code
+    monitorfishMap.getLayers().push(getLayer())
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [map, getLayer])
+  }, [getLayer])
 
   const moveVesselLabelLine = useCallback(
     (featureId, fromCoordinates, toCoordinates, offset, opacity) => {
@@ -160,7 +157,7 @@ export function VesselsLabelsLayer({ map, mapMovingAndZoomEvent }) {
           featureId={featureId}
           flagState={identity.flagState}
           identity={identity}
-          map={map}
+          map={monitorfishMap}
           moveLine={moveVesselLabelLine}
           offset={offset}
           opacity={opacity}
@@ -177,7 +174,6 @@ export function VesselsLabelsLayer({ map, mapMovingAndZoomEvent }) {
       setCurrentLabels(labels)
     }
   }, [
-    map,
     previewFilteredVesselsMode,
     featuresAndLabels,
     vesselToCoordinates,
@@ -197,12 +193,14 @@ export function VesselsLabelsLayer({ map, mapMovingAndZoomEvent }) {
     const { vesselIsHidden, vesselIsOpacityReduced } =
       getVesselLastPositionVisibilityDates(vesselsLastPositionVisibility)
 
-    const vesselsLayer = map
+    const vesselsLayer = monitorfishMap
       .getLayers()
       .getArray()
+      // @ts-ignore
       ?.find(olLayer => olLayer.name === LayerProperties.VESSELS_POINTS.code)
+      // @ts-ignore
       ?.getSource()
-    vesselsLayer?.current?.forEachFeatureInExtent(map.getView().calculateExtent(), vesselFeature => {
+    vesselsLayer?.current?.forEachFeatureInExtent(monitorfishMap.getView().calculateExtent(), vesselFeature => {
       const { vesselProperties } = vesselFeature as VesselLastPositionFeature
       const opacity = Vessel.getVesselOpacity(vesselProperties.dateTime, vesselIsHidden, vesselIsOpacityReduced)
       const labelLineFeatureId = VesselLabelLine.getFeatureId(vesselProperties)
@@ -211,7 +209,7 @@ export function VesselsLabelsLayer({ map, mapMovingAndZoomEvent }) {
         feature.set(VesselLabelLine.opacityProperty, opacity)
       }
     })
-  }, [map, vesselsLastPositionVisibility])
+  }, [vesselsLastPositionVisibility])
 
   useEffect(() => {
     if (isThrottled.current || !vessels) {
@@ -294,12 +292,14 @@ export function VesselsLabelsLayer({ map, mapMovingAndZoomEvent }) {
         return
       }
 
-      const vesselsLayer = map
+      const vesselsLayer = monitorfishMap
         .getLayers()
         .getArray()
+        // @ts-ignore
         ?.find(olLayer => olLayer.name === LayerProperties.VESSELS_POINTS.code)
+        // @ts-ignore
         ?.getSource()
-      const featuresInExtent = vesselsLayer?.getFeaturesInExtent(map.getView().calculateExtent()) || []
+      const featuresInExtent = vesselsLayer?.getFeaturesInExtent(monitorfishMap.getView().calculateExtent()) || []
 
       const filterShowed = filters.find(filter => filter.showed)
       const isFiltered = filterShowed && nonFilteredVesselsAreHidden // && filteredVesselsFeaturesUids?.length FIXME: if filterShowed, is it really necessary to check filteredVesselsFeaturesUids ?
@@ -336,7 +336,6 @@ export function VesselsLabelsLayer({ map, mapMovingAndZoomEvent }) {
     }, throttleDuration)
   }, [
     isSuperUser,
-    map,
     vessels,
     selectedVessel,
     mapMovingAndZoomEvent,
@@ -362,11 +361,12 @@ export function VesselsLabelsLayer({ map, mapMovingAndZoomEvent }) {
   }, [riskFactorShowedOnMap])
 
   useEffect(() => {
-    const currentZoom = map.getView().getZoom().toFixed(2)
+    const currentZoom = monitorfishMap.getView().getZoom()?.toFixed(2)
     if (currentZoom !== previousMapZoom.current) {
+      // @ts-ignore
       previousMapZoom.current = currentZoom
     }
-  }, [map, mapMovingAndZoomEvent])
+  }, [mapMovingAndZoomEvent])
 
   return (
     <>
diff --git a/frontend/src/features/map/layers/Vessel/VesselsLayer/index.tsx b/frontend/src/features/map/layers/Vessel/VesselsLayer/index.tsx
index e1afc4ec22..26bb03def6 100644
--- a/frontend/src/features/map/layers/Vessel/VesselsLayer/index.tsx
+++ b/frontend/src/features/map/layers/Vessel/VesselsLayer/index.tsx
@@ -12,12 +12,13 @@ import { useMainAppSelector } from '../../../../../hooks/useMainAppSelector'
 import { theme } from '../../../../../ui/theme'
 import { booleanToInt, customHexToRGB } from '../../../../../utils'
 import { applyFilterToVessels } from '../../../../Vessel/useCases/applyFilterToVessels'
+import { monitorfishMap } from '../../../monitorfishMap'
 import { getWebGLVesselStyle } from '../style'
 
 import type { VesselLastPositionFeature } from '../../../../../domain/entities/vessel/types'
 import type { WebGLPointsLayerWithName } from '../../../../../domain/types/layer'
 
-function UnmemoizedVesselsLayer({ map }) {
+function UnmemoizedVesselsLayer() {
   const dispatch = useMainAppDispatch()
   const { areVesselsDisplayed } = useMainAppSelector(state => state.displayedComponent)
 
@@ -51,103 +52,94 @@ function UnmemoizedVesselsLayer({ map }) {
   }
 
   useEffect(() => {
-    if (map) {
-      if (vesselWebGLPointsLayerRef.current) {
-        map.removeLayer(vesselWebGLPointsLayerRef.current)
-        vesselWebGLPointsLayerRef.current?.dispose()
-      }
-
-      // styles derived from state
-      const isLight = Vessel.iconIsLight(selectedBaseLayer)
-      const { vesselIsHidden, vesselIsOpacityReduced } =
-        getVesselLastPositionVisibilityDates(vesselsLastPositionVisibility)
-      const filterColorRGBArray = customHexToRGB(filterColor || isLight ? theme.color.lightGray : COLORS.charcoal)
-      const initStyles = {
-        filterColorBlue: filterColorRGBArray[2],
-        filterColorGreen: filterColorRGBArray[1],
-        filterColorRed: filterColorRGBArray[0],
-        hideNonSelectedVessels: false,
-        hideVesselsAtPort: false,
-        isLight,
-        nonFilteredVesselsAreHidden,
-        previewFilteredVesselsMode,
-        vesselIsHiddenTimeThreshold: vesselIsHidden.getTime(),
-        vesselIsOpacityReducedTimeThreshold: vesselIsOpacityReduced.getTime()
-      }
-      style.current = getWebGLVesselStyle(initStyles)
-
-      const vesselsVectorLayer = new WebGLPointsLayer({
-        className: LayerProperties.VESSELS_POINTS.code,
-        source: getVesselsVectorSource(),
-        style: style.current,
-        zIndex: LayerProperties.VESSELS_POINTS.zIndex
-      }) as WebGLPointsLayerWithName
-      vesselsVectorLayer.name = LayerProperties.VESSELS_POINTS.code
-
-      map.getLayers().push(vesselsVectorLayer)
-      vesselWebGLPointsLayerRef.current = vesselsVectorLayer
+    // styles derived from state
+    const isLight = Vessel.iconIsLight(selectedBaseLayer)
+    const { vesselIsHidden, vesselIsOpacityReduced } =
+      getVesselLastPositionVisibilityDates(vesselsLastPositionVisibility)
+    const filterColorRGBArray = customHexToRGB(filterColor || isLight ? theme.color.lightGray : COLORS.charcoal)
+    const initStyles = {
+      filterColorBlue: filterColorRGBArray[2],
+      filterColorGreen: filterColorRGBArray[1],
+      filterColorRed: filterColorRGBArray[0],
+      hideNonSelectedVessels: false,
+      hideVesselsAtPort: false,
+      isLight,
+      nonFilteredVesselsAreHidden,
+      previewFilteredVesselsMode,
+      vesselIsHiddenTimeThreshold: vesselIsHidden.getTime(),
+      vesselIsOpacityReducedTimeThreshold: vesselIsOpacityReduced.getTime()
     }
+    style.current = getWebGLVesselStyle(initStyles)
+
+    const vesselsVectorLayer = new WebGLPointsLayer({
+      className: LayerProperties.VESSELS_POINTS.code,
+      source: getVesselsVectorSource(),
+      style: style.current,
+      zIndex: LayerProperties.VESSELS_POINTS.zIndex
+    }) as WebGLPointsLayerWithName
+    vesselsVectorLayer.name = LayerProperties.VESSELS_POINTS.code
+    vesselWebGLPointsLayerRef.current = vesselsVectorLayer
+
+    monitorfishMap.getLayers().push(vesselsVectorLayer)
 
     return () => {
-      if (map && vesselWebGLPointsLayerRef.current) {
-        map.removeLayer(vesselWebGLPointsLayerRef.current)
-        vesselWebGLPointsLayerRef.current?.dispose()
-      }
+      // @ts-ignore
+      monitorfishMap.removeLayer(vesselWebGLPointsLayerRef.current)
+      vesselWebGLPointsLayerRef.current?.dispose()
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map])
+  }, [])
 
   useEffect(() => {
     if (!areVesselsDisplayed) {
-      vesselWebGLPointsLayerRef.current?.setVisible(false)
+      // We can't use BaseLayer.setVisible() as it makes the drawing to crash
+      vesselWebGLPointsLayerRef.current?.setOpacity(0)
 
       return
     }
 
-    vesselWebGLPointsLayerRef.current?.setVisible(true)
+    vesselWebGLPointsLayerRef.current?.setOpacity(1)
   }, [areVesselsDisplayed])
 
   useEffect(() => {
-    if (map) {
-      const features = vessels.map(vessel => {
-        const propertiesUsedForStyling = {
-          coordinates: vessel.coordinates,
-          course: vessel.course,
-          filterPreview: vessel.filterPreview,
-          hasBeaconMalfunction: vessel.hasBeaconMalfunction,
-          isAtPort: vessel.isAtPort,
-          isFiltered: vessel.isFiltered,
-          lastPositionSentAt: vessel.lastPositionSentAt,
-          speed: vessel.speed
-        }
-
-        const feature = new Feature({
-          vesselFeatureId: vessel.vesselFeatureId,
-          ...propertiesUsedForStyling,
-          geometry: new Point(vessel.coordinates)
-        }) as VesselLastPositionFeature
-        feature.setId(vessel.vesselFeatureId)
-        feature.vesselProperties = vessel.vesselProperties
-
-        return feature
-      })
-
-      getVesselsVectorSource()?.clear(true)
-      getVesselsVectorSource()?.addFeatures(features)
-
-      if (filterColor) {
-        const rgb = customHexToRGB(filterColor)
-
-        style.current.variables = {
-          ...style.current.variables,
-          filterColorBlue: rgb[2],
-          filterColorGreen: rgb[1],
-          filterColorRed: rgb[0]
-        }
+    const features = vessels.map(vessel => {
+      const propertiesUsedForStyling = {
+        coordinates: vessel.coordinates,
+        course: vessel.course,
+        filterPreview: vessel.filterPreview,
+        hasBeaconMalfunction: vessel.hasBeaconMalfunction,
+        isAtPort: vessel.isAtPort,
+        isFiltered: vessel.isFiltered,
+        lastPositionSentAt: vessel.lastPositionSentAt,
+        speed: vessel.speed
+      }
+
+      const feature = new Feature({
+        vesselFeatureId: vessel.vesselFeatureId,
+        ...propertiesUsedForStyling,
+        geometry: new Point(vessel.coordinates)
+      }) as VesselLastPositionFeature
+      feature.setId(vessel.vesselFeatureId)
+      feature.vesselProperties = vessel.vesselProperties
+
+      return feature
+    })
+
+    getVesselsVectorSource()?.clear(true)
+    getVesselsVectorSource()?.addFeatures(features)
+
+    if (filterColor) {
+      const rgb = customHexToRGB(filterColor)
+
+      style.current.variables = {
+        ...style.current.variables,
+        filterColorBlue: rgb[2],
+        filterColorGreen: rgb[1],
+        filterColorRed: rgb[0]
       }
     }
     // eslint-disable-next-line react-hooks/exhaustive-deps
-  }, [map, vessels])
+  }, [vessels])
 
   // styles
   useEffect(() => {
diff --git a/frontend/src/features/map/layers/Vessel/VesselsTracksLayer.tsx b/frontend/src/features/map/layers/Vessel/VesselsTracksLayer.tsx
index 5dca38e178..e8df7982e9 100644
--- a/frontend/src/features/map/layers/Vessel/VesselsTracksLayer.tsx
+++ b/frontend/src/features/map/layers/Vessel/VesselsTracksLayer.tsx
@@ -24,6 +24,7 @@ import { useMainAppDispatch } from '../../../../hooks/useMainAppDispatch'
 import { useMainAppSelector } from '../../../../hooks/useMainAppSelector'
 import { logbookActions } from '../../../Logbook/slice'
 import { getFishingActivityFeatureOnTrackLine } from '../../../Logbook/utils'
+import { monitorfishMap } from '../../monitorfishMap'
 import CloseVesselTrackOverlay from '../../overlays/CloseVesselTrackOverlay'
 import FishingActivityOverlay from '../../overlays/FishingActivityOverlay'
 
@@ -32,10 +33,7 @@ import type { VectorLayerWithName } from '../../../../domain/types/layer'
 import type { FishingActivityFeatureIdAndCoordinates } from '../../../Logbook/types'
 import type { Coordinate } from 'ol/coordinate'
 
-type VesselsTracksLayerProps = {
-  map?: any
-}
-function VesselsTracksLayer({ map }: VesselsTracksLayerProps) {
+function VesselsTracksLayer() {
   const dispatch = useMainAppDispatch()
   const { highlightedVesselTrackPosition, selectedVessel, selectedVesselPositions, vesselsTracksShowed } =
     useMainAppSelector(state => state.vessel)
@@ -91,21 +89,17 @@ function VesselsTracksLayer({ map }: VesselsTracksLayerProps) {
   }, [getVectorSource])
 
   useEffect(() => {
-    if (map) {
-      getLayer().name = LayerProperties.VESSEL_TRACK.code
-      map.getLayers().push(getLayer())
-    }
+    getLayer().name = LayerProperties.VESSEL_TRACK.code
+    monitorfishMap.getLayers().push(getLayer())
 
     return () => {
-      if (map) {
-        map.removeLayer(getLayer())
-      }
+      monitorfishMap.removeLayer(getLayer())
     }
-  }, [map, getLayer])
+  }, [getLayer])
 
   useEffect(() => {
     function showSelectedVesselTrack() {
-      if (map && selectedVessel && selectedVesselPositions?.length) {
+      if (selectedVessel && selectedVesselPositions?.length) {
         const features = getVectorSource().getFeatures()
         const vesselCompositeIdentifier = getVesselCompositeIdentifier(selectedVessel)
         removeVesselTrackFeatures(features, getVectorSource(), vesselCompositeIdentifier)
@@ -131,7 +125,7 @@ function VesselsTracksLayer({ map }: VesselsTracksLayerProps) {
     }
 
     showSelectedVesselTrack()
-  }, [dispatch, doNotAnimate, map, selectedVessel, selectedVesselPositions, getVectorSource])
+  }, [dispatch, doNotAnimate, selectedVessel, selectedVesselPositions, getVectorSource])
 
   useEffect(() => {
     function hidePreviouslySelectedVessel() {
@@ -273,7 +267,7 @@ function VesselsTracksLayer({ map }: VesselsTracksLayerProps) {
         <CloseVesselTrackOverlay
           key={vesselTrack?.vesselCompositeIdentifier}
           coordinates={vesselTrack?.coordinates}
-          map={map}
+          map={monitorfishMap}
           vesselCompositeIdentifier={vesselTrack?.vesselCompositeIdentifier}
         />
       ))}
@@ -284,7 +278,7 @@ function VesselsTracksLayer({ map }: VesselsTracksLayerProps) {
           id={fishingActivity.id}
           isDeleted={fishingActivity.isDeleted}
           isNotAcknowledged={fishingActivity.isNotAcknowledged}
-          map={map}
+          map={monitorfishMap}
           name={fishingActivity.name}
         />
       ))}