Dear all, please have a look on my TOC (table of content) coding. I have placed the agsjs folder in my web root directory and the path is all rgiht i think. But I am not getting any result.
Script:
<!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>Dresden Building Web Map</title>
<link rel="stylesheet" href="http://js.arcgis.com/3.15/esri/css/esri.css">
<link rel="stylesheet" href="https://js.arcgis.com/3.15/dijit/themes/claro/claro.css">
<link rel="stylesheet" type="text/css" href="./agsjs/css/agsjs.css" />
<link rel="stylesheet" href="./css/toc.css">
<script type="text/javascript">
var dojoConfig =
{paths: {agsjs: location.pathname.replace(/\/[^/]+$/, '') + '/agsjs' }};
</script>
<script src="http://js.arcgis.com/3.15/"> </script>
<script>
var map, toc, dynaLayer1;
require(["dojo/_base/connect",
"dojo/dom", "dojo/parser","dojo/on", "dojo/_base/Color",
"esri/map",
"esri/geometry/Extent",
"esri/layers/FeatureLayer",
"esri/layers/ArcGISTiledMapServiceLayer",
"esri/layers/ArcGISDynamicMapServiceLayer",
"esri/symbols/SimpleFillSymbol",
"esri/renderers/ClassBreaksRenderer",
"agsjs/dijit/TOC",
"dijit/layout/BorderContainer",
"dijit/layout/ContentPane",
"dojo/fx", "dojo/domReady!"], function(connect, dom, parser, on,Color,
Map, Extent, FeatureLayer, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer,
SimpleFillSymbol,ClassBreaksRenderer,
TOC){
// call the parser to create the dijit layout dijits
parser.parse(); // note djConfig.parseOnLoad = false;
map = new Map("map", {
basemap: "topo",
center: [-85.75, 38.25],
zoom: 13
});
dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://192.168.224.16:6080/arcgis/rest/services/Dresden/MapServer", {
opacity: 0.8
});
map.on('layers-add-result', function(evt){
toc = new TOC({
map: map,
layerInfos: [{
layer: dynaLayer1,
title: "DynamicMapServiceLayer1"
//collapsed: false, // whether this root layer should be collapsed initially, default false.
//slider: false // whether to display a transparency slider.
}]
}, 'tocDiv');
toc.startup();
map.addLayers([dynaLayer1]);
});
</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 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>
</div>
</body>
</html>
Thanks
Hey Muquit,
I believe you are missing a . in the two lines below. Should be: "../agsjs......
<link rel="stylesheet" type="text/css" href="../agsjs/css/agsjs.css" />
<link rel="stylesheet" href="../css/toc.css">
Thanks,
Luci
Dear all, thanks for your quick response, actually I have found one big mistake that I have done. I did not close the script before the </head> tag. It should be a </script>. Now its working.
Thanks
Muqit
Muqit,
Here is what I have working with the agsjs folder being locally on the same directory as the application.
<!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>Dresden Building Web Map</title> <link rel="stylesheet" type="text/css" href="agsjs/css/agsjs.css" /> <link rel="stylesheet" href="agsjs/dijit/css/toc.css"> <script type="text/javascript"> var dojoConfig = { paths: { agsjs: location.pathname.replace(/\/[^/]+$/, '') + '/agsjs/' } }; </script> <link rel="stylesheet" href="https://js.arcgis.com/3.15/esri/css/esri.css"> <link rel="stylesheet" href="http://js.arcgis.com/3.15/dijit/themes/claro/claro.css"> <style> html, body { height: 100%; width: 100%; margin: 0; padding: 0; } #map { height: 100%; margin: 0; padding: 0; } </style> <script src="https://js.arcgis.com/3.15/"></script> <script> var map, toc, dynaLayer1; require([ "dojo/dom", "dojo/parser", "dojo/on", "dojo/_base/Color", "esri/map", "esri/geometry/Extent", "esri/layers/FeatureLayer", "esri/layers/ArcGISTiledMapServiceLayer", "esri/layers/ArcGISDynamicMapServiceLayer", "esri/symbols/SimpleFillSymbol", "esri/renderers/ClassBreaksRenderer", "agsjs/dijit/TOC", "dijit/layout/BorderContainer", "dijit/layout/ContentPane", "dojo/domReady!" ], function ( dom, parser, on, Color, Map, Extent, FeatureLayer, ArcGISTiledMapServiceLayer, ArcGISDynamicMapServiceLayer, SimpleFillSymbol, ClassBreaksRenderer, TOC) { // call the parser to create the dijit layout dijits parser.parse(); map = new Map("mapDiv", { basemap: "topo", center: [-85.75, 38.25], zoom: 8 }); dynaLayer1 = new ArcGISDynamicMapServiceLayer("http://sampleserver6.arcgisonline.com/arcgis/rest/services/Census/MapServer", { opacity: 0.8 }); map.addLayers([dynaLayer1]); map.on('layers-add-result', function (evt) { toc = new TOC({ map: map, layerInfos: [{ layer: dynaLayer1, title: "DynamicMapServiceLayer1" //collapsed: false, // whether this root layer should be collapsed initially, default false. //slider: false // whether to display a transparency slider. }] }, 'tocDiv'); toc.startup(); }); }); </script> </head> <body class="claro"> <div data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline'" style="width:100%;height:100%;margin:0;"> <div data-dojo-type="dijit/layout/ContentPane" id="leftPane" region="left" splitter="true" style="width:275px"> <div id="tocDiv"> </div> </div> <div id="mapDiv" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding:0;"></div> </div> </body> </html>