Change Overview map

Question

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

rscheitlin · Accepted Answer

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> ‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