I am still feeling my way thru JS and have had success in putting my map together, with the layers i want, and configured popups, ESRI webmaps, etc.... I am having a tough time getting my layers to show up in layerlist (which shows a blank box) my layers are from a featurelayer. Pasted below is my .html code if anyone can give me some help, thank you so much!!!
<!DOCTYPE html>
<html>
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type">
<meta content="initial-scale=1, maximum-scale=1,user-scalable=no" name=
"viewport">
<meta content="yes" name="apple-mobile-web-app-capable">
<meta content="black-translucent" name=
"apple-mobile-web-app-status-bar-style">
<meta content="yes" name="mobile-web-app-capable">
<title>NRP Surface Leases</title>
<link href="http://js.arcgis.com/3.14/dijit/themes/claro/claro.css" rel=
"stylesheet">
<link href="http://js.arcgis.com/3.14/dijit/themes/tundra/tundra.css" rel=
"stylesheet">
<link href="http://js.arcgis.com/3.14/esri/css/esri.css" rel="stylesheet">
<link href="myModules/InfoWindow.css" rel="stylesheet">
<link href="js/LayerList/css/LayerList.css" rel="stylesheet" type=
"text/css">
<style>
@import "http://js.arcgis.com/3.14/dijit/themes/claro/claro.css";
html, body { height: 100%; width: 100%; margin: 0; padding: 0; }
#map {
width: 100%;
height: 1050px;
border: 1px solid #000;
position: relative;
}
.container {
position: relative;
padding: 10px;
border: 1px solid #000;
-webkit-border-radius: 3px;
border-radius: 3px;
}
.zoominIcon {
background-image: url(images/nav_zoomin.png);
width: 16px;
height: 16px;
}
.zoomoutIcon {
background-image: url(images/nav_zoomout.png);
width: 16px;
height: 16px;
}
.zoomprevIcon {
background-image: url(images/nav_previous.png);
width: 16px;
height: 16px;
}
.panIcon {
background-image: url(images/nav_pan.png);
width: 16px;
height: 16px;
}
.deactivateIcon {
background-image: url(images/nav_decline.png);
width: 16px;
height: 16px;
}
#LayerListContainer {
width: 280px;
height: 500px;
background: #fff;
border: 1px solid #000;
position: absolute;
top: 10px;
right: 10px;
z-index: 99;
overflow-x: hidden;
overflow-y: auto;
}
.change-options {
list-style: none;
margin: 20px;
padding: 0;
}
.esriIconSettings2{
padding: 10px;
}
</style>
<script src="http://js.arcgis.com/3.14/">
</script>
<script type="text/javascript">
var map;
require([
"esri/map",
"esri/config",
"esri/dijit/LayerList",
"esri/arcgis/utils",
"esri/toolbars/navigation",
"esri/graphic",
"esri/geometry/Point",
"esri/symbols/SimpleMarkerSymbol",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/InfoTemplate",
"esri/dijit/BasemapGallery",
"esri/arcgis/utils",
"esri/dijit/Scalebar",
"esri/layers/FeatureLayer",
"esri/dijit/Legend",
"dojo/_base/array",
"dojo/_base/lang",
"dojo/on",
"dojo/parser",
"dijit/registry",
"dijit/Toolbar",
"dijit/form/Button",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dijit/layout/AccordionContainer",
"dijit/TitlePane",
"dijit/registry",
"dojo/dom",
"dojo/dom-construct",
"dojo/domReady!"
], function(
Map, esriConfig, LayerList, arcgisUtils, Navigation, Graphic, Point, SimpleMarkerSymbol, ArcGISDynamicMapServiceLayer, InfoTemplate, BasemapGallery, arcgisUtils, Scalebar, FeatureLayer, Legend,
arrayUtils, lang, on, parser, registry, dom, domConstruct
) {
parser.parse();
var navToolbar;
map = new Map("map", {
center: [-81.01045, 38.7448],
zoom: 10,
basemap: "gray"
});
var scalebar = new Scalebar({
map: map,
scalebarUnit: "english"
});
//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("error", function(msg) {
console.log("basemap gallery error: ", msg);
});
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("Hunting-Leases");
infoTemplate.setContent("<b>Lease ID: <\/b>${Lease_ID}<br/>" +
"<b>Active: <\/b>${Active}<br/>" +
"<b>Lessee: <\/b>${Lessee_FN}<br/>" +
"<b>Manager: <\/b>${Manager}<br/>" +
"<b>Description: <\/b>${Descriptio}<br/>" +
"<b>Comments: <\/b>${Comments1}<br/>" +
"<b>Acres: <\/b>${Acres:NumberFormat}");
var Surface_Leases_HL = new FeatureLayer("http://xx.xx.x.xx:xxxx/arcgis/rest/services/Map_Services/Surface_leases/MapServer/0", {
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("Road-Abandonment");
infoTemplate.setContent("<b>Lease ID: <\/b>${Lease_ID}<br/>" +
"<b>Active: <\/b>${Active}<br/>" +
"<b>Lessee: <\/b>${Lessee_FN}<br/>" +
"<b>Manager: <\/b>${Manager}<br/>" +
"<b>Description: <\/b>${Descriptio}<br/>" +
"<b>Comments: <\/b>${Comments1}<br/>" +
"<b>Acres: <\/b>${Acres:NumberFormat}");
var Surface_Leases_Road_Abandonment = new FeatureLayer("http://xx.xx.x.xx:xxxx/arcgis/rest/services/Map_Services/Surface_leases/MapServer/1", {
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("ROW-Easements");
infoTemplate.setContent("<b>Lease ID: <\/b>${Lease_ID}<br/>" +
"<b>Active: <\/b>${Active}<br/>" +
"<b>Lessee: <\/b>${Lessee_FN}<br/>" +
"<b>Manager: <\/b>${Manager}<br/>" +
"<b>Description: <\/b>${Descriptio}<br/>" +
"<b>Comments: <\/b>${Comments1}<br/>" +
"<b>Acres: <\/b>${Acres:NumberFormat}");
var Surface_Leases_ROW_Easement = new FeatureLayer("http://xx.xx.x.xx:xxxx/arcgis/rest/services/Map_Services/Surface_leases/MapServer/2", {
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("Surface-Leases");
infoTemplate.setContent("<b>Lease ID: <\/b>${Lease_ID}<br/>" +
"<b>Active: <\/b>${Active}<br/>" +
"<b>Lessee: <\/b>${Lessee_FN}<br/>" +
"<b>Manager: <\/b>${Manager}<br/>" +
"<b>Description: <\/b>${Descriptio}<br/>" +
"<b>Comments: <\/b>${Comments1}<br/>" +
"<b>Acres: <\/b>${Acres:NumberFormat}");
var Surface_Leases_SUR = new FeatureLayer("http://xx.xx.x.xx:xxxx/arcgis/rest/services/Map_Services/Surface_leases/MapServer/3", {
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
var infoTemplate = new InfoTemplate();
infoTemplate.setTitle("Timber-Agreement");
infoTemplate.setContent("<b>Lease ID: <\/b>${Lease_ID}<br/>" +
"<b>Active: <\/b>${Active}<br/>" +
"<b>Lessee: <\/b>${Lessee_FN}<br/>" +
"<b>Manager: <\/b>${Manager}<br/>" +
"<b>Description: <\/b>${Descriptio}<br/>" +
"<b>Comments: <\/b>${Comments1}<br/>" +
"<b>Acres: <\/b>${Acres:NumberFormat}");
var Surface_Leases_Timber_Agreement = new FeatureLayer("http://xx.xx.x.xx:xxxx/arcgis/rest/services/Map_Services/Surface_leases/MapServer/4", {
mode: FeatureLayer.MODE_ONDEMAND,
infoTemplate: infoTemplate,
outFields: ["*"]
});
map.addLayers([Surface_Leases_HL, Surface_Leases_Road_Abandonment, Surface_Leases_ROW_Easement, Surface_Leases_SUR, Surface_Leases_Timber_Agreement]);
navToolbar = new Navigation(map);
on(navToolbar, "onExtentHistoryChange", extentHistoryChangeHandler);
registry.byId("zoomin").on("click", function () {
navToolbar.activate(Navigation.ZOOM_IN);
});
registry.byId("zoomout").on("click", function () {
navToolbar.activate(Navigation.ZOOM_OUT);
});
registry.byId("zoomprev").on("click", function () {
navToolbar.zoomToPrevExtent();
});
registry.byId("pan").on("click", function () {
navToolbar.activate(Navigation.PAN);
});
registry.byId("deactivate").on("click", function () {
navToolbar.deactivate();
});
function extentHistoryChangeHandler () {
registry.byId("zoomprev").disabled = navToolbar.isFirstExtent();
registry.byId("zoomnext").disabled = navToolbar.isLastExtent();
}
});
</script>
</head>
<body class="claro">
<div data-dojo-type="dijit/Toolbar" id="navToolbar">
<div data-dojo-props="iconClass:'zoominIcon'" data-dojo-type=
"dijit/form/Button" id="zoomin">
Zoom In
</div>
<div data-dojo-props="iconClass:'zoomoutIcon'" data-dojo-type=
"dijit/form/Button" id="zoomout">
Zoom Out
</div>
<div data-dojo-props="iconClass:'zoomprevIcon'" data-dojo-type=
"dijit/form/Button" id="zoomprev">
Prev Extent
</div>
<div data-dojo-props="iconClass:'panIcon'" data-dojo-type=
"dijit/form/Button" id="pan">
Pan
</div>
<div data-dojo-props="iconClass:'deactivateIcon'" data-dojo-type=
"dijit/form/Button" id="deactivate">
Deactivate
</div>
</div>
<div class="container">
<div class="map" id="map"></div>
<div id="LayerListContainer">
<div id="LayerList"></div>
<h2>Legend</h2>
</div>
<div style="position:absolute; right:5px; top:5px; z-Index:999;">
<div data-dojo-props=
"title:'Switch Basemap', closable:false, open:false"
data-dojo-type="dijit/TitlePane">
<div data-dojo-type="dijit/layout/ContentPane" style=
"width:380px; height:280px; overflow:auto;">
<div id="basemapGallery"></div>
<div id="ui-esri-map"></div>
<div id="ui-esri-dijit-geocoder"></div>
</div>
</div>
</div>
</div>
</body>
</html>