topic Re: TOC coding problem in ArcGIS Server with JavaScript API Questions

TOC coding problem

Muqit_Zoarder — Mon, 15 Feb 2016 15:36:58 GMT

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>

<title>Dresden Building Web Map</title>

var dojoConfig =

{paths: {agsjs: location.pathname.replace(/\/[^/]+$/, '') + '/agsjs' }};

</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>

</div>

</div>

</body>

</html>

Thanks

Re: TOC coding problem

LuciHawkins — Mon, 15 Feb 2016 20:28:07 GMT

Hey Muquit,

I believe you are missing a . in the two lines below. Should be: "../agsjs......

Thanks,

Luci

Re: TOC coding problem

RobertScheitlin__GISP — Sun, 12 Dec 2021 09:38:25 GMT

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>

Re: TOC coding problem

Muqit_Zoarder — Tue, 16 Feb 2016 07:01:35 GMT

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