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
Solved! Go to Solution.
Richard,
I have made some corrections to your code and it work fine now (corrections commented):
<!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 = []; //Not sure why you are asking a string if it is undefined when you are defining it right there in the same line. //You do not have a constDiv function... /*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(); //Not sure way you were treating the dynamicMap function like a dijit with a constructor. /*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>
I know this is asking a lot and time is not on everyones side, but i need this by 5:45 tonight March 21, 2016
What kind of layers are the other two maps created from?
What sample did you use to get the following code snippet from?
arcgisUtils.createMap("b4db98c3e1fe45c0afb7217f78b20d76","map").then(function(response){
The first two maps I used the web map IDs so the layers are already included, and the code came from an example in the arcgis Api. As for the third map i need to use the ArcGISDynamicMapServiceLayer ontop of a topo map
Richard,
I have made some corrections to your code and it work fine now (corrections commented):
<!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 = []; //Not sure why you are asking a string if it is undefined when you are defining it right there in the same line. //You do not have a constDiv function... /*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(); //Not sure way you were treating the dynamicMap function like a dijit with a constructor. /*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>
Thank you to everyone, that was perfect and after seeing what had to be changed i feel like an idiot. so simple of changes.