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
Solved! Go to Solution.
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>
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>
Thanks Robert!
Works great!