LayerList does not load, shuts down map

2102
9
01-14-2016 09:42 AM
JacobBuchanan
New Contributor II

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?

0 Kudos
9 Replies
ChadKopplin
Regular Contributor

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

JacobBuchanan
New Contributor II

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("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");

                }

                parcel_ID_resultItems.push("<br>");

            }

            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("<b>" + attr + ":</b>  " + featureAttributes[attr] + "<br>");

                }

                address_resultItems.push("<br>");

            }

            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/M...", {

            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]),

                10

              ),

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

0 Kudos
TimWitt2
MVP Regular Contributor

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

0 Kudos
JacobBuchanan
New Contributor II

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

0 Kudos
TimWitt2
MVP Regular Contributor

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

TimWitt2
MVP Regular Contributor

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

RobertScheitlin__GISP
MVP Esteemed Contributor

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)

JacobBuchanan
New Contributor II

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

0 Kudos
RobertScheitlin__GISP
MVP Esteemed Contributor

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

0 Kudos