Help!! TOC not showing up.....

JenniferZumbado-Hannibal1 · ‎09-29-2014

I'm trying to learn programming with ArcGIS API for Javascript. This is my first attempt at this so please excuse my ignorance.

Anyhow, what I want is very simple...use a dynamic map service with 23 layers (yes...I know...but my audience "needs them all") to be able to check off/on within a TOC.

Thus, I downloaded the Table of Contents (TOC)/Legend Widget for JavaScript API and incorporated into my script. I haven't been very successful at all. I'm using Notepad ++ and have tried opening it with several different browsers (Firefox v. 31, Chrome v. 37, & IE v.8). Debugging with Chrome's developer tools mostly.

I've put the TOC widget folder and .html on my webserver to test. No results! Not happening! What I'm I doing wrong?

This is my script so far:

<!DOCTYPE html>

<html>

<head>

<title>Blabla....</title>

<style>

html, body

.

</style>

</script>

// helpful for understanding dojoConfig.packages vs. dojoConfig.paths:

// http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/

var dojoConfig = {

paths: {

//if you want to host on your own server, download and put in folders then use path like:

agsjs: location.pathname.replace(/\/[^/]+$/, '') + '/../src/agsjs'

}

};

</script>

var map, toc, dynaLayer1;

require(["dojo/_base/connect",

"dojo/on",

"esri/map",

"esri/dijit/Geocoder",

"esri/geometry/Extent",

"esri/layers/FeatureLayer",

"esri/layers/ArcGISTiledMapServiceLayer",

"esri/symbols/SimpleFillSymbol",

"esri/renderers/ClassBreaksRenderer",

"agsjs/dijit/TOC",

"esri/graphic",

"esri/symbols/SimpleMarkerSymbol",

"esri/geometry/screenUtils",

"dojo/dom",

"dojo/dom-construct",

"dojo/query",

"dojo/_base/Color",

"esri/dijit/Scalebar",

"esri/dijit/HomeButton",

"esri/dijit/OverviewMap",

"dijit/layout/BorderContainer",

"dijit/layout/ContentPane",

"esri/dijit/BasemapGallery",

"esri/arcgis/utils",

"dojo/parser",

"esri/layers/ArcGISDynamicMapServiceLayer",

"dojo/fx",

"dojo/domReady!"

], function(connect, on,

Map, Geocoder, Extent, FeatureLayer, ArcGISTiledMapServiceLayer, SimpleFillSymbol,

ClassBreaksRenderer, TOC,

Graphic, SimpleMarkerSymbol, screenUtils,

dom, domConstruct, query, Color, Scalebar, HomeButton, OverviewMap,

BorderContainer, ContentPane, BasemapGallery, arcgisUtils, parser, ArcGISDynamicMapServiceLayer

) {

// call the parser to create the dijit layout dijits

parser.parse(); // note djConfig.parseOnLoad = false;

// create a map

var map = new Map("map", {

sliderOrientation : "horizontal",

basemap: "topo",

center: [-93.745776,32.513614],

zoom: 14

});

//variable REST service Shreveport as a layer

dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://noonecares/rest/services/MapServer", {

opacity: 0.9

});@

alert("1"); //shows up when it runs

//Add a TOC widget

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

// overwrite the default visibility of service.

// TOC will honor the overwritten value.

dynaLayer1.setVisibleLayers([3, 7, 8, 23]);

// {

toc = new TOC({

map: map,

layerInfos: [{

layer: dynaLayer1,

title: "Base Map"

//collapsed: true, // whether this root layer should be collapsed initially, default false.

//slider: true, // whether to display a transparency slider.

//autoToggle: true //whether to automatically collapse when turned off, and expand when turn on for groups layers. default true.

}]

}, 'tocDiv');

toc.startup();

alert("2"); //it skipped when it runs

toc.on('load', function(){

alert("3"); //it skipped when it runs

if (console)

console.log('TOC loaded');

dom.byId("InsertNewLayer").disabled = false;

});

map.addLayers([dynaLayer1]);

alert("4"); //shows up when it runs

on(dom.byId("SetOpacity"), 'click', function(evt){

if (dynaLayer1 != null) {

dynaLayer1.setOpacity(0.2);

}

});

//adding geocoder widget

var geocoder = new Geocoder({

arcgisGeocoder: {

placeholder: "Find an address"

},

autoComplete: true,

map: map

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

map.on("load", enableSpotlight);

geocoder.on("select", showLocation);

geocoder.on("clear", removeSpotlight);

//adding scalebar widget

var scalebar = new Scalebar({

map: map,

attachTo: "bottom-left",

scalebarUnit: "dual"

});

//adding home button widget

var home = new HomeButton({

map: map

}, "HomeButton");

home.startup();

//adding overview map widget

var overviewMapDijit = new OverviewMap({

map: map,

visible: true,

attachTo: "bottom-right",

opacity: .40

});

overviewMapDijit.startup();

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

});

