Leafletjs show a single wrapped map

1
votes

I want to show a single world map and wrap it around so that each area is shown only once on the screen. Please refer the fiddle http://jsfiddle.net/8m13d6vs/

var osmUrl = 'http://{s}.tile.osm.org/{z}/{x}/{y}.png',
    osm = L.tileLayer(osmUrl, {
            noWrap: false,
            attribution: "<a href='http://openstreetmap.org'>OpenStreetMap</a>"
          });

var map = L.map('map').setView([0, 0], 1).addLayer(osm);

In the above fiddle, wrap is on, but the world map is duplicated. I want a single world map, and on left/right mouse drag, it should wrap around. It should be responsive to the area as well. Is there any way to achieve this? Hope my problem statement is understandable.

2
leafletopenstreetmap

2 Answers

1
votes

There's the Leaflet worldCopyJump option:

var map = L.map('map', {worldCopyJump: true}).setView([0, 0], 1).addLayer(osm);

It defaults to false, but setting this to true will copy the contents of the map over as the user pans beyond the map boundaries.

0
votes

This sounds like a misunderstanding of the definition of "wrap":

In the context of Leaflet's Tile Layer / Grid Layer option noWrap, it says:

Whether the layer is wrapped around the antimeridian. If true, the GridLayer will only be displayed once at low zoom levels.

So it sounds like simply noWrap: true should achieve your objective.

Updated JSFiddle: http://jsfiddle.net/8m13d6vs/3/

BTW you should consider upgrading Leaflet version to 1+