[GIS] OpenLayers2 multiple maps — which is used

openlayers-2

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?

Best Answer

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

Related Question