topic Re: LayerList does not load, shuts down map in ArcGIS JavaScript Maps SDK Questions

LayerList does not load, shuts down map

JacobBuchanan — Thu, 14 Jan 2016 17:42:17 GMT

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?

Re: LayerList does not load, shuts down map

ChadKopplin — Thu, 14 Jan 2016 17:44:37 GMT

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

Re: LayerList does not load, shuts down map

JacobBuchanan — Thu, 14 Jan 2016 17:52:03 GMT

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

Re: LayerList does not load, shuts down map

TimWitt2 — Thu, 14 Jan 2016 18:05:53 GMT

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

Re: LayerList does not load, shuts down map

JacobBuchanan — Thu, 14 Jan 2016 18:09:37 GMT

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

Re: LayerList does not load, shuts down map

TimWitt2 — Thu, 14 Jan 2016 18:19:34 GMT

Did you open up the developer console and see what it says? Usually that might hint at what is going wrong.

Re: LayerList does not load, shuts down map

TimWitt2 — Thu, 14 Jan 2016 18:20:28 GMT

Also in your code you use widget/LayerList not dijit/LayerList

Re: LayerList does not load, shuts down map

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:53:55 GMT

Jacob,

It is a simple issue of your requires and vars being out of order:

This is what you have:

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

and this is what you need:

"esri/toolbars/draw",
        "esri/graphic",
        "dijit/registry",
    "esri/dijit/LayerList",
    "dijit/layout/AccordionContainer",
        "dijit/form/Button",
        "dijit/WidgetSet",
        "dijit/layout/BorderContainer",
        "dijit/layout/ContentPane",
        "dijit/TitlePane",
        "dijit/form/CheckBox",
        "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)

Re: LayerList does not load, shuts down map

JacobBuchanan — Thu, 14 Jan 2016 18:30:54 GMT

I tried the edits you gave me Robert and this is what happens whenever I use the "esri/dijit/LayerList", when it is supposed to look like this:

Also I checked the developer console and it gives me a 404 error in regards to the LayerList, so the problem is that LayerList is not connecting whatsoever to the web application I have running

Re: LayerList does not load, shuts down map

RobertScheitlin__GISP — Sat, 11 Dec 2021 09:53:58 GMT

Jacob,

Hmm... "esri/dijit/LayerList" is straight from the api doc: LayerList | API Reference | ArcGIS API for JavaScript

Not sure why you are not resolving that object. The main thing I was poitning out was that the order of your requires and subsequest vars have to match exactly. but all of these at the end do not require vars unless you plan to use then in the JS code and not just the html portion:

        "dijit/layout/AccordionContainer",  
        "dijit/form/Button",  
        "dijit/WidgetSet",  
        "dijit/layout/BorderContainer",  
        "dijit/layout/ContentPane",  
        "dijit/TitlePane",  
        "dijit/form/CheckBox",  
        "dojo/domReady!"