4

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?

2 Answers 2

3

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

1
  • Is there any way to expand on this answer? If the linked page (great example!) goes down there isn't any context here.
    – Roy
    Commented Aug 28, 2013 at 14:44
2

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.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

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