//showing Lat, Long location on the bottom of map

function showLocation(evt) {

map.graphics.clear();

var point = evt.result.feature.geometry;

var symbol = new SimpleMarkerSymbol().setStyle(

SimpleMarkerSymbol.STYLE_SQUARE).setColor(

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

);

var graphic = new Graphic(point, symbol);

map.graphics.add(graphic);

map.infoWindow.setTitle("Search Result");

map.infoWindow.setContent(evt.result.name);

map.infoWindow.show(evt.result.feature.geometry);

var spotlight = map.on("extent-change", function(extentChange) {

var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent);

var width = geom.xmax - geom.xmin;

var height = geom.ymin - geom.ymax;

var max = height;

if ( width > height ) {

max = width;

}

var margin = '-' + Math.floor(max/2) + 'px 0 0 -' + Math.floor(max/2) + 'px';

query(".spotlight").addClass("spotlight-active").style({

width: max + "px",

height: max + "px",

margin: margin

});

spotlight.remove();

});

}

//adding point spot holder

function enableSpotlight() {

var html = "<div id='spotlight' class='spotlight'></div>"

domConstruct.place(html, dom.byId("map_container"), "first");

}

//removing point spot holder

function removeSpotlight() {

query(".spotlight").removeClass("spotlight-active");

map.infoWindow.hide();

map.graphics.clear();

}

});

</script>

</head>

<div>

<b>Blabla....</b>

</ul>

</div>

</div>

<div data-dojo-type="dijit/TitlePane"

data-dojo-props="title:'Switch Basemap', closable:false, open:false">

</div>

</body>

</html>

TimothyHales · ‎10-09-2014

This issue here is that you have used two different accounts within this thread. The question was originally posted with 'cosgisadmin' and you are currently logged in using 'jenzumbado'. You will need to be logged in with 'cosgisadmin' to mark the question as correct.

View solution in original post

KenBuja · ‎09-29-2014

I moved the dojoConfig to before loading the Esri JS API and the TOC is added to the map.

