Change Overview map

ChristopherSchreiber · ‎11-03-2016

Hello,

I am creating a map based off of Esri's JS library (3.18).

I would like the overview map's basemap to match basemap selected from the basemap on the Basemap Gallery.

Has anyone done this before?

Thanks,

Chris

RobertScheitlin__GISP · ‎11-03-2016

Chris,

Sure here is a sample:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Overview Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      var map, overviewMapDijit;

      require([
        "esri/map", "esri/dijit/OverviewMap",
        "esri/dijit/BasemapGallery", "dojo/_base/lang",
        "dojo/parser",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function (
        Map, OverviewMap, BasemapGallery, lang,
        parser
      ) {
        parser.parse();

        map = new Map("map", {
          basemap: "topo",
          center: [-122.445, 37.752],
          zoom: 14
        });

        //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
        var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");
        basemapGallery.startup();

        basemapGallery.on("selection-change", lang.hitch(this, function() {
          var basemap = basemapGallery.getSelected();
          overviewMapDijit.destroy();
          overviewMapDijit = new OverviewMap({
            map: map,
            visible: true,
            attachTo: "bottom-left",
            height: 260
          });
          overviewMapDijit.startup();
        }));

        overviewMapDijit = new OverviewMap({
          map: map,
          visible: true,
          attachTo: "bottom-left",
          height: 260
        });
        overviewMapDijit.startup();
      });
    </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="map"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'"
         style="padding:0;">

      <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:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>

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

View solution in original post

RobertScheitlin__GISP · ‎11-03-2016

Chris,

Sure here is a sample:

<!DOCTYPE html>
<html>
  <head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

    <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
    <title>Overview Map</title>
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="https://js.arcgis.com/3.18/esri/css/esri.css">
    <style>
      html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
    </style>

    <script src="https://js.arcgis.com/3.18/"></script>
    <script>
      var map, overviewMapDijit;

      require([
        "esri/map", "esri/dijit/OverviewMap",
        "esri/dijit/BasemapGallery", "dojo/_base/lang",
        "dojo/parser",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!"
      ], function (
        Map, OverviewMap, BasemapGallery, lang,
        parser
      ) {
        parser.parse();

        map = new Map("map", {
          basemap: "topo",
          center: [-122.445, 37.752],
          zoom: 14
        });

        //add the basemap gallery, in this case we'll display maps from ArcGIS.com including bing maps
        var basemapGallery = new BasemapGallery({
          showArcGISBasemaps: true,
          map: map
        }, "basemapGallery");
        basemapGallery.startup();

        basemapGallery.on("selection-change", lang.hitch(this, function() {
          var basemap = basemapGallery.getSelected();
          overviewMapDijit.destroy();
          overviewMapDijit = new OverviewMap({
            map: map,
            visible: true,
            attachTo: "bottom-left",
            height: 260
          });
          overviewMapDijit.startup();
        }));

        overviewMapDijit = new OverviewMap({
          map: map,
          visible: true,
          attachTo: "bottom-left",
          height: 260
        });
        overviewMapDijit.startup();
      });
    </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="map"
         data-dojo-type="dijit/layout/ContentPane"
         data-dojo-props="region:'center'"
         style="padding:0;">

      <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:380px; height:280px; overflow:auto;">
            <div id="basemapGallery"></div>
          </div>
        </div>
      </div>

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

ChristopherSchreiber · ‎11-03-2016

Thanks Robert!

Works great!