I'm currently making a demonstration to compare the two OpenLayers libraries (2 and 3). For doing this, I have made two div elements and put the different maps on each other. The goal is to make a map which starts in the first div and continues in the second div, fluently. The result can be seen on the following fiddle: http://jsfiddle.net/GFarkas/xxqu97nc/.
To synchronize the two maps, I have to bind events to each one and pass the corresponding center coordinates to the other map.
My basic concept is, that if we want to get the maps aligned, they have to share lower left coordinates (because one of the divs is smaller than the other). Because they are the same height, the latitude won't change, it can be passed from the event object. However, because of the difference in their width, the longitude have to be calculated. As they have to share the same lower left coordinates, the center can be calculated by averaging the longitude at the sides of the corresponding bounding box:
view.setCenter([(map.getLonLatFromPixel(new OpenLayers.Pixel([0,0])).lon + map.getLonLatFromPixel(new OpenLayers.Pixel([map2.getSize(),0])).lon)/2, evt.object.center.lat]);
to change the OpenLayers 3 div, and
map.setCenter([(map2.getCoordinateFromPixel([0, 0]) + map2.getCoordinateFromPixel([640, 0]))/2, evt.map.getView().getCenter()], evt.map.getView().getZoom());
to change the OpenLayers 2 one.
This method works as intended until I get near to the date line (where the positive and the negative longitudes meet as we're in Pseudo Mercator). When I get between the -19000000m and 20000000m longitudes, this simple equation to calculate the center coordinates fails and my view goes near to the origin.
The question is, does anybody have a better and safer method to calculate coordinates to synchronize the two maps? I have tried to create an
OpenLayers.Bounds to find out the center coordinates, but no chance, it still fails.
Oh, and the divs must go on each other, because I'm swiping between them, just JSFiddle refused to maintain that function in my code.