Reordering layers when the zoom level is updated.

svgmap/src/components/map/TiledLayersConductor.tsx

@@ -29,9 +29,13 @@ const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
       : props.numberOfZoomLevels;
 
   const layers = [];
+  const zoomLevel = Math.min(
+    Math.max(Math.round(Math.log2(props.zoom)), 0),
+    numberOfZoomLevels - 1
+  );
 
-  for (let i = 0; i < numberOfZoomLevels; i++) {
-    layers.push(
+  const getTiledLayer = (i: number, isActive: boolean) => {
+    return (
       <TiledLayer
         key={`layer${i}`}
         height={props.height * 2 ** i}
@@ -41,18 +45,21 @@ const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
         layerZoom={2 ** -i}
         tileSize={256}
         nbTiles={nbTiles * 2 ** i}
-        active={
-          numberOfZoomLevels === 1
-            ? true
-            : i === 0
-            ? props.zoom < 2 ** 0.5
-            : i === numberOfZoomLevels - 1
-            ? props.zoom >= 2 ** (i - 0.5)
-            : props.zoom < 2 ** (i + 0.5) && props.zoom >= 2 ** (i - 0.5)
-        }
+        active={isActive}
       />
     );
+  };
+
+  // First (ie last) dispay layers with less details (ascending order)
+  for (let i = 0; i < zoomLevel; i++) {
+    layers.push(getTiledLayer(i, false));
   }
+  // then dispay layers with more details (descending order)
+  for (let i = numberOfZoomLevels - 1; i > zoomLevel; i--) {
+    layers.push(getTiledLayer(i, false));
+  }
+  // And then, of course, the active one
+  layers.push(getTiledLayer(zoomLevel, true));
 
   return <>{layers}</>;
 };