leaflet.js disable duplicated world maps

Question

We need to disable duplicated world maps at the left and right side of the main world map, which is showing by default. Problem is that we need exact zoom level there and sometimes leaflet showing duplicates... Is it possible to remove duplicates at all?

Answer 1

If you use react-leafet you can set this prop in TileLayer component:

<MapContainer
  center={{ lat: 51.505, lng: -0.09 }}
  zoom={5}
  style={mapStyle}
  scrollWheelZoom={true}
>
  <TileLayer
    noWrap={true}
    url="https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png"
  />
</MapContainer>

Answer 2

You will disable the noWrap property of your TiledLayer (which extends GridLayer). Documentation here

var layer = new L.tileLayer("http://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
    noWrap: true
});