Bumped by Community user

occurred May 21, 2018 at 9:22

deleted 55 characters in body

Source Link

edited Apr 3, 2016 at 20:56

65.4k
29
114
345

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. I am looking any suggestions and appreciate all help.

removed sign-off + code formatting + removed private URL components

Source Link

edited Apr 2, 2016 at 14:16

Kersten

9.9k
3
39
59

Thank you, Justin

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

<!DOCTYPE html>

<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/YseQBnl2jq0lrUV5/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/YseQBnl2jq0lrUV5/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>

Thank you, Justin

<!DOCTYPE html>

<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/YseQBnl2jq0lrUV5/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/YseQBnl2jq0lrUV5/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>

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

Source Link

asked Apr 2, 2016 at 13:54

piersojs

11
3

Esri JSAPI Legend Not Appearing

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. I am looking any suggestions and appreciate all help.

Thank you, Justin

<!DOCTYPE html>

<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/YseQBnl2jq0lrUV5/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/YseQBnl2jq0lrUV5/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>

arcgis-maps-sdk-javascript legend

Stack Exchange Network

Return to Question

Esri JSAPI Legend Not Appearing