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});

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();

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?


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.

|improve this answer|||||

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

|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

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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