topic multiple map instances with linked zoom/extents? in ArcGIS JavaScript Maps SDK Questions

multiple map instances with linked zoom/extents?

TravisLogan — Thu, 10 Oct 2013 14:34:25 GMT

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>

Re: multiple map instances with linked zoom/extents?

ManishkumarPatel — Sat, 11 Dec 2021 17:24:19 GMT

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