Fixing a bug (the `<g>` element wasn't always available as ref.current in TiledLayer), using a useEffect seems to do the trick.

src/components/map/CurrentLocation.tsx

@@ -16,6 +16,10 @@ export const CurrentLocation: react.FC<CurrentLocationProperties> = (
   props: CurrentLocationProperties
 ) => {
   const [location] = useAtom(locationAtom);
+  console.log(
+    `Rendering CurrentLocation, location:${JSON.stringify(location)}`
+  );
+
   return location !== null ? (
     <Marker
       key='currentLocation'

src/components/map/LayerStack.tsx

@@ -48,6 +48,12 @@ export interface LayerStackProperties {
 export const LayerStack: react.FC<LayerStackProperties> = (
   props: LayerStackProperties
 ) => {
+  console.log(
+    `LayerStack rendering, coordinateSystem: ${JSON.stringify(
+      props.coordinateSystem
+    )}, slippyGraphics: ${props.slippyGraphics}`
+  );
+
   const numberOfTiledLayers =
     props.numberOfTiledLayers === undefined ? 1 : props.numberOfTiledLayers;
 

src/components/map/LiveMap.tsx

@@ -1,4 +1,9 @@
-import react, { JSXElementConstructor, ReactElement, useEffect, useState } from 'react';
+import react, {
+  JSXElementConstructor,
+  ReactElement,
+  useEffect,
+  useState,
+} from 'react';
 import useDimensions from 'react-cool-dimensions';
 
 import { MapScope, Point } from './types';
@@ -61,7 +66,11 @@ export const LiveMap: react.FC<LiveMapProperties> = (
   useEffect(() => {
     setScope(props.scope);
   }, [props.scope]);
-  console.log(`LiveMap rendering: ${JSON.stringify(scope)}`);
+  console.log(
+    `LiveMap rendering, scope: ${JSON.stringify(scope)}, slippyGraphics: ${
+      props.slippyGraphics
+    }`
+  );
   const { observe, width, height } = useDimensions<HTMLDivElement>();
   const transform = (t: Transformation) => {
     const deltaZoom = t.deltaZoom === null ? 1 : t.deltaZoom;

src/components/map/Map.tsx

@@ -25,6 +25,12 @@ export interface MapProperties {
  *
  */
 export const Map: react.FC<MapProperties> = (props: MapProperties) => {
+  console.log(
+    `Map rendering, scope: ${JSON.stringify(props.scope)}, slippyGraphics: ${
+      props.slippyGraphics
+    }`
+  );
+
   const { observe, width, height } = useDimensions<HTMLDivElement>();
 
   const tileProvider = tileProviders[props.scope.tileProvider];

src/components/map/Marker.tsx

@@ -11,6 +11,8 @@ export interface MarkerProperties {
 }
 
 export const Marker: react.FC<MarkerProperties> = (props: MarkerProperties) => {
+  console.log(`Rendering Marker`);
+
   if (
     props.keyObject === undefined ||
     props.zoom === undefined ||

src/components/map/TiledLayer.tsx

@@ -2,10 +2,12 @@ import react, {
   cloneElement,
   JSXElementConstructor,
   ReactElement,
+  useEffect,
   useRef,
+  useState,
 } from 'react';
 import TileSet from './TileSet';
-import { Point, TileKeyObject } from './types';
+import { Point, Rectangle, TileKeyObject } from './types';
 import { CoordinateSystem } from './LiveMap';
 
 export interface TiledLayerProperties {
@@ -40,7 +42,13 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
   props: TiledLayerProperties
 ) => {
   const g = useRef<SVGGElement>(null);
-  var viewPort: any = undefined;
+
+  const [viewPort, setViewPort] = useState<Rectangle>();
+
+  useEffect(() => {
+    console.log(
+      `TiledLayer zoom: ${props.zoom}, useEffect, g.current: ${g.current}`
+    );
     if (
       props.zoom === 256 &&
       g.current !== null &&
@@ -48,17 +56,21 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
       g.current.ownerSVGElement.parentElement !== null
     ) {
       const nearerHTMLParent = g.current.ownerSVGElement.parentElement;
-    viewPort = {
+      setViewPort({
         topLeft: {
           x:
             props.keyObject.x +
             Math.floor(
-            -props.coordinateSystem.shift.x / props.coordinateSystem.zoom / 256
+              -props.coordinateSystem.shift.x /
+                props.coordinateSystem.zoom /
+                256
             ),
           y:
             props.keyObject.y +
             Math.floor(
-            -props.coordinateSystem.shift.y / props.coordinateSystem.zoom / 256
+              -props.coordinateSystem.shift.y /
+                props.coordinateSystem.zoom /
+                256
             ),
         },
         bottomRight: {
@@ -73,14 +85,22 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
           y:
             props.keyObject.y +
             Math.ceil(
-            (-props.coordinateSystem.shift.y + nearerHTMLParent.offsetHeight) /
+              (-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 (
     <>
       <g
@@ -96,16 +116,19 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
           }}
           viewPort={viewPort}
         />
-        {props.slippyGraphics !== undefined && viewPort !== undefined
+        {props.slippyGraphics !== undefined && viewPort !== undefined ? (
-          ? // Slippy graphics (if needed)
+          // Slippy graphics (if needed)
-            props.slippyGraphics.map((slippyGraphic) =>
+          <>
+            {props.slippyGraphics.map((slippyGraphic) =>
               cloneElement(slippyGraphic, {
                 keyObject: props.keyObject,
                 zoom: props.coordinateSystem.zoom,
                 viewPort: viewPort,
               })
-            )
+            )}
-          : null}
+            {console.log('TiledLayer: adding slippyGraphics')},
+          </>
+        ) : null}
       </g>
     </>
   );