Search code examples
leafletreact-leaflet

react-leflet map layer repeating

I have a map, but it repeats. I would like it to stop repeating, and get only one map. How do I do this?

<MapContainer 
    className='h-[700px] w-[700px] float-right mr-10 mt-10'
    center={[51.505, -0.09]} zoom={5} scrollWheelZoom={true}>
    <TileLayer
      noWrap={true}
      url="/allmap.jpg"
    />
  </MapContainer>

enter image description here

Solution

  • I see that you added in the URL a path to image url="/allmap.jpg". as it's an image you can inspect on the TileLayer after it's rendered. see on the right side the class which contains this image as background-image add to that class the following.

    .tile-layer-class  { 
 background-repeat: no-repeat;
 background-size: cover;
}

    UPDATE:

    The problem was that the image was not shown. because there was a style from leaflet.css hide the image to show. you can override that style by using the below class.

    .leaflet-container {
    overflow: unset <= or by using !important as well if that didn't reflect.
}

    The problem is not related to styling at all. what I figured out that the image is not only rendered just one time in the dom but it's gets rendered for 4 images tags. you can inspect the image and you will see that there're 4 img tags in the dom.

    enter image description here

    I think you will need to find out the reason for why there're 4 images rendered in the dom. I tried to be honest to do my best. but I'm not familiar with Next.js