Looking for some help regarding adding a Legend to my GIS application. I'm using the Javascript API for ArcGIS. I think it's a problem with my div tags.
<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.17/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
padding: 0;
}
#rightPane {
width: 20%;
}
#legendPane {
border: solid #97DCF2 1px;
}
</style>
<script src="https://js.arcgis.com/3.17/"></script>
<script type="text/javascript">
var map;
require(["esri/map",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/dijit/Legend",
"esri/dijit/LayerList",
"dojo/domReady!",
"dojo/dom",
"dojo/dom-construct",
"dojo/parser",
"dojo/_base/array",
"dijit/form/CheckBox",
"dijit/layout/AccordionContainer",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"esri/arcgis/utils",
"esri/arcgis/arrayUtils",
"dojo/parser",
"dojo/dom-construct"],
function(Map, ArcGISDynamicMapServiceLayer, Legend, arrayUtils, ContentPane, BorderContainer, parser, domConstruct) {
parser.parse();
map = new Map("map", {
center : [-76.029214, 38.460648],
zoom : 10
});
var Basemap = new ArcGISDynamicMapServiceLayer("http://(MyServer)/arcgis/rest/services/Basemaps/BaseMap/MapServer");
map.addLayers([Basemap]);
var Lines = new ArcGISDynamicMapServiceLayer("http://(MyServer)/arcgis/rest/services/Basemaps/Lines/MapServer");
map.addLayers([Lines])
var Flood = new ArcGISDynamicMapServiceLayer("http://(MyServer)/arcgis/rest/services/Basemaps/FloodMap/MapServer");
map.addLayers([Flood])
//adds legend
map.on("layers-add-result", function(evt) {
var layerInfo = arrayUtils.map(evt.layers, function(layer, index)
return {layer:layer.layer, title:layer.layer.name};
});
if (layerInfo.length > 0) {
var legendDijit = new legend({
map: map,
layerInfos: layerInfo
}, "legendDiv");
legendDijit.startup();
}
});
});
</script>
</head>
<body>
<div id="content" style="width: 100%; height: 100%; margin: 0;"
data-dojo-type="dijit/layout/BorderContainer"
data-dojo-props="design:'headline', gutters:true" >
<div id="rightPane" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'">
<div data-dojo-type="dijit/layout/AccordionContainer">
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Legend', selected:true">
<div id="legendDiv"></div>
</div>
<div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="title:'Pane 2'">
GIS Viewer
</div>
</div>
</div>
<div id="map"
data-dojo-type="dijit/layout/ContentPane"
data-dojo-props="region:'center'"
style="overflow:hidden;"></div>
</div>
</body>
</html>
Best Answer
To start with you need to have an argument declared in your function for every module that you want to load (except for plugins like domReady!, plugins are denoted by the !), it's also important that they are in the same order and that they are only listed once. For example:
You can use any name to represent any module but then you need to make sure you reference it accordingly in the code. The plugins need to be listed last, if you list them in the middle then the alignment is out of order. See here. Also here is a great example of a legend if you haven't seen it.
EDIT:
I made several changes, you were missing a bracket and there were some module names that needed to be changed. Also there is no esri/arcgis/arrayUtils module. Try this, also use the developer tools in whichever browser you are testing in so you can see which errors are happening in the console window. To access use F12.