Search code examples
next.jsleafletreact-leaflet

Tilelayer url gets rendered 6 times

I have a map layer with a custom picture. The problem is, that it gets rendered 6 times although the Tilelayer component only gets rendered once.

        <MapContainer 
          className='absolute h-[750px] w-[750px] left-[45%] top-[80px] bg-no-repeat bg-cover bg-[#688daa]'
          center={[51.505, -0.09]} zoom={5} scrollWheelZoom={true} noWrap={true}>
        <TileLayer
          noWrap={true}
          url="/allmap.jpg"
        />
        </MapContainer>

output: enter image description here

Solution

  • That is the expected behaviour of a Tile Layer, although it is supposed to be used with an URL template, where some parts of the URL are changed dynamically for proper zoom and x/y position, so that it actually loads different images which form a part of the map, like a puzzle. See also the Leaflet tutorial about zoom levels.

    If your image is not sliced accordingly for such purpose, and you rather have a single big image, you should rather use an Image Overlay instead. You can see an example in this Leaflet tutorial.