sidebyside viewer from my server, not - deferred help

Discussion created by cgmcgove on Feb 21, 2013
Hi, I am trying to build a side by side viewer that uses my arcgis server instead of I've started with the template from the site that is built off of
Currently I have managed to get the two maps in the page. For some reason I had to call [esri.arcgis.utils.createMap] in two seperate init functions to get them to display. As you can see in my code below, I have both maps doing an 'addcallback' onExtentChange events. They sort of work. But if i was to let one side pan fast with momentum, or if i try to zoom, they can get caught in a tug of war that causes them to wobble back and forth.

Anyone have ideas to fix the synching?

Chris McGovern
Montgomery Planning

<!DOCTYPE html>
  <title>Montgomery County Zoning Changes</title>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9">

  <link rel="stylesheet" type="text/css" href="">

  <script>      var dojoConfig = { parseOnLoad: true };</script>
  <script src=""></script>

      var map1;
      var map2;

      function synctomap2() {
          //  alert("Just called synctomap1");

      function synctomap1() {
          //   alert("Just called synctomap0");

      function init() {
          var mapDetails1 = { "operationalLayers": [], "baseMap": { "baseMapLayers": [{ "id": "defaultBasemap1", "opacity": 1, "visibility": true,
              "url": ""
                }],"title": "Topographic1"}}
          var webmap1 = {};
          webmap1.item = {"title": "My Map1","snippet": "My test map","spatialReference": 2248};
          webmap1.itemData = mapDetails1;

//          esri.arcgis.utils.createMap(webmap1, "mapDiv1").then(function (response) {
//              map1 =;
//          });
                    var mapdeferred1 = esri.arcgis.utils.createMap(webmap1, "mapDiv1");

                    mapdeferred1.addCallback(function (response) {
                        console.log("checkExtents1 called");
                        map1 =;
                        dojo.connect(map1, "onExtentChange", synctomap2);
                        //dojo.connect(map1, "onPanEnd", synctomap2);
                        //dojo.connect(map1, "onZoomEnd", synctomap2);

      function init2() {
          var mapDetails2 = { "operationalLayers": [], "baseMap": { "baseMapLayers": [{ "id": "defaultBasemap1", "opacity": 1, "visibility": true,
              "url": ""
                }],"title": "Topographic1"}}
          var webmap2 = {};
          webmap2.item = {"title": "My Map1","snippet": "My test map", "spatialReference": 2248};
          webmap2.itemData = mapDetails2;

//                  esri.arcgis.utils.createMap(webmap2, "mapDiv2").then(function (response) {
//                      map2 =;
          //                            });

          var mapdeferred2 = esri.arcgis.utils.createMap(webmap2, "mapDiv2");

          mapdeferred2.addCallback(function (response) {
              console.log("checkExtents1 called");
              map2 =;
              dojo.connect(map2, "onExtentChange", synctomap1);
              //dojo.connect(map1, "onPanEnd", synctomap1);
              //dojo.connect(map1, "onZoomEnd", synctomap1);

<!--    <div id="mapDiv"></div>-->
        <div id="mainWindow" dojotype="dijit.layout.BorderContainer" design="headline"
        gutters="false" style="width:100%; height:100%;">

          <!-- Map Section -->
          <div id="mapContainer" dojotype="dijit.layout.BorderContainer" region="center" gutters="false" dir="ltr">
           <div id="mapCon1" class="mapCon" dojotype="dijit.layout.ContentPane" region="left" style="width:50%;float:left">
             <!--<div id="legendCon0" class="legendCon">
                 <div id="legend0" class="legend" dir="ltr"></div>
                <div id="mapDiv1" class="map">
                 <!--<div id="legToggle0" class="legToggle" onClick="legendToggle()"><span id="legText"></span> �?�</div>
                    <div id="desToggle0" class="desToggle" onClick="descriptionToggle()"><span id="desText"></span> �?�</div>-->
                <!--<div id="discriptionCon0" class="descriptionCon">
                 <div id="description0" class="description" dir="ltr"></div>
            <div id="mapCon2" class="mapCon" dojotype="dijit.layout.ContentPane" region="right" style="width:50%;float:right">
             <!--<div id="legendCon1" class="legendCon">
                 <div id="legend1" class="legend" dir="ltr"></div>
                <div id="mapDiv2" class="map">
                <!--<div id="descriptionCon1" class="descriptionCon">
                 <div id="description1" class="description" dir="ltr"></div>