Community
Select to view content in your preferred language

multiple map instances with linked zoom/extents?

2631
1
10-10-2013 07:34 AM
TravisLogan
by
New Contributor
‎10-10-2013 07:34 AM
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>
0 Kudos
1 Reply
ManishkumarPatel
by
Deactivated User
‎10-10-2013 08:23 AM
Hi Travis,

Do you want to set the extent from one map to another. If yes please find the attached code:

<!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: 10px;
        }

        .esriBasemapGallerySelectedNode .esriBasemapGalleryThumbnail
        {
            border-color: #66FFFF !important;
        }

        #map
        {
            padding: 10px;
        }
    </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,map1;

        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.connect(map, "onExtentChange", setMap1Ext);
        }

        function setMap1Ext(ext) {
            map1.setExtent(ext);
        }

        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>


Hope this helps.

Regards,
Manish
0 Kudos