Here is my code so far. I need the third map in the dropdown to do the same thing the first two do. When chosen the third map should refresh with a scalebar, overview window, a legend found on the legend tab, and the title of the map.
<!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>Simple Map</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.16/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
</style>
<script src="https://js.arcgis.com/3.16/"></script>
<script>
require([
"dojo/on",
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/TabContainer",
"dijit/layout/ContentPane",
"dijit/form/ComboBox",
"dojo/dom",
"dojo/dom-construct",
"esri/map",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"esri/dijit/OverviewMap",
"dojo/domReady!"
], function(
on,
parser,
ready,
BorderContainer,
TabContainer,
ContentPane,
ComboBox,
dom,
domConstruct,
Map,
urlUtils,
arcgisUtils,
ArcGISDynamicMapServiceLayer,
Legend,
Scalebar,
OverviewMap
) {
ready(function(){
var map, legendDijit, scalebar, overviewMapDijit, legendLayers;
parser.parse();
var select = dijit.byId('mySelect'); // element to reference for event listener below
select.on('change', function(evt) {
// event listener - do something here when select value changes
updateMap();
}); // end on
function updateMap() {
var selection;
//Delete all existing map-related components
if(map != undefined){
map.destroy();
legendDijit.destroy();
scalebar.destroy();
overviewMapDijit.destroy();
}
//Create <div> as the legend container
domConstruct.create("div",{id:"legend"},"legendPanel", "first");
//Create new map
switch (mySelect.value){
case "Chicago Youth Population":
youth();
break;
case "USA Median Household Income":
median();
break;
case "USA HHS Healthcare Resources":
health();
break;
} // end switch
} // end updateMap
function dynamicMap(){
map = new Map("map", {
basemap: "topo", //For full list of pre-defined basemaps, navigate to http://arcg.is/1JVo6Wd
center: [-98.5795, 39.8282], // longitude, latitude
zoom: 4
}); // end map
var newLayer = new ArcGISDynamicMapServiceLayer("http://maps3.arcgisonline.com/ArcGIS/rest/services/A-16/HHS_IOM_Health_Resources/MapServer");
map.addLayer (newLayer);
legendLayers = [];
if("legend" != undefined)
{
constDiv (domConstruct, dom, on)
}
legendLayers.push({layer: newLayer});
legend = new Legend({
map: map,
layerInfos: legendLayers
},"legend");
legend.startup();
scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
overviewMapDijit = new OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
};
function youth() {
arcgisUtils.createMap("c63cdcbbba034b62a2f3becac021b0a8","map").then(function(response){
//update the app
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
map = response.map;
//add the scalebar
scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
overviewMapDijit = new OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
legendDijit = new Legend({
map: map,
layerInfos: legendLayers
},"legend");
legendDijit.startup();
}); // end map
} // end youth
function median() {
arcgisUtils.createMap("b4db98c3e1fe45c0afb7217f78b20d76","map").then(function(response){
//update the app
dom.byId("title").innerHTML = response.itemInfo.item.title;
dom.byId("subtitle").innerHTML = response.itemInfo.item.snippet;
map = response.map;
//add the scalebar
scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
overviewMapDijit = new OverviewMap({
map: map,
visible: true
});
overviewMapDijit.startup();
//add the legend. Note that we use the utility method getLegendLayers to get
//the layers to display in the legend from the createMap response.
var legendLayers = arcgisUtils.getLegendLayers(response);
legendDijit = new Legend({
map: map,
layerInfos: legendLayers
},"legend");
legendDijit.startup();
}); // end map
} // end median
function health() {
dynamicMap({
map: map,
visible: true
});
dynamicMap.startup();
} // end health
// update map on first load
updateMap();
}) // end ready
}); // end require
</script>
</head>
<body class="claro">
<div id="mainWindow" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'sidebar'" style="width:100%; height:100%;">
<div id="header" class="shadow roundedCorners" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'top'" style="width:100%; height:40px;">
<div id="title"></div>
<div id="subtitle"></div>
</div>
<div id="tabs" data-dojo-type="dijit/layout/TabContainer" data-dojo-props="region:'leading'" style="width: 20%; height: 100%; margin: 0px;">
<div data-dojo-type="dijit/layout/ContentPane" title="Map Selection">Select the map from the drop-down list
<select method="get" data-dojo-type="dijit/form/ComboBox" id="mySelect" style="width: 100%">
<option value="Chicago Youth Population">Chicago Youth Population</option>
<option value="USA Median Household Income">USA Median Household Income</option>
<option value="USA HHS Healthcare Resources">USA HHS Healthcare Resources</option>
</select>
</div>
<div id="legendPanel" data-dojo-type="dijit/layout/ContentPane" title="Map Legend">
<div id="legend"></div>
</div>
</div>
<div id="map" class="roundedCorners shadow" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'"></div>
</div>
</body>
</html>
Thanks in advance
