Hello all,I'm working with the TOC widget and I cant seem to get the code to even load initially once I plug in the "require" and "function" calls. Code is below. When I remove "agsjs/dijit/TOC" from the "require" statement, and remove "TOC" from the funtion call, the page loads fine. If I leave those two in the script, it just stops loading after a few seconds. Seems like it might be having trouble finding the agsjs folder, however I followed the instructions and placed the src folder containing agsjs in the directory of the webpage. I haven't even gotten to getting the TOC in the page itself yet.
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
<link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css">
<link rel='stylesheet' type='text/css' href='index2.css' />
<link rel="stylesheet" href="https://community.esri.com//code.jquery.com/ui/1.10.4/themes/smoothness/jquery-ui.css">
<link rel="stylesheet" type="text/css" href="../src/agsjs/css/agsjs.css" />
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script src="//code.jquery.com/ui/1.10.4/jquery-ui.js"></script>
<script>
$(function() {
$( "#accordion" ).accordion()});
</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 src="http://js.arcgis.com/3.9/"></script>
<script>
require([
"esri/map",
"esri/geometry/Extent",
"dojo/_base/connect",
"dojo/parser",
"dojo/ready",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/dom",
"dojo/on",
"dojo/query",
"esri/layers/FeatureLayer",
"esri/layers/ImageParameters",
"esri/layers/CSVLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"agsjs/dijit/TOC",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/renderers/SimpleRenderer",
"esri/symbols/SimpleFillSymbol",
"esri/renderers/ClassBreaksRenderer",
"esri/InfoTemplate",
"esri/urlUtils",
"esri/arcgis/utils",
"esri/dijit/Legend",
"esri/dijit/Scalebar",
"dojo/domReady!"
], function(
Map,
Extent,
connect,
parser,
ready,
BorderContainer,
ContentPane,
dom,
on,
query,
FeatureLayer,
ImageParameters,
CSVLayer,
ArcGISTiledMapServiceLayer,
ArcGISDynamicMapServiceLayer,
TOC,
Color,
SimpleMarkerSymbol,
SimpleRenderer,
SimpleFillSymbol,
ClassBreaksRenderer,
InfoTemplate,
urlUtils,
arcgisUtils,
Legend,
Scalebar
) {
ready(function(){
parser.parse();
var visible = [] ,layers = [];
arcgisUtils.createMap("964718e320ea4fc4abcc73ada068d015","map").then(function(response){
//update the app
var map = response.map;
//Use the ImageParameters to set the invisible layers in the map service during ArcGISDynamicMapServiceLayer construction.
var imageParameters = new ImageParameters();
imageParameters.layerIds = [0,1];
imageParameters.layerOption = ImageParameters.LAYER_OPTION_HIDE;
//can also be: LAYER_OPTION_EXCLUDE, LAYER_OPTION_HIDE, LAYER_OPTION_INCLUDE
//Takes a URL to a non cached map service.
var dynamicMapServiceLayer0 = new ArcGISDynamicMapServiceLayer("http://gis.srh.noaa.gov/ArcGIS/rest/services/RIDGERadar/MapServer", {
"opacity" : 0.5,"imageParameters":imageParameters});
//Takes a URL to a non cached map service.
var dynamicMapServiceLayer1 = new ArcGISDynamicMapServiceLayer("http://gisdev.srh.noaa.gov/arcgis/rest/services/GSP/gffg/MapServer", {
"opacity" : 0.5,"imageParameters":imageParameters});
map.addLayer(dynamicMapServiceLayer0);
layers.push(dynamicMapServiceLayer0);
map.addLayer(dynamicMapServiceLayer1);
layers.push(dynamicMapServiceLayer1);
// on(dom.byId("0"), "change", updateLayerVisibility);
// on(dom.byId("1"), "change", updateLayerVisibility);
// var csv = new CSVLayer("./data/180query.csv");
// var orangeRed = new Color([238, 69, 0, 0.5]); // hex is #ff4500
// var marker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);
// var renderer = new SimpleRenderer(marker);
// csv.setRenderer(renderer);
// var template = new InfoTemplate("${lid}", "${name}");
// csv.setInfoTemplate(template);
// map.addLayer(csv);
// var layerIdsArr = map.layerIds; // This gives ids of all layers added to map.
// var inactivelayers = map.getLayer(layerIdsArr[3]);// Say you want layer with an id at first index of layerIdsArr
// inactivelayers.hide();// Will hide layer
});
});
});
</script>