<!DOCTYPE html>
<html>
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no">
    <title>Blabla....</title>

    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/dojo/dijit/themes/claro/claro.css">
    <link rel="stylesheet" href="http://js.arcgis.com/3.10/js/esri/css/esri.css">
    <link rel="stylesheet" type="text/css" href="../src/agsjs/css/agsjs.css" />

    <style>
        html, body . . . .
    </style>


    <script type="text/javascript">
        // helpful for understanding dojoConfig.packages vs. dojoConfig.paths:
        // http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/
        var dojoConfig = {
            paths: {
                //if you want to host on your own server, download and put in folders then use path like:
                //agsjs: location.pathname.replace(/\/[^/]+$/, '') + '/../src/agsjs'
                agsjs: 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs'
            }
        };

    </script>
    <script src="http://js.arcgis.com/3.10/">
    </script>

    <script type="text/javascript">
        var map, toc, dynaLayer1;

        require(["dojo/_base/connect",
                 "dojo/on",
                 "esri/map",
                 "esri/dijit/Geocoder",
                 "esri/geometry/Extent",
                 "esri/layers/FeatureLayer",
                 "esri/layers/ArcGISTiledMapServiceLayer",
                 "esri/symbols/SimpleFillSymbol",
                 "esri/renderers/ClassBreaksRenderer",
                 "agsjs/dijit/TOC",
                 "esri/graphic",
                 "esri/symbols/SimpleMarkerSymbol",
                 "esri/geometry/screenUtils",
                 "dojo/dom",
                 "dojo/dom-construct",
                 "dojo/query",
                 "dojo/_base/Color",
                 "esri/dijit/Scalebar",
                 "esri/dijit/HomeButton",
                 "esri/dijit/OverviewMap",
                 "dijit/layout/BorderContainer",
                 "dijit/layout/ContentPane",
                 "esri/dijit/BasemapGallery",
                 "esri/arcgis/utils",
                 "dojo/parser",
                 "esri/layers/ArcGISDynamicMapServiceLayer",
                 "dojo/fx",

                 "dojo/domReady!"

        ], function (connect, on,
                     Map, Geocoder, Extent, FeatureLayer, ArcGISTiledMapServiceLayer, SimpleFillSymbol,
                     ClassBreaksRenderer, TOC,
                     Graphic, SimpleMarkerSymbol, screenUtils,
                     dom, domConstruct, query, Color, Scalebar, HomeButton, OverviewMap,
                     BorderContainer, ContentPane, BasemapGallery, arcgisUtils, parser, ArcGISDynamicMapServiceLayer
         ) {
            // call the parser to create the dijit layout dijits
            parser.parse(); // note djConfig.parseOnLoad = false;

            // create a map
            var map = new Map("map", {
                sliderOrientation: "horizontal",
                basemap: "topo",
                center: [-93.745776, 32.513614],
                zoom: 14
            });

            //variable REST service Shreveport as a layer
            dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/USA/MapServer", {
                opacity: 0.9
            });

            alert("1");  //shows up when it runs

            //Add a TOC widget
            map.on('layers-add-result', function (evt) {
                // overwrite the default visibility of service.
                // TOC will honor the overwritten value.
                dynaLayer1.setVisibleLayers([3, 7, 8, 23]);
                //  {
                toc = new TOC({
                    map: map,
                    layerInfos: [{
                        layer: dynaLayer1,
                        title: "Base Map"
                        //collapsed: true, // whether this root layer should be collapsed initially, default false.
                        //slider: true, // whether to display a transparency slider.
                        //autoToggle: true //whether to automatically collapse when turned off, and expand when turn on for groups layers. default true.
                    }]
                }, 'tocDiv');
                toc.startup();

                alert("2"); //it skipped when it runs

                toc.on('load', function () {
                    alert("3"); //it skipped when it runs
                    if (console)
                        console.log('TOC loaded');
                    dom.byId("InsertNewLayer").disabled = false;
                });
            });

            map.addLayers([dynaLayer1]);

            alert("4"); //shows up when it runs

            on(dom.byId("SetOpacity"), 'click', function (evt) {
                if (dynaLayer1 != null) {
                    dynaLayer1.setOpacity(0.2);
                }
            });

            //adding geocoder widget
            var geocoder = new Geocoder({
                arcgisGeocoder: {
                    placeholder: "Find an address"
                },
                autoComplete: true,
                map: map
            }, dom.byId("search"));

            map.on("load", enableSpotlight);

            geocoder.on("select", showLocation);

            geocoder.on("clear", removeSpotlight);

            //adding scalebar widget
            var scalebar = new Scalebar({
                map: map,
                attachTo: "bottom-left",
                scalebarUnit: "dual"
            });

            //adding home button widget
            var home = new HomeButton({
                map: map
            }, "HomeButton");
            home.startup();

            //adding overview map widget
            var overviewMapDijit = new OverviewMap({
                map: map,
                visible: true,
                attachTo: "bottom-right",
                opacity: .40
            });
            overviewMapDijit.startup();

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

            //showing Lat, Long location on the bottom of map
            function showLocation(evt) {
                map.graphics.clear();
                var point = evt.result.feature.geometry;
                var symbol = new SimpleMarkerSymbol().setStyle(
                  SimpleMarkerSymbol.STYLE_SQUARE).setColor(
                  new Color([255, 0, 0, 0.5])
                );
                var graphic = new Graphic(point, symbol);
                map.graphics.add(graphic);

                map.infoWindow.setTitle("Search Result");
                map.infoWindow.setContent(evt.result.name);
                map.infoWindow.show(evt.result.feature.geometry);

                var spotlight = map.on("extent-change", function (extentChange) {
                    var geom = screenUtils.toScreenGeometry(map.extent, map.width, map.height, extentChange.extent);
                    var width = geom.xmax - geom.xmin;
                    var height = geom.ymin - geom.ymax;
                    var max = height;
                    if (width > height) {
                        max = width;
                    }

                    var margin = '-' + Math.floor(max / 2) + 'px 0 0 -' + Math.floor(max / 2) + 'px';

                    query(".spotlight").addClass("spotlight-active").style({
                        width: max + "px",
                        height: max + "px",
                        margin: margin
                    });
                    spotlight.remove();
                });
            }

            //adding point spot holder
            function enableSpotlight() {
                var html = "<div id='spotlight' class='spotlight'></div>"
                domConstruct.place(html, dom.byId("map_container"), "first");
            }

            //removing point spot holder
            function removeSpotlight() {
                query(".spotlight").removeClass("spotlight-active");
                map.infoWindow.hide();
                map.graphics.clear();
            }
        });
    </script>

</head>

