Creating a useViewport custom hook to ba used by both `<TiledLayer>` and slippy graphics.

src/components/map/LayerStack.tsx

@@ -59,10 +59,7 @@ export const LayerStack: react.FC<LayerStackProperties> = (
 
   const activeTiledLayer = Math.floor(numberOfTiledLayers / 2);
 
-  const getTiledLayer = (
+  const getTiledLayer = (i: number) => {
-    i: number,
-    slippyGraphics?: typeof props.slippyGraphics
-  ) => {
     const relativeZoomLevel = i - activeTiledLayer;
     const zoom = 2 ** relativeZoomLevel;
     const origin = {
@@ -91,7 +88,6 @@ export const LayerStack: react.FC<LayerStackProperties> = (
         shift={shift}
         zoom={256 / zoom}
         coordinateSystem={props.coordinateSystem}
-        slippyGraphics={slippyGraphics}
       />
     );
   };
@@ -116,8 +112,21 @@ export const LayerStack: react.FC<LayerStackProperties> = (
         }
         {
           // And the active one
-          getTiledLayer(activeTiledLayer, props.slippyGraphics)
+          getTiledLayer(activeTiledLayer)
         }
+        {/* {props.slippyGraphics !== undefined ? (
+          // Slippy graphics (if needed)
+          <>
+            {props.slippyGraphics.map((slippyGraphic) =>
+              cloneElement(slippyGraphic, {
+                keyObject: props.keyObject,
+                zoom: props.coordinateSystem.zoom,
+                viewPort: viewPort,
+              })
+            )}
+            {console.log('TiledLayer: adding slippyGraphics')},
+          </>
+        ) : null} */}
       </g>
     </svg>
   );

src/components/map/TiledLayer.tsx

@@ -9,6 +9,7 @@ import react, {
 import TileSet from './TileSet';
 import { Point, Rectangle, TileKeyObject } from './types';
 import { CoordinateSystem } from './LiveMap';
+import useViewport from './use-viewport';
 
 export interface TiledLayerProperties {
   /**
@@ -27,8 +28,6 @@ export interface TiledLayerProperties {
    * The coordinate system
    */
   coordinateSystem: CoordinateSystem;
-  /** Slippy graphics are non scalable SVG snippets defined by geo locations */
-  slippyGraphics?: ReactElement<any, string | JSXElementConstructor<any>>[];
 }
 
 /**
@@ -43,63 +42,12 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
 ) => {
   const g = useRef<SVGGElement>(null);
 
-  const [viewPort, setViewPort] = useState<Rectangle>();
+  const viewPort = useViewport({ ...props, svgElement: g });
-
-  useEffect(() => {
-    console.log(
-      `TiledLayer zoom: ${props.zoom}, useEffect, g.current: ${g.current}`
-    );
-    if (
-      props.zoom === 256 &&
-      g.current !== null &&
-      g.current.ownerSVGElement !== null &&
-      g.current.ownerSVGElement.parentElement !== null
-    ) {
-      const nearerHTMLParent = g.current.ownerSVGElement.parentElement;
-      setViewPort({
-        topLeft: {
-          x:
-            props.keyObject.x +
-            Math.floor(
-              -props.coordinateSystem.shift.x /
-                props.coordinateSystem.zoom /
-                256
-            ),
-          y:
-            props.keyObject.y +
-            Math.floor(
-              -props.coordinateSystem.shift.y /
-                props.coordinateSystem.zoom /
-                256
-            ),
-        },
-        bottomRight: {
-          x:
-            props.keyObject.x +
-            Math.ceil(
-              (-props.coordinateSystem.shift.x + nearerHTMLParent.offsetWidth) /
-                props.coordinateSystem.zoom /
-                256
-            ) -
-            1,
-          y:
-            props.keyObject.y +
-            Math.ceil(
-              (-props.coordinateSystem.shift.y +
-                nearerHTMLParent.offsetHeight) /
-                props.coordinateSystem.zoom /
-                256
-            ) -
-            1,
-        },
-      });
-    }
-  }, [props]);
 
   console.log(
     `Rendering TiledLayer, zoom: ${props.zoom}, viewPort: ${JSON.stringify(
       viewPort
-    )}, slippyGraphics: ${props.slippyGraphics}`
+    )}`
   );
   return (
     <>
@@ -116,19 +64,6 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
           }}
           viewPort={viewPort}
         />
-        {props.slippyGraphics !== undefined && viewPort !== undefined ? (
-          // Slippy graphics (if needed)
-          <>
-            {props.slippyGraphics.map((slippyGraphic) =>
-              cloneElement(slippyGraphic, {
-                keyObject: props.keyObject,
-                zoom: props.coordinateSystem.zoom,
-                viewPort: viewPort,
-              })
-            )}
-            {console.log('TiledLayer: adding slippyGraphics')},
-          </>
-        ) : null}
       </g>
     </>
   );

src/components/map/use-viewport.ts

@@ -0,0 +1,56 @@
+import { RefObject, useEffect, useRef, useState } from 'react';
+import { CoordinateSystem } from './LiveMap';
+import { Rectangle, TileKeyObject } from './types';
+
+const useViewport = (props: {
+  keyObject: TileKeyObject;
+  coordinateSystem: CoordinateSystem;
+  zoom: number;
+  svgElement: RefObject<SVGGElement>;
+}) => {
+  const { keyObject, coordinateSystem, zoom, svgElement } = props;
+  const [viewPort, setViewPort] = useState<Rectangle>();
+  useEffect(() => {
+    console.log(
+      `TiledLayer zoom: ${zoom}, useEffect, g.current: ${svgElement.current}`
+    );
+    if (
+      zoom === 256 &&
+      svgElement.current !== null &&
+      svgElement.current.ownerSVGElement !== null &&
+      svgElement.current.ownerSVGElement.parentElement !== null
+    ) {
+      const nearerHTMLParent = svgElement.current.ownerSVGElement.parentElement;
+      setViewPort({
+        topLeft: {
+          x:
+            keyObject.x +
+            Math.floor(-coordinateSystem.shift.x / coordinateSystem.zoom / 256),
+          y:
+            keyObject.y +
+            Math.floor(-coordinateSystem.shift.y / coordinateSystem.zoom / 256),
+        },
+        bottomRight: {
+          x:
+            keyObject.x +
+            Math.ceil(
+              (-coordinateSystem.shift.x + nearerHTMLParent.offsetWidth) /
+                coordinateSystem.zoom /
+                256
+            ) -
+            1,
+          y:
+            keyObject.y +
+            Math.ceil(
+              (-coordinateSystem.shift.y + nearerHTMLParent.offsetHeight) /
+                coordinateSystem.zoom /
+                256
+            ) -
+            1,
+        },
+      });
+    }
+  }, [props.keyObject, props.coordinateSystem, props.zoom]);
+  return viewPort;
+};
+export default useViewport;