Legend example does not show map or legend

PeterHoffman · ‎06-04-2014

I am using the Legend example and cannot get it to work. I am new to JavaScript.
The map services are publicly accessible and we are using ArcGIS server 10.2
Here is the code:

<!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>Create Map and add a dynamic layer</title>
    <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/esri/css/esri.css"/>
        <link rel="stylesheet" href="http://js.arcgis.com/3.9/js/dojo/dijit/themes/claro/claro.css">
    <style>
      html, body, #mapDiv{
        padding: 0;
       height: 97%;
      width: 98%;
      margin: 1%;
      }

      #rightPane {
      width: 20%;
    }

      #legendPane {
      border: solid #97DCF2 1px;
    }
    </style>

<script src="http://js.arcgis.com/3.9/"></script>
    <script>
      var map;

      require([
        "esri/map",
        "esri/layers/FeatureLayer", "esri/dijit/Legend",
      "dojo/_base/array", "dojo/parser",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane",
      "dijit/layout/AccordionContainer", "dojo/domReady!",
        "esri/layers/ArcGISDynamicMapServiceLayer",
        "esri/layers/ImageParameters"
      ], function (
        Map, ArcGISDynamicMapServiceLayer, ImageParameters, FeatureLayer, Legend,
      arrayUtils, parser) {

        map = new Map("map", {
          sliderOrientation : "horizontal"
        });

        var imageParameters = new ImageParameters();
        imageParameters.format = "PNG24"; //set the image type to PNG24, note default is PNG8.

        //Takes a URL to a non cached map service.
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://gisservices.suffolkcountyny.gov/arcgis/rest/services/Live_Layers_External/MapServer", {
          "opacity" : 0.9,
          "imageParameters" : imageParameters
        });

        var rivers = new FeatureLayer("https://gisservices.suffolkcountyny.gov/arcgis/rest/services/Live_Layers_External/MapServer/1", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });
      var waterbodies = new FeatureLayer("https://gisservices.suffolkcountyny.gov/arcgis/rest/services/Live_Layers_External/MapServer/2", {
        mode: FeatureLayer.MODE_ONDEMAND,
        outFields:["*"]
      });

      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 legendDijit = new Legend({
            map: map,
            layerInfos: layerInfo
          }, "legendDiv");
          legendDijit.startup();
        }
      });

       map.addLayers(dynamicMapServiceLayer);
       map.addLayers([waterbodies, rivers]);

      });
    </script>
</head>
<body class="claro">

<div id="content"
     data-dojo-type="dijit/layout/BorderContainer"
     data-dojo-props="design:'headline', gutters:true"
     style="width: 100%; height: 100%; margin: 0;">

<div id="rightPane"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'right'">

    <div data-dojo-type="dijit/layout/AccordionContainer">
      <div data-dojo-type="dijit/layout/ContentPane" id="legendPane"
           data-dojo-props="title:'Legend', selected:true">
        <div id="legendDiv"></div>
      </div>
      <div data-dojo-type="dijit/layout/ContentPane"
           data-dojo-props="title:'Pane 2'">
        This pane could contain tools or additional content
      </div>
    </div>
</div>
<div id="map"
       data-dojo-type="dijit/layout/ContentPane"
       data-dojo-props="region:'center'"
       style="overflow:hidden;">
</div>
</div>
</body>

</html>

TimWitt · ‎06-04-2014

In case you are looking for ideas, I have created this. It is pretty basic.

PeterHoffman · ‎06-04-2014

Yes, that is what we are looking for.
As a novice I am guessing the html is in one file, the javascript in a js folder and the css in a css folder?

TimWitt · ‎06-04-2014

Everything can go into the html document, just like in your example.

TimWitt · ‎06-04-2014

This is how it looks like.

PeterHoffman · ‎06-04-2014

I do not any code in your last post?

TimWitt · ‎06-04-2014

The attachment didn;t work for some reason, now it should be there.

TimWitt · ‎06-04-2014

One thing I forgot in my application.

before

parser.parse();

put

esriConfig.defaults.io.corsDetection = false;

This will eliminate problems in google chrome.

PeterHoffman · ‎06-04-2014

Yes, I got it, very nice, thanks.
I do not understand much of the code, not much from flash carries over.

TimWitt · ‎06-04-2014

Yes it takes a while getting used to. ESRI has some nice resources to learn from.

I taught myself everything. I started with html and javascript via codeacademy and then looked at the ESRI Javascript developers page. Once I kinda got the concept I started building the app, piece by piece.

Let me know if you have any question!

PeterHoffman · ‎06-04-2014

I will look into the code academy.
One advantage of the Javascript is the brevity of lines of code.
Flash template from ESRI was approx. 1000 files in a many folders. One typical mxml file would be several thousand lines.
Most of the time I just edit the config files which are xml.