Leaflet maxNativeZoom does prevent tiles from un-rendering when maxZoom > maxNativeZoom

[michaelnicol]

Bug report in v4

I am trying to allow a 25x max zoom, but stop the rendering of map tiles at a rendering of 18.

To do this, I use the following code:

import "./styles.css";
import { MapContainer } from "react-leaflet/MapContainer";
import { TileLayer } from "react-leaflet/TileLayer";
import "leaflet/dist/leaflet.css";

export default function App() {
  return (
    <>
      <MapContainer
        center={[51.505, -0.09]}
        zoom={13}
        style={{
          position: "fixed",
          top: 0,
          left: 0,
          height: "100%",
          width: "100%",
          zIndex: 1,
        }}
        maxZoom={25}
      >
        <TileLayer
          url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
          attribution='&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
          maxNativeZoom={18}
        />
      </MapContainer>
    </>
  );
}

You can also find it here: https://codesandbox.io/p/sandbox/leaflettest-f97lpf?file=%2Fsrc%2FApp.js%3A1%2C1-31%2C1

The issue is that when I zoom in past a zoom level of 18, the maxNativeZoom doesn't kick in. It tries to render more tiles and results in a gray region:

The expected behavior is for the tiles to stay rendered, even if the image gets blurry.

[karlvonbonin]

Any fixes here?

[michaelnicol]

None. It's still broken regardless of the map layer I try. It's not optimal considering we have a specific use case in our application where this zoom is required.