Geographic Information Systems Stack Exchange is a question and answer site for cartographers, geographers and GIS professionals. Join them; it only takes a minute:

Sign up
Here's how it works:
  1. Anybody can ask a question
  2. Anybody can answer
  3. The best answers are voted up and rise to the top

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

var domWidgetMaps = $('div[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, //
        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( + 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?


share|improve this question
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


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.