Community
Select to view content in your preferred language

Legend example does not show map or legend

3718
22
Jump to solution
06-04-2014 07:10 AM
PeterHoffman
by
Deactivated User
‎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
22 Replies
TimWitt
by
Deactivated User
‎06-04-2014 09:55 AM
Thats true. You are definitely making the right choice moving towards javascript.

Also, with everything moving towards mobile devices, java works across platforms (android, IO....)

It would look something like this .
0 Kudos
MichaelVolz
by
Esteemed Contributor
‎06-04-2014 10:32 AM
Peter:

ESRI is able to use shorthand syntax to add their basemap mapservice in a javascript application.  The syntax for adding your own basemap mapservice will be different.  Just a heads up as you cannot just plug in your basemap mapservice name and parameters the way the sample shows.  I learned this by starting with ESRI's sample and then migrating it to work with my own mapservices.
0 Kudos
KenBuja
by MVP Esteemed Contributor
MVP Esteemed Contributor
‎06-05-2014 11:58 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?


You don't need a basemap if you're adding in your tiled service. However, this won't give you the legend information for your basemap, if you want that.

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

            map = new Map("map", {
                
            });



            var tileMapServiceLayer = new ArcGISTiledMapServiceLayer("https://gisservices.suffolkcountyny.gov/arcgis/rest/services/Basemap/MapServer", { id: "base" });
            map.addLayer(tileMapServiceLayer);

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

            //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]);
 
        });
    </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