nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

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

Find more posts tagged with

Accepted answers

All comments

ManishkumarPatel

Thanks Sunil,

Glad to help!!! 🙂

Regards,
Manish

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

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

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 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

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.

evtguy

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

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.