27

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?

Ĭsααc tիε βöss
  • 233
  • 2
  • 13
nvvetal
  • 1,756
  • 1
  • 17
  • 19

2 Answers2

62

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
});
Nate Anderson
  • 18,334
  • 18
  • 100
  • 135
Patrick D
  • 6,659
  • 3
  • 43
  • 55
  • 3
    Doesn't work in 1.0, but I won't downvote, just sharing. – catbadger Sep 20 '16 at 18:52
  • 1
    So I haven't used 1.0 yet, but I still see the documentation on the `noWrap` property here: http://leafletjs.com/reference-1.0.0.html#gridlayer-nowrap and it seems as expected. What doesn't work exactly? – Patrick D Sep 22 '16 at 11:19
  • 4
    @PatrickD According to this issue all the way at the bottom https://github.com/Leaflet/Leaflet/issues/2981 in 1.0+ to use `noWrap` you must also set TileLayer `bounds` – Da-Jin Jul 07 '17 at 14:33
4

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>
ivanalejandro0
  • 1,689
  • 13
  • 13