Linking Two Map Extents

[JosephSaltenberger]

I am trying to link two map extents so that when Map1 extent changes, so does Map2... and vice-versa. I've been using the extent-change event for both Map1 and Map2, but get stuck in an cycle.

When I pan Map1, the Map1 extent-change event is fired. This changes Map2 extent, which fires extentChange2 event, which changes Map1 extent... and the cycle continues. Any ideas? Here is the code for reference:

Map1.on("extent-change", extentChange1);
Map2.on("extent-change", extentChange2);

function extentChange1(evt){
    Map2.setExtent(evt.extent);
}

function extentChange2(evt){
    Map1.setExtent(evt.extent);
}

[SteveCole]

Maybe compare the extents before actually changing the extent? If they are the same, end the function.

[JosephSaltenberger]

I tried that, but I think since the maps are slightly different sizes, the extents are never exactly the same.

I guess one possibility would be to check if the extents are close to each other, rather than exactly the same.

[ManishkumarPatel]

Hi Joesph,

Based on the description what I understand is that you have two maps and if extent for either of the map is changed(map1 or map2) the same extent is supposed to be set to the other map.

Hope I understand it correctly.

Please find the below fiddle and let me know if that's what you are looking for:

http://jsfiddle.net/patelmanya/uER7L/6/

map.on("extent-change", extentChange1);
//if you use the below as well then the map will keep going in infinite loop.
    //map2.on("extent-change", extentChange2);


    map.on("zoom-end", extentChange1);
    map2.on("zoom-end", extentChange2);


    function extentChange1(evt) {
        map2.setExtent(evt.extent);
    }


    function extentChange2(evt) {
        map.setExtent(evt.extent);
    }

Hope this helps.

Best Regards,
Manish Patel

[GaneshSolai_Sambandam]

Hi Joesph,

Based on the description what I understand is that you have two maps and if extent for either of the map is changed(map1 or map2) the same extent is supposed to be set to the other map.

Hope I understand it correctly.

Please find the below fiddle and let me know if that's what you are looking for:

http://jsfiddle.net/patelmanya/uER7L/6/

map.on("extent-change", extentChange1);
//if you use the below as well then the map will keep going in infinite loop.
    //map2.on("extent-change", extentChange2);


    map.on("zoom-end", extentChange1);
    map2.on("zoom-end", extentChange2);


    function extentChange1(evt) {
        map2.setExtent(evt.extent);
    }


    function extentChange2(evt) {
        map.setExtent(evt.extent);
    }

Hope this helps.

Best Regards,
Manish Patel

Hi Manish
Really nice functionality. One thing, I noticed on your fiddle is that, If you change extent of the first web map on the top of the page and the second map moves relative to that. But, if you move the second map on the bottom, the map on the top doesn't move relative to this.

Any solution?

regards
Ganesh

[ManishkumarPatel]

Hi Ganesh,

I tried to attach the extent change event for both the maps but in that case the maps keep changing the extent and goes in infinite loop. I may have to play around with it for a while. I can certainly update once I get some thing solid.

Regards,
Manish Patel

[SunilPalkar]

Hello Manish,

Great work !!!

Even useful for me too !!!

thanks a lot !!

Hi Ganesh,

I tried to attach the extent change event for both the maps but in that case the maps keep changing the extent and goes in infinite loop. I may have to play around with it for a while. I can certainly update once I get some thing solid.

Regards,
Manish Patel

[ManishkumarPatel]

Thanks Sunil,

Glad to help!!! 🙂

Regards,
Manish