The initial zoom level should be the one for the medium layer.

svgmap/src/components/map/TiledLayersConductor.tsx

@@ -20,9 +20,6 @@ interface TiledLayerConductorProperties {
 const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
   props: TiledLayerConductorProperties
 ) => {
-  const nbTiles =
-    Math.ceil((Math.max(props.width, props.height) * 2) / 256) + 2;
-
   const numberOfZoomLevels =
     props.numberOfZoomLevels === undefined
       ? 1
@@ -31,25 +28,34 @@ const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
       : props.numberOfZoomLevels;
 
   const layers = [];
+
+  const safetyZoomLevels = Math.floor(numberOfZoomLevels / 2);
+
+  const nbTiles =
+    Math.ceil(
+      (Math.max(props.width, props.height) * 2 ** safetyZoomLevels) / 256
+    ) + 2;
+
   const activeZoomLevel = Math.min(
-    Math.max(Math.round(Math.log2(props.zoom)), 0),
+    Math.max(Math.round(Math.log2(props.zoom)) + safetyZoomLevels, 0),
     numberOfZoomLevels - 1
   );
 
   const getTiledLayer = (zoomLevel: number, isActive: boolean) => {
+    const zoom = 2 ** (zoomLevel - safetyZoomLevels);
     return (
       <TiledLayer
         key={`layer${zoomLevel + props.baseZoomLevel}`}
-        height={props.height * 2 ** zoomLevel}
+        height={props.height * zoom}
-        width={props.width * 2 ** zoomLevel}
+        width={props.width * zoom}
         shift={{
-          x: props.shift.x * 2 ** zoomLevel,
+          x: props.shift.x * zoom,
-          y: props.shift.y * 2 ** zoomLevel,
+          y: props.shift.y * zoom,
         }}
         zoom={props.zoom}
-        layerZoom={2 ** -zoomLevel}
+        layerZoom={1 / zoom}
         tileSize={256}
-        nbTiles={nbTiles * 2 ** zoomLevel}
+        nbTiles={nbTiles * zoom}
         active={isActive}
       />
     );