From c69c193d7ea63745a22bb9a66ec491cd87fb8c6d Mon Sep 17 00:00:00 2001
From: evlist <vdv@dyomedea.com>
Date: Sat, 15 Oct 2022 17:30:41 +0200
Subject: [PATCH] Reordering layers when the zoom level is updated.

---
 .../components/map/TiledLayersConductor.tsx   | 29 ++++++++++++-------
 1 file changed, 18 insertions(+), 11 deletions(-)

diff --git a/svgmap/src/components/map/TiledLayersConductor.tsx b/svgmap/src/components/map/TiledLayersConductor.tsx
index 6fa6100..859dc9e 100644
--- a/svgmap/src/components/map/TiledLayersConductor.tsx
+++ b/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}</>;
 };