repeat skobbler maps horizontally with OpenLayers?

Question

I'm trying to get skobbler maps to repeat horizontally if you load this page http://developer.skobbler.com/demo/skobbler-tiles-openlayers.html and zoom out, the map will not repeat horizontally

However if you use this link and zoom out http://developer.skobbler.com/web-tiles/embedded it works as I want (i.e. it repeats across the screen)

However, I'm using OpenLayers and not an Iframe

Is what I want to do possible with OpenLayers?

Thanks Mark

Answer 1

I've made some minor changes to your code. In fact I've added a few properties to your layer:

var skoLayer = new OpenLayers.Layer.XYZ("skobbler",
                ["${z}/${x}/${y}.png?api_key=<Your Key Here>"], 
                    {numZoomLevels: 18, 
                    sphericalMercator: true, 
                    isBaseLayer: true, 
                    wrapDateLine: true, 
                    maxExtent: new OpenLayers.Bounds(-180, -180, 180, 120),
                    attribution: attrib
                });

Some explanations:

• wrapDateLine repeats the maps horizontally but only if

• the layer isBaseLayer

• the 120 value in the maxExtent is not choosed arbitrary, but for centering the map, focusing like in your example. It seems that using wrapDateLine: true overrides setCenter. If you need another center you must to adjust all the values by attempts.

And here's the whole code for you, to easily test it. Just unzip the archive (tested for viruses), extract the scrobbler.html file and double click it.

Just zoom out and move the map, as you like.