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>

KenBuja · ‎10-06-2014

This might be a question for Timothy Hales‌

TimothyHales · ‎10-07-2014

Jennifer Zumbado-Hannibal‌

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

RobertScheitlin__GISP · ‎10-06-2014

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.

JenniferZumbado-Hannibal · ‎10-09-2014

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,

RobertScheitlin__GISP · ‎10-09-2014

Jennifer,

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

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.

JenniferZumbado-Hannibal1 · ‎10-09-2014

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