Synchronize multiple web maps using ArcGIS API for JavaScript

Summary

A web app can contain multiple web maps. Users may wish to perform the same edits on multiple web maps, and as this can consume a lot of time, it is beneficial to synchronize the web maps.

Procedure

The following instructions describe how to synchronize multiple web maps using ArcGIS API for JavaScript. The code sample below demonstrates how to enable simultaneous pan for two web maps by using map1 as the base web map, and map2 as the synchronized web map.

The code activates the function of map2.on() within the first code block of map1.on(). This results in map2 having the same output as map1 on every function set in the desired code block.

map1.on("zoom-end",function(evt){
       console.log(evt.target.__LOD.level);
         map2.setZoom(evt.target.__LOD.level);      
      });
      
      map2.on("zoom-end",function(evt){
         console.log(evt.target.__LOD.level);
         map1.setZoom(evt.target.__LOD.level);
      
      });
      
    map1.on("mouse-drag-start",function(evt){
        handler1.resume();
        
      });
      
      map2.on("mouse-drag-start",function(evt){
          handler2.resume();
           
      });
      
     
      var handler1 = on.pausable(map1, "pan-end",function(evt){
       handler2.pause() ; 
         map2.centerAt(evt.extent.getCenter()); 
      });

     var handler2 = on.pausable(map2, "pan-end",function(evt){
        handler1.pause() ;
         map1.centerAt(evt.extent.getCenter()); 
      });