tblogan

multiple map instances with linked zoom/extents?

Discussion created by tblogan on Oct 10, 2013
Latest reply on Oct 10, 2013 by manish_patel
Is there a way to 'link' the extents / zooms of multiple map instances?

This seems pretty easy in google maps api (e.g. using map.bindto()) but can't seem to find an equivalent in the ArcGIS api...

I'm quite new to javascript so any help on this would be great:

Here's is my code so far that sets up my two maps. I will eventually be adding different KML layers etc for comparison between thetwo but for now am just trying to link the extents

thanks
Travis

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7, IE=9, IE=10">
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>TEST</title>
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/dojo/dijit/themes/claro/claro.css">
  <link rel="stylesheet" href="http://js.arcgis.com/3.7/js/esri/css/esri.css">
  <style>
   html, body {
    height: 100%;
    width: 100%;
    margin: 0;
    padding: 10;
   }
   .esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail {
    border-color: #66FFFF !important;
   }
   #map {
    padding: 10;
   }
  </style>

  <script>
   var dojoConfig = {
    parseOnLoad : true
   };
  </script>
  <script src="http://js.arcgis.com/3.7/"></script>
  <script>
   dojo.require("dijit.layout.BorderContainer");
   dojo.require("dijit.layout.ContentPane");
   dojo.require("esri.map");
   dojo.require("dijit.TitlePane");
   dojo.require("esri.dijit.BasemapGallery");
   dojo.require("esri.arcgis.utils");
  

   var map;

   function init() {
    map = new esri.Map("map", {
     center : [-73.049, 48],
     zoom : 5,
     basemap : "streets"
    });

    map1 = new esri.Map("map1", {
     center : [-73.049, 48],
     zoom : 5,
     basemap : "streets"
    });

    var basemapGallery = new esri.dijit.BasemapGallery({
     showArcGISBasemaps : true,
     map : map
    }, "basemapGallery");

    var selectionHandler = dojo.connect(basemapGallery, "onSelectionChange", function() {
     dojo.disconnect(selectionHandler);
     //add kml layer to the map

    });
    basemapGallery.startup();

    dojo.connect(basemapGallery, "onError", function(msg) {
     console.log(msg)
    });
   
   
   }


   dojo.ready(init);
  </script>
</head>

<body class="claro">
  <div data-dojo-type="dijit.layout.BorderContainer"
  data-dojo-props="design:'headline', gutters:false"
  style="width:100%;height:100%;margin:0;">
   <div id="Main"
   data-dojo-type="dijit.layout.ContentPane"
   data-dojo-props="region:'center'"
   style="border:1px solid #000">
    <div id="map"
    data-dojo-type="dijit.layout.ContentPane"
    data-dojo-props="region:'center'"
    >

     <div style="position:absolute; right:20px; top:10px; z-Index:999;">
      <div data-dojo-type="dijit.TitlePane"
      data-dojo-props="title:'Switch Basemap', closable:false, open:false">

       <div data-dojo-type="dijit.layout.ContentPane" style="width:280px; height:280px; overflow:auto;">
        <div id="basemapGallery"></div>
       </div>

      </div>
     </div>
    </div>
   </div>

   <div id="sidebar"
   data-dojo-type="dijit.layout.ContentPane"
   data-dojo-props="region:'left'"
   style="border:1px solid #000;width:25%;">
    <div id="map1"
    data-dojo-type="dijit.layout.ContentPane"
    data-dojo-props="region:'center'"
    style="height:65%"></div>
    <div id="Info"
    data-dojo-type="dijit.layout.ContentPane"
    data-dojo-props="region:'bottom'"
    style="border:1px solid #000;height:32%"></div>

   </div>

  </div>
</body>
</html>

Outcomes