更新 react-leaflet 中的 tileLayer url

Question

So I got this code running to render a leaflet ok, trying to replace the url whenever the colorMode changes is the challenge here.

useEffect is triggered ok displaying the correct variable but I can't update that TileLayer in any way.

 export const Map = () => { const { colorMode } = useColorMode(); let state = { center: { lat: 51.505, lng: -0.09 }, zoom: 13 }; const colorModeUrl = ['https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', 'https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png'] useEffect(() => { console.log(colorMode); }, [colorMode]); return ( <MapContainer center={state.center} zoom={state.zoom} style={{ height: '100%' }}> <TileLayer url={colorMode === 'light' ? colorModeUrl[0] : colorModeUrl[1]} /> </MapContainer> ) }

Answer 1

Looking at the TileLayer documentation , the url prop is not mutable. After the initial render the component will not update if the prop is changed:

However, you can add a ref to the layer and update the url that way

export const Map = () => {
  const ref = useRef(null);
  const state = { center: { lat: 51.505, lng: -0.09 }, zoom: 13 };
  const { colorMode } = useColorMode();

  const light = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
  const dark =
 "https://tiles.stadiamaps.com/tiles/alidade_smooth_dark/{z}/{x}/{y}{r}.png";

  };

  useEffect(() => {
    if (ref.current) {
      ref.current.setUrl(colorMode === "light" ? light : dark);
    }
  }, [colorMode]);

  return (
    <div>
      <MapContainer
        center={state.center}
        zoom={state.zoom}
        style={{ height: "100%" }}
      >
        <TileLayer ref={ref} url={colorMode === "light" ? light : dark} />
      </MapContainer>
    </div>
  );
};

https://codesandbox.io/s/react-leaflet-forked-1534x?file=/src/index.js:0-1158

Answer 2

I encountered a similar issue today trying to change the TileLayer using react-leaflet v4. As mentioned in the accepted answer, the immutability of the TileLayer url attribute is the problem. My dead-simple workaround was to pass a "key" attribute to TileLayer that will change whenever a new tile source is commanded. This will force a remount of the TileLayer component.

Hopefully this isn't subtly dangerous or an antipattern, but it seems to work with minimal complexity.