diff --git a/src/components/OpenLayersMap.tsx b/src/components/OpenLayersMap.tsx
index 31cd166..dbfe8e8 100644
--- a/src/components/OpenLayersMap.tsx
+++ b/src/components/OpenLayersMap.tsx
@@ -101,7 +101,7 @@ export function OpenLayersMap({
     { id: string; flipped: boolean }[]
   >([]);
 
-  const { activeBaselayer } = baselayersState;
+  const { activeBaselayer, internalBaselayers } = baselayersState;
 
   /**
    * Handler fires when user changes map layers. If the units of the new
@@ -185,30 +185,30 @@ export function OpenLayersMap({
     onBaselayerChange(baselayer.id, 'goForward', baselayer.flipped);
   }, [onBaselayerChange, forwardHistoryStack]);
 
-  const activeInternalTileLayer = useMemo(() => {
-    if (assertInternalBaselayer(activeBaselayer)) {
-      const layer = activeBaselayer;
-      return new TileLayer({
-        properties: { id: 'baselayer-' + layer.layer_id },
-        source: new XYZ({
-          url: `${SERVICE_URL}/maps/${layer.layer_id}/{z}/{-y}/{x}/tile.png?cmap=${layer.cmap}&vmin=${layer.isLogScale ? Math.pow(10, layer.vmin) : layer.vmin}&vmax=${layer.isLogScale ? Math.pow(10, layer.vmax) : layer.vmax}&flip=${flipTiles}&log_norm=${layer.isLogScale}&abs=${layer.isAbsoluteValue}`,
-          tileGrid: new TileGrid({
-            extent: [-180, -90, 180, 90],
-            origin: [-180, 90],
-            tileSize: layer.tile_size,
-            resolutions: getBaselayerResolutions(
-              180,
-              layer.tile_size,
-              layer.number_of_levels - 1
-            ),
+  const tileLayers = useMemo(() => {
+    return internalBaselayers?.map(
+      (layer) =>
+        new TileLayer({
+          properties: { id: 'baselayer-' + layer.layer_id },
+          source: new XYZ({
+            url: `${SERVICE_URL}/maps/${layer.layer_id}/{z}/{-y}/{x}/tile.png?cmap=${layer.cmap}&vmin=${layer.isLogScale ? Math.pow(10, layer.vmin) : layer.vmin}&vmax=${layer.isLogScale ? Math.pow(10, layer.vmax) : layer.vmax}&flip=${flipTiles}&log_norm=${layer.isLogScale}&abs=${layer.isAbsoluteValue}`,
+            tileGrid: new TileGrid({
+              extent: [-180, -90, 180, 90],
+              origin: [-180, 90],
+              tileSize: layer.tile_size,
+              resolutions: getBaselayerResolutions(
+                180,
+                layer.tile_size,
+                layer.number_of_levels - 1
+              ),
+            }),
+            interpolate: false,
+            projection: 'EPSG:4326',
+            tilePixelRatio: layer.tile_size / 256,
           }),
-          interpolate: false,
-          projection: 'EPSG:4326',
-          tilePixelRatio: layer.tile_size / 256,
-        }),
-      });
-    }
-  }, [flipTiles, activeBaselayer]);
+        })
+    );
+  }, [internalBaselayers, flipTiles]);
 
   const externalTileLayers = useMemo(() => {
     return EXTERNAL_BASELAYERS.map((b) => {
@@ -388,8 +388,11 @@ export function OpenLayersMap({
           mapRef.current?.removeLayer(layer);
         }
       });
-      if (assertInternalBaselayer(activeBaselayer) && activeInternalTileLayer) {
-        mapRef.current.addLayer(activeInternalTileLayer);
+      if (assertInternalBaselayer(activeBaselayer)) {
+        const activeLayer = tileLayers!.find(
+          (t) => t.get('id') === 'baselayer-' + activeBaselayer!.layer_id
+        )!;
+        mapRef.current.addLayer(activeLayer);
       } else {
         const externalBaselayer = EXTERNAL_BASELAYERS.find(
           (b) => b.layer_id === activeBaselayer.layer_id
@@ -403,7 +406,7 @@ export function OpenLayersMap({
         mapRef.current.addLayer(activeLayer);
       }
     }
-  }, [activeBaselayer, activeInternalTileLayer, externalTileLayers]);
+  }, [activeBaselayer, tileLayers, externalTileLayers]);
 
   /**
    * Add keyboard support for switching baselayers