diff --git a/packages/core/src/index.ts b/packages/core/src/index.ts index 95de4dd2..050d93e8 100644 --- 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 new file mode 100644 index 00000000..dbc00383 --- /dev/null +++ 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 index 0a9f14f6..7f02dd0b 100644 --- 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( , ) expect(container).toMatchSnapshot() + + rerender( + + + , + ) + expect(container).toMatchSnapshot() }) }) diff --git a/packages/react-leaflet/__tests__/__snapshots__/TileLayer.tsx.snap b/packages/react-leaflet/__tests__/__snapshots__/TileLayer.tsx.snap index 859790c5..2e801052 100644 --- 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`] = ` `; + +exports[`TileLayer renders 2`] = ` +
+
+
+
+
+
+ + + + +
+
+
+
+
+
+
+
+
+
+ +
+
+
+
+ + Leaflet + + + + tiles attribution +
+
+
+
+
+`; diff --git a/packages/react-leaflet/src/TileLayer.tsx b/packages/react-leaflet/src/TileLayer.tsx index 85b4be59..d7eabea1 100644 --- 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)