<body class="claro">
    <div id="content" data-dojo-type="dijit/layout/BorderContainer" design="headline" gutters="true" style="width: 100%; height: 100%; margin: 0;">
        <div id="header" data-dojo-type="dijit/layout/ContentPane" region="top">
            <div>
                <ul style="margin:15px">
                    <b>Blabla....</b>
                    <div id="search"></div>
                </ul>
            </div>
        </div>
        <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" region="left" splitter="true">
            <div id="tocDiv">
            </div>
        </div>

        <div id="map" data-dojo-type="dijit/layout/ContentPane" region="center">
            <div id="HomeButton"></div>
            <div style="position:absolute; right:50px; top:10px; z-Index:999;">
                <div data-dojo-type="dijit/TitlePane"
                     data-dojo-props="title:'Switch Basemap', closable:false, open:false">
                    <div data-dojo-type="dijit/layout/ContentPane" style="width:380px; height:280px; overflow:auto;">
                        <div id="basemapGallery"></div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</body>
</html>

JenniferZumbado-Hannibal1 · ‎09-29-2014

Well...tried and that didn't help. But now I'm starting to believe it's my proxy settings.

I'll give that a try and see. I'll post the result when I can configure the settings.

Thanks so much Ken.

JenniferZumbado-Hannibal1 · ‎09-29-2014

I had one of our IT people try loading it without proxy settings and id didn't work.

I loaded the page using IE v. 8 and opened the developer tools and in the console it gave me this message:

xhrFailed init.js, line 32 character 224

Object doesn't support this property or method Blabla.html, line 83 character 2

I don't get it.

KenBuja · ‎09-29-2014

I would start by making simpler apps that contain the components individually to see whether they work, then start putting them together into a single app.

One thing that my IDE gave warning about was here:

<div>
   <ul style="margin:15px">
      <b>Blabla....</b>
      <div id="search"></div>
   </ul>
</div>

"Element 'b' cannot be nested inside element 'ul'"

and

"Element 'div' cannot be nested inside element 'ul'"

Also you should change the html declarations to something like

<div id="content"
   data-dojo-type="dijit/layout/BorderContainer"
   data-dojo-props="design:'headline', gutters:true"
   style="width: 100%; height: 100%; margin: 0;">

Take a look at this page‌ for more information about layouts in Dojo.

JenniferZumbado-Hannibal1 · ‎09-29-2014

I got it to work finally. Had to get an ESRI rep involved.

I did have to put in your reference but used packages instead of paths:

parseOnLoad: true,

packages: [{

"name": "agsjs",

"location": "http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs/"

}]

};

</script>

Now the problem is it's not putting the map in the center and my overview, switch base map, and find widgets are not showing up.

I will study the Dojo layouts to straighten this out.

Thanks.

LuciHawkins · ‎09-29-2014

You have an extra character on line 185 - remove the "@" symbol in the code

//variable REST service Shreveport as a layer
 dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://noonecares/rest/services/MapServer", {
       opacity: 0.9
 });@ //remove the @ symbol here

Luci

JenniferZumbado-Hannibal · ‎10-06-2014

New news....

Much of the problem I was having is the agsjs itself. My in-house (one I didn't know I had) expert in Java made some corrections with the original gmaps-utility-gis - Revision 525: /tags/agsjs/latest/build/agsjs which was causing me to show up two of the same Base Map layer (var dynaLayer1). I'ved attached corrected agsjs to this post. Also, a bit of help from ESRI Support did the trick too when it came to the HTML. Stupid <divs> are a pain .

I also went with the the paths instead of packages:

// helpful for understanding dojoConfig.packages vs. dojoConfig.paths:

// http://www.sitepen.com/blog/2013/06/20/dojo-faq-what-is-the-difference-packages-vs-paths-vs-aliases/

var dojoConfig = {

paths: {

//if you want to host on your own server, download and put in folders then use path like:

agsjs: ".../toc/src/agsjs", //use the local corrected version

//agsjs: 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs'

}

};

</script>

</head>

<div>

</ul>

</div>

</div>

<div id="map" data-dojo-type="dijit/layout/ContentPane"

data-dojo-props="region:'center'">

<div data-dojo-type="dijit/TitlePane"

data-dojo-props="title:'Switch Basemap', closable:false, open:false">

</div>

Also, the people who responded to me helped me tremendously. Thanks so much to all who responded. You guys are the greatest!

KenBuja · ‎10-06-2014

Was the TOC.js file changed? I did a comparison between the one you uploaded and the 2.10 version. The only difference I saw was a console.log line added.

And if one of the posts to your original question is helpful, you should mark it as such.

JenniferZumbado-Hannibal · ‎10-06-2014

Ken Buja‌ when I click on the drop down menu all I get is Report Abuse. So, I don't know how to mark as helpful or even "Question Answered".