topic Re: Help!! TOC not showing up..... in ArcGIS JavaScript Maps SDK Questions

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

JenniferZumbado-Hannibal1 — Mon, 29 Sep 2014 14:16:14 GMT

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>

Re: Help!! TOC not showing up.....

KenBuja — Mon, 29 Sep 2014 15:16:46 GMT

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>

Re: Help!! TOC not showing up.....

JenniferZumbado-Hannibal1 — Mon, 29 Sep 2014 15:47:58 GMT

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.

Re: Help!! TOC not showing up.....

JenniferZumbado-Hannibal1 — Mon, 29 Sep 2014 17:08:10 GMT

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.

Re: Help!! TOC not showing up.....

KenBuja — Mon, 29 Sep 2014 18:44:49 GMT

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.

Re: Help!! TOC not showing up.....

LuciHawkins — Mon, 29 Sep 2014 20:05:11 GMT

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

Re: Help!! TOC not showing up.....

JenniferZumbado-Hannibal1 — Mon, 29 Sep 2014 20:05:25 GMT

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.

Re: Help!! TOC not showing up.....

JenniferZumbado-Hannibal — Mon, 06 Oct 2014 12:57:33 GMT

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!

Re: Help!! TOC not showing up.....

KenBuja — Mon, 06 Oct 2014 13:44:42 GMT

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.

Re: Help!! TOC not showing up.....

JenniferZumbado-Hannibal — Mon, 06 Oct 2014 20:15:51 GMT

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

Re: Help!! TOC not showing up.....

KenBuja — Mon, 06 Oct 2014 20:28:15 GMT

This might be a question for Timothy Hales‌

Re: Help!! TOC not showing up.....

RobertScheitlin__GISP — Mon, 06 Oct 2014 20:38:16 GMT

Jennifer,

You need to ensure that you are logged in and that you click on the Actions Menu from the actually content page and not from the message in your inbox.

Re: Help!! TOC not showing up.....

TimothyHales — Tue, 07 Oct 2014 15:23:34 GMT

Jennifer Zumbado-Hannibal‌

When you are logged in you should see a "Correct Answer" button for each reply.

Re: Help!! TOC not showing up.....

JenniferZumbado-Hannibal — Thu, 09 Oct 2014 13:08:56 GMT

Sorry Timothy Hales‌ and Robert Scheitlin but I do not see that button.

I'm not in my inbox. I'm actually on the thread post itself and again....all I see in the Actions drop down menu is 'Report Abuse'.

I'm logged in with my user name and yet I can't post this as resolved.

Should I contact ESRI Support to do a screen share?

Thanks,

Re: Help!! TOC not showing up.....

RobertScheitlin__GISP — Thu, 09 Oct 2014 13:23:04 GMT

Jennifer,

You would also only get this option (the option to mark as "Correct Answer") if you are the original poster.

Re: Help!! TOC not showing up.....

TimothyHales — Thu, 09 Oct 2014 13:27:47 GMT

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.

Re: Help!! TOC not showing up.....

JenniferZumbado-Hannibal1 — Thu, 09 Oct 2014 17:28:20 GMT

You were right Timothy Hales‌ I was logged into my personal account and not my organization account. I wish I can name them differently.

Thanks so much for all your help guys. Sorry for being such a pain. Again, I'm new at this