Lost on adding Layerlist

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>

"viewport">

"apple-mobile-web-app-status-bar-style">

<title>NRP Surface Leases</title>

"stylesheet">

"stylesheet">

"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 {

width: 16px;

height: 16px;

}

.zoomoutIcon {

width: 16px;

height: 16px;

}

.zoomprevIcon {

width: 16px;

height: 16px;

}

.panIcon {

width: 16px;

height: 16px;

}

.deactivateIcon {

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>

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>

<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>

<h2>Legend</h2>

</div>

<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>

</body>

</html>

JustinShepard · ‎12-10-2015

I'm not able to go through your code right now but here's a simple demo that I pulled together from other esri samples. It might help you get started.

At first pass through your code I don't see anywhere that you are actually attempting to build the ListLayer widget (I do see the div where you want it to be placed). See the section below that is calling 'new LayerList'. Also in this demo I'm waiting to build the widget until after the layers have been added to the map, map.on("layers-add-result",function(result){...});

<!DOCTYPE html>

<html>

<head>

<title>FeatureLayer</title>

<style>

html, body, #map {

padding: 0;

margin: 0;

height: 100%;

width: 100%;

}

</style>

require([

"esri/map",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/layers/FeatureLayer",

"esri/arcgis/utils",

"esri/dijit/LayerList",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dojo/domReady!"

],

function(

Map,

ArcGISDynamicMapServiceLayer,

FeatureLayer,

arcgisUtils,

LayerList

) {

var map = new Map("map", {

basemap: "gray",

center: [-122.75, 45.45],

zoom: 12

});

map.on("layers-add-result",function(result){

console.log("added", result);

if (myWidget) {

console.log("ll exists");

} else {

console.log("map", map);

var myWidget = new LayerList({

map: map

,showSubLayers: true

//,showOpacitySlider: true//not working with this demo

//, layers: map.layers //include all layers, even base and reference

,layers:[

{

layer: dynamicLayer // required unless featureCollection.

//,featureCollection: featureCollection // required unless layerObject. If the layer is a feature collection, should match AGOL feature collection response and not have a layerObject.

,showSubLayers: true // optional, show sublayers for this layer. Defaults to the widget's 'showSubLayers' property.

,showLegend: true // optional, display a legend for the layer items.

//,content: // optional, custom node to insert content. It appears below the title.

,showOpacitySlider: false // optional, display the opacity slider for layer items.

//,button: // optional, custom button node that will appear within the layer title.

//,visibility: true // optionally set the default visibility

, id: "Dynamic Layer" // optionally set the layer's id

}

, {

layer: featureLayer // required unless featureCollection.

//,featureCollection: featureCollection // required unless layerObject. If the layer is a feature collection, should match AGOL feature collection response and not have a layerObject.

, showSubLayers: true // optional, show sublayers for this layer. Defaults to the widget's 'showSubLayers' property.

, showLegend: true // optional, display a legend for the layer items.

//,content: // optional, custom node to insert content. It appears below the title.

, showOpacitySlider: false // optional, display the opacity slider for layer items.

//,button: // optional, custom button node that will appear within the layer title.

//, visibility: false // optionally set the default visibility

//, id: "Dynamic Layer" // optionally set the layer's id

}

]

, showLegend: true

}, "layerList");

myWidget.startup();

console.log("ll created");

}

});

/****************************************************************

* Add feature layer - A FeatureLayer at minimum should point

* to a URL to a feature service or point to a feature collection

* object.

***************************************************************/

// Carbon storage of trees in Warren Wilson College.

//ArcGISDynamicMapServiceLayer

var dynamicLayer = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer");//, { "id": "Dynamic Layer" });

//FeatureLayer

var featureLayer = new FeatureLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/911CallsHotspot/MapServer/1");

map.addLayers([featureLayer, dynamicLayer]);

});

</script>

</head>

<div class="container" data-dojo-type="dijit/layout/BorderContainer"

data-dojo-props="design:'headline',gutters:false"

style="height:100%">

<div>Layer List Test</div>

</div>

</div>

</html>

KenBuja · ‎12-10-2015

The first thing you have to correct is to make sure your function arguments are in the same order as your module requires. You have "esri/arcgis/utils" twice (with the same function arguments for both) and towards the end, things go astray after "dijit/registry"