[OpenLayers-Users] how to synchronize 2 maps ?

[Gilles Bassière]

Stephen Woodbridge wrote:
> 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
Hi Steve

Thanks for your help. I thought it was possible to synchronize 2 maps in 
an easy way, just turning on option on or something. Seems to be a 
little more complicated and time-consuming. I just embolded myself and 
dived into OL code, I think I can modify it to allow a control to drive 
several maps but I have to find a little time. If I manage to write a 
clean solution to this problem, I'll keep the list informed.

Cheers,

-- 
Gilles Bassiere
MAKINA CORPUS
30 rue des Jeuneurs
FR-75011 PARIS
http://www.makina-corpus.com