[OpenLayers-Users] how to synchronize 2 maps ?

[Stephen Woodbridge]

Gilles Bassière wrote:
> Hi list,
> 
> I have 2 OL maps in the same page and I would like them to be 
> synchronized, say when an event occurred in any of the two maps, it 
> should be handled by the two maps, so that both maps always show the 
> same area. For example, I use map2's controls to zoom in and both maps 
> zoom in.
> 
> I've been told that it should be possible with OL but I can't find any 
> such thing in this list archives...
> 
> So far, my maps are initialized like this:
> 
> // Map options 
> --------------------------------------------------------------
> var url1 = ... ;
> var url2 = ... ;
> var optionsSet = {
>    maxExtent: new OpenLayers.Bounds(590100, 2420300, 596600, 2428500),
>    maxResolution: 12,
>    numZoomLevels: 10,
>    units: "m",
>    tileSize: new OpenLayers.Size(256, 256),
>    projection: "EPSG:27572",
>    theme: "./compare/customOL.css",
>    controls: []
> }
> 
> // Map definition 
> -----------------------------------------------------------
> var map1 = new OpenLayers.Map($("map1"), optionsSet);
> var map2 = new OpenLayers.Map($("map2"), optionsSet);
> 
> var background1 = new OpenLayers.Layer.WMS("Background", url1, {layers: 
> "Background", format: "image/png"}, {isBaseLayer: true, reproject: false});
> var background2 = new OpenLayers.Layer.WMS("Background", url2, {layers: 
> "Background", format: "image/png"}, {isBaseLayer: true, reproject: false});
> 
> map1.addLayer(background1);
> map2.addLayer(background2);
> 
> map1.addControl( new OpenLayers.Control.MousePosition() );
> map1.addControl( new OpenLayers.Control.MouseDefaults() );
> map1.addControl( new OpenLayers.Control.PanZoomBar() );
> 
> map2.addControl( new OpenLayers.Control.MousePosition() );
> map2.addControl( new OpenLayers.Control.MouseDefaults() );
> map2.addControl( new OpenLayers.Control.PanZoomBar() );
> 
> 
> 
> I tried to assign the same control objects to both maps:
> 
> myPanZoomBarControl = new OpenLayers.Control.PanZoomBar() ;
> map1.addControl( myPanZoomBarControl );
> map2.addControl( myPanZoomBarControl );
> 
> The previous doesn't work. The control appear only on the 1st map and 
> control the 2nd map...
> I also tried with the fallThrough property set to true but it doesn't 
> have much effect.
> 
> Has someone already got 2 maps synchronized ? Does someone know whether 
> it's possible ?
> 

I did something similar. To simplify things, I created a master and 
slave map so all the Controls are on the Master and then I added Event 
handlers to catch Move and Zoom events and to apply the action to the 
slave map. this worked very nicely.

You might be able to criss/cross the event handlers but you would have 
to take some precautions to that update events did not trigger a new set 
up update events and so on form an endless loop.

-Steve