Take the 2-minute tour ×
Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. It's 100% free, no registration required.

I am building a web application where I need to compare 2 different maps of the same area, I need for the events on one map to automatically be triggered on the other map. I have so far: map2.events.triggerEvent(evt.type,evt.px);

these guys have done a map compare: http://tools.geofabrik.de/mc/?lon=29.53125&lat=22.26877&zoom=2

but I have no idea bow they achieved this event handling..

please help, I need this functionality As soon as possible, its been a week am fighting with this..I will appreciate all replies.

share|improve this question

2 Answers 2

up vote 7 down vote accepted

Do you need to synchronize only moving and zooming of map?

In that case, one simple solution is: listen moveend event on map, and then zoom other map to extent of current map.

map1 = new OpenLayers.Map('map1');
map2 = new OpenLayers.Map('map2');

map1.events.on({
    moveend: function(evt) {
        map2.zoomToExtent(map1.getExtent());

    }       
});

map2.events.on({
    moveend: function(evt) {
        map1.zoomToExtent(map2.getExtent());
    }       
});    

Here's fiddle: http://jsfiddle.net/LwPEd/2/

I did afraid at first, that there will infinite loop, when zoomToExtent triggers new event, but it works. I have to think about it, why :)

share|improve this answer
    
:-), genious! why did I not think of that..thank you so much!!! it seems to work. –  Eli Nov 30 '12 at 11:05

It's also possible to make the feedback instant, at the cost of complicating the code a bit (and causing potential performance problems if there are other events attached to the maps):

(used user1702401's answer and Fiddle as a template - thanks)

var mapFollow = function(mapA, mapB) {
    var syncMapHandler = function() {
        var aCenter = mapA.getCenter();
        var bCenter = mapB.getCenter();

        var coordsChanged = ((aCenter.lat !== bCenter.lat) ||
            (aCenter.lon !== bCenter.lon));

        if (coordsChanged) {
            mapB.moveTo(mapA.getCenter(), mapA.getZoom(), {
                dragging: true
            });
        }
    };

    mapA.events.on({
        'move': syncMapHandler,
        'zoomend': syncMapHandler,
        scope: this
    });
};

map1 = new OpenLayers.Map('map1');
map2 = new OpenLayers.Map('map2');

mapFollow(map1, map2);
mapFollow(map2, map1);

Live example here: http://jsfiddle.net/4Wf7W/5/

share|improve this answer
    
Thank you.. very helpful..! –  Eli Dec 3 '12 at 11:10

Your Answer

 
discard

By posting your answer, you agree to the privacy policy and terms of service.

Not the answer you're looking for? Browse other questions tagged or ask your own question.