function loadPortalMap(configOptions) { esri.arcgis.utils.arcgisUrl = configOptions['portalUrl'] + "sharing/content/items"; var webmapID = configOptions['webMapId']; viewDefinition = configOptions['lyrDefn']; //Get webmapID from country code //Create the appropriate dropdowns describing the layers to draw for (var index = 0; index < viewDefinition.length; index ++) { var item = viewDefinition[index]; var dType = item[0]; var optn = document.getElementById(dType); var option = document.createElement("option"); option.text = item[1]; option.value = index; try { optn.add(option, null); } catch (error) { optn.add(option); } } var params = { q: 'id:' + webmapID }; var mapDeffered = esri.arcgis.utils.createMap(webmapID, 'map', { mapOptions: { logo: false, showInfoWindowOnClick: false, sliderStyle:"small" } }); mapDeffered.addCallback(function(response) { var layers = response.itemInfo.itemData.operationalLayers; dojo.forEach(layers, function(layer) { if (!layer.featureCollection){ layerInfo.push({"layer":layer.layerObject,"title":layer.title}); } else { dojo.forEach(layer.featureCollection.layers, function(featLyr) { layerInfo.push({"layer":featLyr.layerObject,"title":featLyr.title}); }); } }); createLegend(layerInfo, mapDeffered.results[0].map); layerInfo.reverse(); //changeMap(); //Set the description information from the item to $("#tableDiv").html("<h2>Data</h2><div id='innerText'>" + response.itemInfo.item.description + "</div>"); }); mapDeffered.addErrback(function(error) { //Do something here if map doesn't load properly var something = error; }); }
Solved! Go to Solution.
<!DOCTYPE html> <html> <head> <title>Create a Web Map</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css"> <style> html,body,#mapDiv,.map.container{ padding:0; margin:0; height:100%; } </style> <script>var dojoConfig = { parseOnLoad:true };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2compact"></script> <script> dojo.require("esri.map"); dojo.require("esri.arcgis.utils"); var map; function init(){ var webmapid = "286b722cfaf04eee98b8a8a491fd1af5"; esri.arcgis.utils.createMap(webmapid, "mapDiv").then(function(response){ map = response.map; }); } dojo.ready(init); </script> </head> <body> <div id="mapDiv"></div> </body> </html>
function changeMap() { var ptSel = document.getElementById("point"); var ptIdx = ptSel.value; var rasSel = document.getElementById("raster"); var rasIdx = rasSel.value; //Define the %in% function Array.prototype.contains = function(obj) { var i = this.length; while (i--) { if (this == obj) { return true; } } return false; } //The value from each of these dropdowns can be used to get the index of the layer definition we need to show var ptsToShow = viewDefinition[ptIdx][2]; var rasterToShow = viewDefinition[rasIdx][2]; var allVals = ptsToShow.concat(rasterToShow); for (var index = 0; index < layerInfo.length; index ++) { var lyrItem = layerInfo[index]; if (allVals.contains(index)) { lyrItem.layer.show(); } else { lyrItem.layer.hide(); }; } }
<!DOCTYPE html> <html> <head> <title>Create a Web Map</title> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <meta http-equiv="X-UA-Compatible" content="IE=7,IE=9"> <link rel="stylesheet" type="text/css" href="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2/js/esri/css/esri.css"> <style> html,body,#mapDiv,.map.container{ padding:0; margin:0; height:100%; } </style> <script>var dojoConfig = { parseOnLoad:true };</script> <script src="http://serverapi.arcgisonline.com/jsapi/arcgis/3.2compact"></script> <script> dojo.require("esri.map"); dojo.require("esri.arcgis.utils"); var map; function init(){ var webmapid = "286b722cfaf04eee98b8a8a491fd1af5"; esri.arcgis.utils.createMap(webmapid, "mapDiv").then(function(response){ map = response.map; }); } dojo.ready(init); </script> </head> <body> <div id="mapDiv"></div> </body> </html>