diff --git a/src/components/map/TiledLayer.test.tsx b/src/components/map/TiledLayer.test.tsx
index ba02f58..edcd89f 100644
--- a/src/components/map/TiledLayer.test.tsx
+++ b/src/components/map/TiledLayer.test.tsx
@@ -118,6 +118,56 @@ describe('The TiledLayer component ', () => {
     </svg>
   </div>
 </body>
+`);
+  });
+  test('is reinitialized if its key isObject updated', () => {
+    const { baseElement, rerender } = render(
+      <svg>
+        <TiledLayer
+          keyObject={{ provider: 'osm', zoomLevel: 10, x: 5, y: 8 }}
+          viewPort={{ topLeft: { x: 1, y: 2 }, bottomRight: { x: 3, y: 2 } }}
+          tileFactory={fakeTileFactory}
+        />
+      </svg>
+    );
+    rerender(
+      <svg>
+        <TiledLayer
+          keyObject={{ provider: 'osm', zoomLevel: 11, x: 5, y: 8 }}
+          viewPort={{ topLeft: { x: 5, y: 0 }, bottomRight: { x: 5, y: 2 } }}
+          tileFactory={fakeTileFactory}
+        />
+      </svg>
+    );
+    //    screen.debug();
+    expect(baseElement).toMatchInlineSnapshot(`
+<body>
+  <div>
+    <svg>
+      <g
+        transform="translate(5, 0)"
+      >
+        <text>
+          {"provider":"osm","zoomLevel":11,"x":10,"y":5}
+        </text>
+      </g>
+      <g
+        transform="translate(5, 1)"
+      >
+        <text>
+          {"provider":"osm","zoomLevel":11,"x":10,"y":6}
+        </text>
+      </g>
+      <g
+        transform="translate(5, 2)"
+      >
+        <text>
+          {"provider":"osm","zoomLevel":11,"x":10,"y":7}
+        </text>
+      </g>
+    </svg>
+  </div>
+</body>
 `);
   });
 });
diff --git a/src/components/map/TiledLayer.tsx b/src/components/map/TiledLayer.tsx
index d672b8e..5de7820 100644
--- a/src/components/map/TiledLayer.tsx
+++ b/src/components/map/TiledLayer.tsx
@@ -1,5 +1,5 @@
-import react, { useRef } from 'react';
-import { range } from 'lodash';
+import react, { useEffect, useRef } from 'react';
+import { range, isEqual } from 'lodash';
 
 import { Rectangle, TileFactory, TileKeyObject } from './types';
 import tileUri from './uris';
@@ -30,6 +30,11 @@ export const TiledLayer: react.FC<TiledLayerProperties> = (
 ) => {
   console.log(`Rendering TiledLayer: ${JSON.stringify(props)}`);
   const tiles = useRef<any>({});
+  const previousKeyObject = useRef<TileKeyObject>(props.keyObject);
+  if (!isEqual(props.keyObject, previousKeyObject.current)) {
+    previousKeyObject.current = props.keyObject;
+    tiles.current = {};
+  }
 
   range(props.viewPort.topLeft.y, props.viewPort.bottomRight.y + 1).map(
     (row) => {
