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>
<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 src="http://js.arcgis.com/3.10/">
</script>
<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'
}
};
</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://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>
<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>