Community

Legend example does not show map or legend

2442
22
Jump to solution
06-04-2014 07:10 AM
PeterHoffman
by
Occasional Contributor
‎06-04-2014 07:10 AM
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">
    <!--The viewport meta tag is used to improve the presentation and behavior of the samples
      on iOS devices-->
    <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">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<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>
0 Kudos
1 Solution

Accepted Solutions
TimWitt
by
Frequent Contributor
‎06-04-2014 09:29 AM
This is how it looks like.

View solution in original post

map_create (16).zip
0 Kudos
22 Replies
TimWitt
by
Frequent Contributor
‎06-04-2014 07:27 AM
Hey Peter,

The first issue I see is, that your requiere statements aren't lining up with your function statements. It needs to be changed to this:

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


Tim
0 Kudos
JeffPace
by MVP Alum
MVP Alum
‎06-04-2014 07:28 AM
you are running it on a webserver right? you can not just save an html file and run it locally.
0 Kudos
PeterHoffman
by
Occasional Contributor
‎06-04-2014 07:32 AM
Tim,
I made the changes as requested w/o luck.

Jeff,
I am using Aptana 3, every other example works as expected on my local PC.
0 Kudos
TimWitt
by
Frequent Contributor
‎06-04-2014 07:37 AM
Peter,

maybe this can get you started?

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with legend</title>

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

  <style>
    html, body {
      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", "esri/layers/ImageParameters", "esri/layers/ArcGISDynamicMapServiceLayer",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
      "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Legend,
      arrayUtils, parser, ImageParameters, ArcGISDynamicMapServiceLayer
    ) {
      parser.parse();

      map = new Map("map", {
        basemap:"topo",
        center: [-73.0156, 40.8325],
        zoom: 12
      });
      
      var imageParameters = new ImageParameters();
        imageParameters.format = "PNG24"; //set the image type to PNG24, note default is PNG8.
        
        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/25", {
        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:["*"]
      });

      //add the legend
      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([waterbodies, rivers, dynamicMapServiceLayer]);
    });
  </script>
</head>

<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<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>


I have centered the map on your county and added a different layer to illustrate that your legend is working.

Tim
0 Kudos
PeterHoffman
by
Occasional Contributor
‎06-04-2014 07:41 AM
Yes, that works great.
I guess I need a basemap to work with this example?
I had a dynamic example working w/o the basemap part.

Thanks,
0 Kudos
TimWitt
by
Frequent Contributor
‎06-04-2014 07:44 AM
Maybe once you have finished your map, you can play around with using your own basemap, but yes I think basemap is a requirement?
0 Kudos
PeterHoffman
by
Occasional Contributor
‎06-04-2014 07:45 AM
This is our basemap:

https://gisservices.suffolkcountyny.gov/arcgis/rest/services/Basemap/MapServer
0 Kudos
TimWitt
by
Frequent Contributor
‎06-04-2014 08:14 AM
Peter,

try this:

<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
  <!--The viewport meta tag is used to improve the presentation and behavior of the samples
    on iOS devices-->
  <meta name="viewport" content="initial-scale=1, maximum-scale=1,user-scalable=no">
  <title>Map with legend</title>

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

  <style>
    html, body {
      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", "esri/layers/ImageParameters", "esri/layers/ArcGISDynamicMapServiceLayer",
      "dijit/layout/BorderContainer", "dijit/layout/ContentPane", 
      "dijit/layout/AccordionContainer", "dojo/domReady!"
    ], function(
      Map, FeatureLayer, Legend,
      arrayUtils, parser, ImageParameters, ArcGISDynamicMapServiceLayer
    ) {
      parser.parse();

      map = new Map("map", {
        basemap: "topo",
        center: [-73.0156, 40.8325],
        zoom: 12
      });
      

        
        var dynamicMapServiceLayer = new ArcGISDynamicMapServiceLayer("https://gisservices.suffolkcountyny.gov/arcgis/rest/services/Basemap/MapServer");

      var rivers = new FeatureLayer("https://gisservices.suffolkcountyny.gov/arcgis/rest/services/Live_Layers_External/MapServer/25", {
        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:["*"]
      });

      //add the legend
      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([waterbodies, rivers]);
      map.addLayer( dynamicMapServiceLayer);
       
    });
  </script>
</head>

<body class="claro">
<!--[if IE 7]>
<style>
  html, body {
    margin: 0;
  }
</style>
<![endif]-->
<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>


Hope this helps!

Tim
0 Kudos
PeterHoffman
by
Occasional Contributor
‎06-04-2014 08:50 AM
Yes, that works great.
Eventually I want to get the TOC widget working with my map services.

We are looking to migrate our flash based web apps to JavaScript.
Here is our GIS viewer in flash:

http://gis2.suffolkcountyny.gov/gisviewer/

I have also modified the Local Government Election Polling Places to use for Voter Information:

http://gis2.suffolkcountyny.gov/voterinformation/
0 Kudos