Happy Thanksgiving week to all stateside (and beyond) and good day to everyone else.
I am slowly teaching myself (with the help from the user community) the JS API. It seems for every two steps forward, I am taking a step back. Thanks to the insight of others, I was recently able to successfully associate a legend with a dropdown button. I decided to give this a whirl with Nliu's and got it working--sort of.
Currently, it functions just fine. However, I wish to associate it with other widgets. When I include these, the TOC fails to appear. After stripping the code down to its bare minimum, I have discovered that whenever I include parser.parse(); it fails. However, when I comment it out, it works just fine. I had hoped that the inclusion of parseOnLoad: false, would solve my issues, but it did not.
Obviously, I am making yet another newbie mistake. It is, nonetheless, important that I fix this so I can include with my other widgets--and also learn more about the JS API.
I have condensed the code and stuck it in a single file below. Any assistance and guidance is greatly appreciated.
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no"/>
<title>Toggle Legend</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.11/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
margin: 0;
}
#toc-wrapper {
position: absolute;
left: 25px;
top: 70px;
//bottom: 25px;
padding: 10px;
background-color: #fff;
}
#tocButton {
position: absolute;
left: 25px;
top: 25px;
//bottom: 185px;
padding: 10px;
background-color: #fff;
z-index: 100;
}
//classes to style the legend
.esriLegendLayerLabel{
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
color:red;
}
.esriLegendServiceLabel{
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 12px;
color:green;
}
.esriLegendService{
font-family: Helvetica Neue,Helvetica,Arial,sans-serif;
font-size: 11px;
color: #33A7DE;
font-weight:bold;
}
</style>
<script>
var dojoConfig = {
parseOnLoad: false,
packages: [{
name: "agsjs",
"location": 'http://gmaps-utility-gis.googlecode.com/svn/tags/agsjs/latest/build/agsjs' // for xdomain load
}]
};
</script>
<script src="http://js.arcgis.com/3.14/"></script>
<script>
require([
"esri/map",
"esri/config",
"esri/layers/FeatureLayer",
"esri/InfoTemplate",
"esri/renderers/UniqueValueRenderer",
"esri/symbols/SimpleMarkerSymbol",
"esri/Color",
"dojo/fx/Toggler",
"dojo/fx",
"dojo/_base/array",
"dojo/dom",
"dojo/dom-geometry",
"dojo/on",
"dojo/parser",
"dijit/registry",
"agsjs/dijit/TOC",
"dojo/domReady!"
], function(
Map,
esriConfig,
FeatureLayer,
InfoTemplate,
UniqueValueRenderer,
SimpleMarkerSymbol,
Color,
Toggler,
coreFx,
arrayUtils,
dom,
domGeom,
on,
parser,
registry,
TOC
) {
//parser.parse(); //Doesn't seem to work with Nianwie's TOC. I don't understand why; remove it and the toolbar disappears!!!
var map = new Map("map", {
basemap:"gray",
center: [-98.435731, 35.222876],
zoom: 7,
logo: false,
slider: false
});
var np = new FeatureLayer("//services.arcgis.com/V6ZHFr6zdgNZuVG0/ArcGIS/rest/services/NationalParkStats2013/FeatureServer/0");
var renderer = new UniqueValueRenderer(null, "Type");
var symbol1 = new SimpleMarkerSymbol();
symbol1.setColor(new Color("#ed5151"));
renderer.addValue("National Park", symbol1);
var symbol2 = new SimpleMarkerSymbol();
symbol2.setColor(new Color("#149ece"));
renderer.addValue("National Monument", symbol2);
np.setRenderer(renderer);
map.addLayers([np]);
//add the legend Superfluous with TOC
/* map.on("layers-add-result", function (evt) {
var layerInfo = arrayUtils.map(evt.layers, function (layer, index) {
return {layer:layer.layer, title:layer.layer.name};
});
if (layerInfo.length > 0) {
var legend = new Legend({
map: map,
layerInfos: layerInfo
}, "legend");
legend.startup();
}
});*/
// Add Table of Contents
map.on('layers-add-result', function (evt) {
try {
var toc = new TOC({
map: map,
layerInfos: [{
layer: np,
title: "National Parks",
//noLegend:true, IF DON'T WANT TO SHOW LEGEND
slider: true //This doesn't appear to work with FeatureLayers!!!
}]
}, "toc");
toc.startup();
toc.on("load", function () {
console.log("TOC loaded");
});
}
catch (e) { console.error(e.message); }
});
var isClicked = true; //this, along with display none set in the div style ensure it is not shown by default
var tocToggler = new Toggler({
node: "toc-wrapper",
showFunc: coreFx.wipeIn,
hideFunc: coreFx.wipeOut
});
on(dom.byId("tocButton"), "click", function(e){
if(isClicked===false){
tocToggler.hide();
isClicked=true;
}
else{
tocToggler.show();
isClicked=false;
}
});
});
</script>
</head>
<body>
<button type="button" id="tocButton" title="Hide/Show Layer List">Toggle Layer List</button>
<div id="map"></div>
<div id="tocDiv"></div>
<div id="toc-wrapper" style="display: none;">
<div id="toc" dojoType="dijit.layout.ContentPane" style="overflow:auto;width:275px;height:350px;vertical-align:top;"></div>
</div>
</body>
</html>