nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

LayerList does not load, shuts down map

JacobBuchanan

I am attempting to use the LayerList widget in a web application that I am developing, but whenever I instantiate it my web application does not load the map or any of the other esri widgets that I have loaded onto the site. Has anyone else experienced this problem before? I have been hard-coding the site instead of using the esri web map for privacy reasons, so is there any way to use the LayerList in your own html code?

Find more posts tagged with

Accepted answers

All comments

JacobBuchanan

Well the problem with that is whenever I put the LayerList in the first place, like when I instantiate it with

"esri/dijit/LayerList" and function(LayerList)

the map will not load and none of the other widgets function correctly

TimWitt2

Hey Jacob,

why do you make it a function? Can't you load it just like your other widgets?

var MyLayers = arcgisUtils.getLayerList();

var myWidget = new LayerList({

map: map,

layers: MyLayers

},"layerList");

myWidget.startup();

Tim

JacobBuchanan

Here is the JavaScript code I used for the site, if you would like to see the HTML code as well I can upload it:

// JavaScript source code

var main = function () {

var map, toolbar, symbol, geomTask;

require([

"dojo/dom",

"dojo/on",

"dojo/mouse",

"esri/Color",

"dojo/keys",

"dojo/parser",

"esri/config",

"esri/arcgis/utils",

"esri/sniff",

"esri/map",

"esri/InfoTemplate",

"esri/tasks/query",

"esri/tasks/QueryTask",

"esri/dijit/HomeButton",

"esri/dijit/LocateButton",

"esri/dijit/Scalebar",

"esri/dijit/Search",

"esri/SnappingManager",

"esri/dijit/Measurement",

"esri/layers/FeatureLayer",

"esri/layers/ArcGISDynamicMapServiceLayer",

"esri/renderers/SimpleRenderer",

"esri/tasks/GeometryService",

"esri/symbols/SimpleMarkerSymbol",

"esri/symbols/SimpleLineSymbol",

"esri/symbols/SimpleFillSymbol",

"esri/toolbars/draw",

"esri/graphic",

"dijit/registry",

"dijit/form/Button",

"dijit/WidgetSet",

"esri/widget/LayerList",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"dijit/TitlePane",

"dijit/form/CheckBox",

"dijit/layout/AccordionContainer",

"dojo/domReady!"

], function (dom, on, mouse, Color, keys, parser, esriConfig, arcgisUtils, has, Map, InfoTemplate, Query, QueryTask, HomeButton, LocateButton, Scalebar, Search,

SnappingManager, Measurement, FeatureLayer, ArcGISDynamicMapServiceLayer, SimpleRenderer, GeometryService, SimpleMarkerSymbol,

SimpleLineSymbol, SimpleFillSymbol, Draw, Graphic, registry, LayerList, AccordionContainer) {

parser.parse();

//Replace with our own geometry service eventually

esriConfig.defaults.geometryService = new GeometryService("http://tasks.arcgisonline.com/ArcGIS/rest/services/Geometry/GeometryServer");

map = new Map("map", {

basemap: "topo",

center: [-112.321, 34.595],

zoom: 14

});

var transportation_layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://053034w7:6080/arcgis/rest/services/City_Map_Services/Transportation_Layer/MapServer");

map.addLayer(transportation_layer);

var parcel_layer = new esri.layers.ArcGISDynamicMapServiceLayer("http://053034w7:6080/arcgis/rest/services/City_Map_Services/Parcels_Layer/MapServer");

map.addLayer(parcel_layer);

//-----Parcels Query Tool-----//

var queryTask = new QueryTask("http://053034w7:6080/arcgis/rest/services/City_Map_Services/Parcels_Layer/MapServer/7");

var parcel_ID_query = new Query();

parcel_ID_query.returnGeometry = false;

parcel_ID_query.outFields = ["OBJECTID", "PARCEL_ID", "PARLABEL", "COUNTY", "SUBCOMMON"];

on(dom.byId("parcel_execute"), "click", parcel_ID_execute);

function parcel_ID_execute() {

parcel_ID_query.where = "BOOK=" + dom.byId("parcel_book").value + "AND MAP=" + dom.byId("parcel_map").value + "AND PARCEL=" + dom.byId("parcel_ID").value;

parcel_ID_queryTask.execute(parcel_ID_query, parcel_ID_showResults);

}

function parcel_ID_showResults(parcel_ID_results) {

var parcel_ID_resultItems = [];

var parcel_ID_resultCount = parcel_ID_results.features.length;

for (var i = 0; i < parcel_ID_resultCount; i++) {

var featureAttributes = parcel_ID_results.features.attributes;

for (var attr in featureAttributes) {

parcel_ID_resultItems.push("" + attr + ": " + featureAttributes[attr] + " ");

}

parcel_ID_resultItems.push(" ");

}

dom.byId("parcel_ID_info").innerHTML = parcel_ID_resultItems.join("");

}

//-----Address Query Tool-----//

var address_query = new Query();

address_query.returnGeometry = false;

address_query.outFields = ["OBJECTID", "PARCEL_ID", "PARLABEL", "COUNTY", "SUBCOMMON"];

on(dom.byId("address_execute"), "click", address_execute);

function address_execute() {

address_query.where = "BOOK=" + dom.byId("parcel_book").value + "AND MAP=" + dom.byId("parcel_map").value + "AND PARCEL=" + dom.byId("parcel_ID").value;

address_queryTask.execute(address_query, address_showResults);

}

function address_showResults(address_results) {

var address_resultItems = [];

var address_resultCount = address_results.features.length;

for (var i = 0; i < address_resultCount; i++) {

var featureAttributes = address_results.features.attributes;

for (var attr in featureAttributes) {

address_resultItems.push("" + attr + ": " + featureAttributes[attr] + " ");

}

address_resultItems.push(" ");

}

dom.byId("address_info").innerHTML = address_resultItems.join("");

}

//-----Home Button-----//

var home = new HomeButton({

theme: "HomeButton",

map: map

}, "HomeButton");

home.startup();

//-----Locate Button-----//

geoLocate = new LocateButton({

map: map

}, "LocateButton");

geoLocate.startup();

//-----Scalebar-----//

var scale = new Scalebar({

map: map,

scalebarUnit: "dual"

});

//-----Search Widget-----//

var search = new Search({

enableButtonMode: true,

map: map,

zoomScale: 5000000

}, "search");

search.startup();

//-----Definitions of Symbols-----//

var sfs = new SimpleFillSymbol(

"solid",

new SimpleLineSymbol("solid", new Color([195, 176, 23]), 2),

null

);

//-----This will be taken out later and replaced with our own FeatureLayer-----//

var parcelsLayer = new FeatureLayer("http://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Louisville/LOJIC_LandRecords_Louisville/MapServer/0", {

mode: FeatureLayer.MODE_ONDEMAND,

outFields: ["*"]

});

parcelsLayer.setRenderer(new SimpleRenderer(sfs));

map.addLayers([parcelsLayer]);

//-----------------------------------------------------------------------------//

var snapManager = map.enableSnapping({

snapKey: has("mac") ? keys.META : keys.CTRL

});

var layerInfos = [{

layer: parcelsLayer

}];

snapManager.setLayerInfos(layerInfos);

//-----Measurement Tool-----//

var measurement = new Measurement({

map: map

}, dom.byId("measurementDiv"));

measurement.startup();

//-----Drawing Tool-----//

map.on("load", createToolbar);

// loop through all dijits, connect onClick event

// listeners for buttons to activate drawing tools

registry.forEach(function (d) {

// d is a reference to a dijit

// could be a layout container or a button

if (d.declaredClass === "dijit.form.Button") {

d.on("click", activateTool);

}

});

function activateTool() {

var tool = this.label.toUpperCase().replace(/ /g, "_");

toolbar.activate(Draw[tool]);

map.hideZoomSlider();

}

function createToolbar(themap) {

toolbar = new Draw(map, { tooltipOffset: 20, drawTime: 40 });

toolbar.on("draw-end", addToMap);

}

function addToMap(evt) {

var symbol;

toolbar.deactivate();

map.showZoomSlider();

switch (evt.geometry.type) {

//Sets the Marker symbol and styling for each point

case "point":

case "multipoint":

symbol = new SimpleMarkerSymbol(SimpleMarkerSymbol.STYLE_CIRCLE,

20, new SimpleLineSymbol(

SimpleLineSymbol.STYLE_SOLID,

new Color([240, 0, 0, 0.5]),

new Color([240, 0, 0, 0.9]));

break;

//Sets the Line symbol and styling for each freehand polyline

case "polyline":

symbol = new SimpleLineSymbol.setColor([225, 175, 20]);

break;

default:

symbol = new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color([200, 0, 0, 0.9]), 3.5), new Color([200, 0, 0, 0.3]))

break;

}

var graphic = new Graphic(evt.geometry, symbol);

map.graphics.add(graphic);

}

//-----Layer List-----//

function(response) {

var myWidget = new LayerList({

map: response.map,

layers: arcgisUtils.getLayerList(response)

},"layerList");

myWidget.startup();

};

function checkboxClick(value) {

var check = dojo.byId("parcelCheckBox");

if (registry.byId("parcelCheckBox").get("checked")) {

check.push("The box is checked");

}

});

//-----End of ArcGIS JavaScript-----//

$("a.tab").click(function () {

// switch all tabs off

$(".active").removeClass("active");

// switch this tab on

$(this).addClass("active");

// slide all elements with the class 'content' up

$(".content").slideUp();

// Now figure out what the 'title' attribute value is and find the element with that id. Then slide that down.

var content_show = $(this).attr("title");

$("#" + content_show).slideDown();

});

/*-----End of Tab Function-----*/

}

$(document).ready(main);

ChadKopplin

Are you able to share the code with us to take a look?

Join the Conversation

Signed in members can post, follow updates, and more. New here? Register a free account.

Quick Links

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.