Support changing url in TileLayer (#1047)

* Support changing `url` in TileLayer * fix lint
PaulLeCam · Nov 27, 2022 · 345d206 · 345d206
1 parent 5d755bd
commit 345d206
Show file tree

Hide file tree

Showing 5 changed files with 168 additions and 3 deletions.
diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts
@@ -50,3 +50,4 @@ export {
 export { type MediaOverlayProps, updateMediaOverlay } from './media-overlay.js'
 export { withPane } from './pane.js'
 export { type PathProps, createPathHook, usePathOptions } from './path.js'
+export { updateTileLayer } from './tile-layer.js'
diff --git a/packages/core/src/tile-layer.ts b/packages/core/src/tile-layer.ts
@@ -0,0 +1,18 @@
+import type { TileLayer, TileLayerOptions } from 'leaflet'
+import { updateGridLayer } from './grid-layer'
+
+interface ReactLeafletTileLayerOptions extends TileLayerOptions {
+  url: string
+}
+
+export function updateTileLayer<
+  E extends TileLayer,
+  P extends ReactLeafletTileLayerOptions,
+>(layer: E, props: P, prevProps: P) {
+  updateGridLayer(layer, props, prevProps)
+
+  const { url } = props
+  if (url != null && url !== prevProps.url) {
+    layer.setUrl(url)
+  }
+}
diff --git a/packages/react-leaflet/__tests__/TileLayer.tsx b/packages/react-leaflet/__tests__/TileLayer.tsx
@@ -5,11 +5,21 @@ import { MapContainer, TileLayer } from '../src'
 
 describe('TileLayer', () => {
   test('renders', () => {
-    const { container } = render(
+    const { container, rerender } = render(
       <MapContainer center={[0, 0]} zoom={10}>
         <TileLayer attribution="tiles attribution" url="http://localhost" />
       </MapContainer>,
     )
     expect(container).toMatchSnapshot()
+
+    rerender(
+      <MapContainer center={[0, 0]} zoom={10}>
+        <TileLayer
+          attribution="tiles attribution"
+          url="http://localhost?with_parameter=changed"
+        />
+      </MapContainer>,
+    )
+    expect(container).toMatchSnapshot()
   })
 })
diff --git a/packages/react-leaflet/__tests__/__snapshots__/TileLayer.tsx.snap b/packages/react-leaflet/__tests__/__snapshots__/TileLayer.tsx.snap
@@ -135,3 +135,139 @@ exports[`TileLayer renders 1`] = `
   </div>
 </div>
 `;
+
+exports[`TileLayer renders 2`] = `
+<div>
+  <div
+    class="leaflet-container leaflet-touch leaflet-grab leaflet-touch-drag leaflet-touch-zoom"
+    style="position: relative;"
+    tabindex="0"
+  >
+    <div
+      class="leaflet-pane leaflet-map-pane"
+      style="left: 0px; top: 0px;"
+    >
+      <div
+        class="leaflet-pane leaflet-tile-pane"
+      >
+        <div
+          class="leaflet-layer "
+          style="z-index: 1;"
+        >
+          <div
+            class="leaflet-tile-container leaflet-zoom-animated"
+            style="z-index: 18; left: 0px; top: 0px;"
+          >
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="http://localhost?with_parameter=changed"
+              style="width: 256px; height: 256px; left: -256px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="http://localhost?with_parameter=changed"
+              style="width: 256px; height: 256px; left: 0px; top: -256px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="http://localhost?with_parameter=changed"
+              style="width: 256px; height: 256px; left: -256px; top: 0px;"
+            />
+            <img
+              alt=""
+              class="leaflet-tile"
+              src="http://localhost?with_parameter=changed"
+              style="width: 256px; height: 256px; left: 0px; top: 0px;"
+            />
+          </div>
+        </div>
+      </div>
+      <div
+        class="leaflet-pane leaflet-overlay-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-shadow-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-marker-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-tooltip-pane"
+      />
+      <div
+        class="leaflet-pane leaflet-popup-pane"
+      />
+    </div>
+    <div
+      class="leaflet-control-container"
+    >
+      <div
+        class="leaflet-top leaflet-left"
+      >
+        <div
+          class="leaflet-control-zoom leaflet-bar leaflet-control"
+        >
+          <a
+            aria-disabled="false"
+            aria-label="Zoom in"
+            class="leaflet-control-zoom-in"
+            href="#"
+            role="button"
+            title="Zoom in"
+          >
+            <span
+              aria-hidden="true"
+            >
+              +
+            </span>
+          </a>
+          <a
+            aria-disabled="false"
+            aria-label="Zoom out"
+            class="leaflet-control-zoom-out"
+            href="#"
+            role="button"
+            title="Zoom out"
+          >
+            <span
+              aria-hidden="true"
+            >
+              −
+            </span>
+          </a>
+        </div>
+      </div>
+      <div
+        class="leaflet-top leaflet-right"
+      />
+      <div
+        class="leaflet-bottom leaflet-left"
+      />
+      <div
+        class="leaflet-bottom leaflet-right"
+      >
+        <div
+          class="leaflet-control-attribution leaflet-control"
+        >
+          <a
+            href="https://leafletjs.com"
+            title="A JavaScript library for interactive maps"
+          >
+            Leaflet
+          </a>
+           
+          <span
+            aria-hidden="true"
+          >
+            |
+          </span>
+           tiles attribution
+        </div>
+      </div>
+    </div>
+  </div>
+</div>
+`;
diff --git a/packages/react-leaflet/src/TileLayer.tsx b/packages/react-leaflet/src/TileLayer.tsx
@@ -2,7 +2,7 @@ import {
   type LayerProps,
   createElementObject,
   createTileLayerComponent,
-  updateGridLayer,
+  updateTileLayer,
   withPane,
 } from '@react-leaflet/core'
 import { TileLayer as LeafletTileLayer, type TileLayerOptions } from 'leaflet'
@@ -17,4 +17,4 @@ export const TileLayer = createTileLayerComponent<
 >(function createTileLayer({ url, ...options }, context) {
   const layer = new LeafletTileLayer(url, withPane(options, context))
   return createElementObject(layer, context)
-}, updateGridLayer)
+}, updateTileLayer)