0

I am stumped on an Web App that I have been working on. I am using Esri JSAPI and can not figure out where I have gone wrong with the Legend. The app runs, but no legend appears anywhere. I have added the all the code I have put together so far.

<!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>Pierson</title> <!-- Change title to "Pierson" -->

    <link rel="stylesheet" href="https://js.arcgis.com/3.16/esri/css/esri.css">
    <style>

      html, body, 
      #mapDiv {
      height: 100%; 
      margin: 0; 
      padding: 0; 
     } 

     #legendDiv {
        position: absolute;
        height: 100%;
        margin: 0;
        padding: 10px;
      }
    </style>

    <script src="https://js.arcgis.com/3.16/"></script>
    <script>

      require([
        "esri/map", 
        "esri/dijit/Scalebar",
        "esri/dijit/Legend",
        "esri/tasks/QueryTask",
        "esri/tasks/query",
        "esri/dijit/InfoWindowLite",
        "esri/InfoTemplate",
        "esri/layers/FeatureLayer",
        "dojo/dom-construct",
        "dojo/domReady!"
      ], function(
          Map,
          Scalebar,
          Legend,
          QueryTask,
          Query,
          InfoWindowLite,
          InfoTemplate,
          FeatureLayer,
          domConstruct
         ) {

        var map = new Map("mapDiv", {
          basemap: "streets",
          center: [-105.089706, 39.993596], //Center Map at Lafayette, CO
          zoom: 15
        });

        // Add scalebar to map
        var Scalebar = new Scalebar({
        map:map,
        scalebarUnit: "dual"})

        //set query task
        queryTask = new QueryTask("http://services.arcgis.com/.../arcgis/rest/services/2016_LafayetteCO2014HouseSales_Pierson/FeatureServer/0");

        //set query
        query = new Query();
        query.returnGeometry = true;
        query.outFields = ["BLDG1_DESIGN", "PARCEL_NO", "LOCCITY", "BEDROOMS", "FULL_BATHS", "THREE_QTR_BATHS", "HALF_BATHS", "ABOVE_GROUND_SQFT", "FINISHED_BSMT_SQFT", "SALE_PRICE", "Price_SQFT"]; //Set outfield values for desired attributes
        query.where = "BLDG1_DESIGN = '2 - 3 STORY'";    //Set query field to find building designs of "2 - 3 Story" buildings
        query.outSpatialReference = {"wkid":102100};

        var infoWindow = new InfoWindowLite(null, domConstruct.create("div", null, null, map.root));
        infoWindow.startup();
        map.setInfoWindow(infoWindow);

        //Add info to the popup window
        var template = new InfoTemplate();
        template.setTitle("Parcel Number: ${PARCEL_NO}"); //Set info window title to the Parcel Number
        template.setContent("<b>Bedrooms: </b>${BEDROOMS}<br/>" + //Set info display to Bedrooms
                                "<b>Full Baths: </b>${FULL_BATHS}<br/>" + //Set info display to Full Baths
                                "<b>Three Quarter Baths: </b>${THREE_QTR_BATHS}<br/>" + //Set info display to 3/4 Baths
                                "<b>Half Baths: </b>${HALF_BATHS}<br/>" + //Set info display to 1/2 Baths
                                "<b>Above Ground Square Footage: </b>${ABOVE_GROUND_SQFT} sqft <br/>" + //Set info display to ABOVE_GROUND_SQFT
                                "<b>Finished Basement Square Footage: </b>${FINISHED_BSMT_SQFT} sqft <br/>" + //Set info display to FINISHED_BSMT_SQFT
                                "<b>Sale Price: $ </b>${SALE_PRICE}<br/>" + //Set info display to Sale Price
                                "<b>Price per Square Foot: $ </b>${Price_SQFT}<br/>"); //Set info display to Price per square foot

        //add a layer to the map
        var featureLayer = new FeatureLayer("http://services.arcgis.com/.../arcgis/rest/services/2016_LafayetteCO2014HouseSales_Pierson/FeatureServer/0", {
          mode: FeatureLayer.MODE_ONDEMAND,
          infoTemplate:template,
          outFields: ["BLDG1_DESIGN", "PARCEL_NO", "LOCCITY", "BEDROOMS", "FULL_BATHS", "THREE_QTR_BATHS", "HALF_BATHS", "ABOVE_GROUND_SQFT", "FINISHED_BSMT_SQFT", "SALE_PRICE", "Price_SQFT"]
        });
        map.addLayer(featureLayer);

        map.infoWindow.resize(325, 175);

        //Add legend
        var legend = new Legend({
              map: map,
              layerinfos:[{
                layer: featureLayer,
              }]
        }, "legendDiv");
        legend.startup;
      });
    </script>
  </head>
  <body>
    <div id="mapDiv"></div>
    <div id="legendDiv"></div>
  </body>
</html>
1

I finally figured out that I was missing the following piece of the puzzle:

map.on("load", function(evt)

Once I got that piece and the html code, my app works well.

| improve this answer | |
0

layer parameter in the layerInfo of the legend class can only be ArcGISTiledMapServiceLayer and ArcGISDynamicMapServiceLayer type. you have in your code FeatureLayer type that's why it incompatible with Legend class.

for more detailed info : https://developers.arcgis.com/javascript/jsapi/legend-amd.html

| improve this answer | |
  • I don't think that is correct. This snippet is from the link you reference: "The legend supports the following layer types: ArcGISDynamicMapServiceLayer, ArcGISTiledMapServiceLayer, FeatureLayer, CSVLayer, KMLLayer, and WMSLayer." – piersojs Apr 2 '16 at 18:53

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.