Cosmetics

svgmap/src/components/map/TiledLayersConductor.tsx

@@ -31,37 +31,40 @@ const TiledLayerConductor: react.FC<TiledLayerConductorProperties> = (
       : props.numberOfZoomLevels;
 
   const layers = [];
-  const zoomLevel = Math.min(
+  const ActiveZoomLevel = Math.min(
     Math.max(Math.round(Math.log2(props.zoom)), 0),
     numberOfZoomLevels - 1
   );
 
-  const getTiledLayer = (i: number, isActive: boolean) => {
+  const getTiledLayer = (zoomLevel: number, isActive: boolean) => {
     return (
       <TiledLayer
-        key={`layer${i + props.baseZoomLevel}`}
-        height={props.height * 2 ** i}
-        width={props.width * 2 ** i}
-        shift={{ x: props.shift.x * 2 ** i, y: props.shift.y * 2 ** i }}
+        key={`layer${zoomLevel + props.baseZoomLevel}`}
+        height={props.height * 2 ** zoomLevel}
+        width={props.width * 2 ** zoomLevel}
+        shift={{
+          x: props.shift.x * 2 ** zoomLevel,
+          y: props.shift.y * 2 ** zoomLevel,
+        }}
         zoom={props.zoom}
-        layerZoom={2 ** -i}
+        layerZoom={2 ** -zoomLevel}
         tileSize={256}
-        nbTiles={nbTiles * 2 ** i}
+        nbTiles={nbTiles * 2 ** zoomLevel}
         active={isActive}
       />
     );
   };
 
   // First (ie last) dispay layers with less details (ascending order)
-  for (let i = 0; i < zoomLevel; i++) {
+  for (let i = 0; i < ActiveZoomLevel; i++) {
     layers.push(getTiledLayer(i, false));
   }
   // then dispay layers with more details (descending order)
-  for (let i = numberOfZoomLevels - 1; i > zoomLevel; i--) {
+  for (let i = numberOfZoomLevels - 1; i > ActiveZoomLevel; i--) {
     layers.push(getTiledLayer(i, false));
   }
   // And then, of course, the active one
-  layers.push(getTiledLayer(zoomLevel, true));
+  layers.push(getTiledLayer(ActiveZoomLevel, true));
 
   return <>{layers}</>;
 };