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.

My page contains multiple OpenLayers map objects loaded in the JS var domWidgetMaps . Each of them with a specific navigation.

var domWidgetMaps = $('div[id^="' + this.id + '"]');
for (var i = domWidgetMaps.length; i > 0; i--) {
    var options = {
        projection: mercator, //EPSG:3785/900913
        displayProjection: geographic, //EPSG:4326
        theme: null,
        /*  
            Lines removed from OL 2.12
            maxExtent: new OpenLayers.Bounds(-20037508.34, -20037508.34, 20037508.34, 20037508.34),
            maxResolution: 156543.0339, //http://wiki.osgeo.org/wiki/WMS_Tiling_Client_Recommendation
        */
        units: 'm',
        controls: [
            new OpenLayers.Control.Navigation(),
            new OpenLayers.Control.PanZoom(),
            new OpenLayers.Control.ArgParser(),
            new OpenLayers.Control.Attribution()       
        ],
        numZoomLevels: MAX_ZOOM_LEVEL,
        allOverlays: true
    };    
    widgetMaps[i] = new OpenLayers.Map(this.id + i, options);
    var osm = new OpenLayers.Layer.OSM('osmBackground' + i, '', {visibility: true}, {buffer: 0});
    widgetMaps[i].addLayers([osm]);
    widgetMaps[i].zoomToMaxExtent();        
}

If the user wants to compare several maps, features like: "zoom-in, zoom-out or pan" should be "shared". The easiest solution (I think) is to identify which map I'm working on (How?) and to launch

var bboxSelected = widgetMaps[<SELECTED>].getExtent();
widgetMaps[2].zoomToExtent(bboxSelected);
widgetMaps[5].zoomToExtent(bboxSelected);
widgetMaps[6].zoomToExtent(bboxSelected);
widgetMaps[9].zoomToExtent(bboxSelected);

I tried

$('.map').click(function (e) {
});

It works if I click on the map, but it doesn't work if I click on zoom-in, zoom-out or pan buttons. OpenLayers intercepts the events.

How can I get the selected map based on zoom-in/out, pan?

Thanks!

share|improve this question

2 Answers 2

up vote 2 down vote accepted

I think it's better to use OpenLayers built-in events than jQuery dom events. The event you need here is 'moveend'(triggered after a drag, pan, or zoom completes). So add following lines after the map objects initialization:

for (var i=0; i<widgetMaps.length; i++) {
    widgetMaps[i].events.register("moveend", map, function(){
        var bboxSelected = map.getExtent();  // map is a reference to the event object
        for (var i=0; i<widgetMaps.length; i++) {
            if (widgetMaps[i] !== map) {
                widgetMaps[i].zoomToExtent(bboxSelected); // widgetMaps array should be globally available
            }
        }
    });
}

More information about map events can be found here. Hope this can be of any help.

share|improve this answer

Here is working example of what you want with source code.

share|improve this answer
    
Is there any way to expand on this answer? If the linked page (great example!) goes down there isn't any context here. –  Roy Aug 28 '13 at 14:44

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.