Community
Select to view content in your preferred language

sidebyside viewer from my server, not arcgis.com - deferred help

713
0
02-21-2013 12:24 PM
ChrisMcGovern
by
Emerging Contributor
‎02-21-2013 12:24 PM
Hi, I am trying to build a side by side viewer that uses my arcgis server instead of arcgis.com. I've started with the template from the site that is built off of arcgis.com.
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?

Thanks,
Chris McGovern
Montgomery Planning

http://www.mcatlas.org/zc/index.htm

<!DOCTYPE html>
  <html>
  <head>
  <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="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3/js/esri/css/esri.css">
  <style>
    html,body,#mapDiv,.map.container{
      padding:0;
      margin:0;
      height:100%;
    }
  </style>

  <script>      var dojoConfig = { parseOnLoad: true };</script>
  <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.3compact"></script>
  <script>
      dojo.require("esri.map");
      dojo.require("esri.arcgis.utils");

      var map1;
      var map2;

      function synctomap2() {
          //  alert("Just called synctomap1");
          map2.setExtent(map1.extent);
      }

      function synctomap1() {
          //   alert("Just called synctomap0");
          map1.setExtent(map2.extent);
      }

      function init() {
          var mapDetails1 = { "operationalLayers": [], "baseMap": { "baseMapLayers": [{ "id": "defaultBasemap1", "opacity": 1, "visibility": true,
              "url": "http://www.mcatlas.org/ArcGIS/rest/services/background/ZoneConv_E/MapServer"
                }],"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 = response.map;
//          });
                    var mapdeferred1 = esri.arcgis.utils.createMap(webmap1, "mapDiv1");

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

      function init2() {
          var mapDetails2 = { "operationalLayers": [], "baseMap": { "baseMapLayers": [{ "id": "defaultBasemap1", "opacity": 1, "visibility": true,
              "url": "http://www.mcatlas.org/ArcGIS/rest/services/background/ZoneConv_P/MapServer"
                }],"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 = response.map;
          //                            });

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

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

      dojo.ready(init);
  </script>
  </head>
  <body>
<!--    <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>-->
                <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>
                <!--<div id="discriptionCon0" class="descriptionCon">
                 <div id="description0" class="description" dir="ltr"></div>
                </div>-->
            </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>-->
                <div id="mapDiv2" class="map">
                </div>
                <!--<div id="descriptionCon1" class="descriptionCon">
                 <div id="description1" class="description" dir="ltr"></div>
                </div>-->
            </div>
          </div>
        </div>
  </body>
  </html>
0 Kudos
0 Replies