nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Legend example does not show map or legend

PeterHoffman

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>

Finde mehr Beiträge mit dem Tag

Accepted answers

TimWitt

This is how it looks like.

map_create (16).zip

All comments

kenbuja

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>

mvolz47

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.

TimWitt

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 .

PeterHoffman

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.

TimWitt

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

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

TimWitt

One thing I forgot in my application.

before

parser.parse();

put

esriConfig.defaults.io.corsDetection = false;

This will eliminate problems in google chrome.

TimWitt

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

PeterHoffman

I do not any code in your last post?

TimWitt

This is how it looks like.

map_create (16).zip

TimWitt

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

PeterHoffman

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

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

PeterHoffman

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/

TimWitt

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

PeterHoffman

This is our basemap:

https://gisservices.suffolkcountyny.gov/arcgis/rest/services/Basemap/MapServer

TimWitt

Maybe once you have finished your map, you can play around with using your own basemap, but yes I think basemap is a requirement?

PeterHoffman

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,

TimWitt

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

PeterHoffman

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.

JeffPace1

you are running it on a webserver right? you can not just save an html file and run it locally.

TimWitt

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

Nimm an der Unterhaltung teil

Angemeldete Mitglieder können Beiträge verfassen, Updates folgen und mehr. Neu hier? Registriere ein kostenloses Konto.

Schnellzugriffe

Alle Communities
Neueste Beiträge
Gefolgter Inhalt
Community-Hilfe

Community Help
Find useful guides, FAQs, and documents to help you navigate and make the most of Esri Community.