Display CSVLayer in Legend?

TaylorTeske2 — Sat, 11 Dec 2021 08:13:36 GMT

So I am new to JavaScript and the API. I have everything working in my code, except that the features of my CSVLayer will not show up in my legend. Any ideas on how to do this? The code is below:

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <meta name="viewport" content="initial-scale=1,maximum-scale=1,user-scalable=no">
  <title>Homework 5</title>
  
  <link rel="stylesheet" href="https://js.arcgis.com/4.1/esri/css/main.css">
  <script src="https://js.arcgis.com/4.1/"></script>

  <style>
    html,
    body,
    #viewDiv {
      padding: 0;
      margin: 0;
      height: 98%;
      width: 98%;
    }
    
    #legendDiv {
      max-width: 300px;
      background-color: black;
      padding: 8px;
      color: white;
      opacity: 0.85;
    }
    
    p {
      max-width: 200px;
      background-color: black;
      padding: 15px;
      border: 1px solid white;
      color: white;
      opacity: .75;
    }
    
    h1 {
      background-color:#D8E0E2;
      background-repeat:repeat-x;
      border-bottom:1px solid #000000;
      border-top:1px solid #000000;
      color: black;
      font-family: Verdana,Arial,Helvetica,sans-serif;
      font-size: 16px;
      font-weight: bold;
      letter-spacing:1.1px;
      margin: 15px 0 10px;
      padding: 3px 10px;
      text-align: center;
    }
    
  </style>



  <script>
    require([
      "esri/Map",
      "esri/layers/CSVLayer",
      "esri/views/MapView",
      "esri/renderers/UniqueValueRenderer",
      "esri/symbols/SimpleMarkerSymbol",
      "esri/config",
      "esri/core/urlUtils",
      "esri/widgets/Legend",
      "dojo/dom-construct",
      "dojo/domReady!"
    ], function(
      Map,
      CSVLayer,
      MapView,
      UniqueValueRenderer,
      SimpleMarkerSymbol,
      esriConfig,
      urlUtils,
      Legend,
      domConstruct) {
      
      var url = "http://opendata.dc.gov/datasets/4ac321b2d409438ebd76a6569ad94034_5.csv";

      
      esriConfig.request.corsEnabledServers.push(url);
      
//      urlUtils.addProxyRule({
//        urlPrefix: "opendata.dc.gov",
//        proxyUrl: "/sproxy/"
//      });
      
      
      var defaultSym = new SimpleMarkerSymbol({
          color: "white",
          size: "8px"
      });

      var elem = new SimpleMarkerSymbol({
          color: "blue",
          size: "12px"
      });

      var middle = new SimpleMarkerSymbol({
          color: "green",
          size: "16px"
      });

      var high = new SimpleMarkerSymbol({
          color: "red",
          size: "20px"
      });

      var renderer = new UniqueValueRenderer({
        defaultSymbol: defaultSym,
        defaultLabel: "Special",
        field: "LEVEL_",
        uniqueValueInfos: [
          {
            value: "ES",
            symbol: elem,
            label: "Elementary School"
          },
          {
            value: "MS",
            symbol: middle,
            label: "Middle School"
          },
          {
            value: "HS",
            symbol: high,
            label: "High School"
          }]
        });
      
      var csvLayer = new CSVLayer({
        url: url,
        renderer: renderer,
        longitudeField: "LONGITUDE",
        latitudeField: "LATITUDE"
      });       

      var map = new Map({
        basemap: "dark-gray",
        layers: [csvLayer]
      });

      var view = new MapView({
        container: "viewDiv",
        center: [-77.029681, 38.908349],
        zoom: 12,
        map: map
      });

      var legend = new Legend({
          view: view,
          layerInfos: [{
              layer: csvLayer,
              title: "Public Schools"
            }]
        }, "legendDiv");
      
      view.ui.add(legend, "bottom-right");
      
      var info = domConstruct.create("infoDiv", {
        innerHTML: "<p>This map depicts all of the public schools in Washington, DC by type.</p>",
      });
      
      view.ui.add(info, "top-right");

    });
  </script>
</head>

<body>
<h1>DC Public Schools</h1>
  <div id="viewDiv"></div>
  <div id="legendDiv"></div>
</body>

</html>‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

Re: Display CSVLayer in Legend?

RobertScheitlin__GISP — Tue, 22 Nov 2016 14:10:08 GMT

Taylor,

Unfortunately this is a known limitation with the Legend widget at 4.1

Known Limitations

Legend supports the following layers: FeatureLayer, StreamLayer, SceneLayer, MapImageLayer

Re: Display CSVLayer in Legend?

TaylorTeske2 — Tue, 22 Nov 2016 14:32:05 GMT

Robert,

Thanks for the help! Probably should have checked the documentation more thoroughly.

topic Re: Display CSVLayer in Legend? in ArcGIS JavaScript Maps SDK Questions

Display CSVLayer in Legend?

Re: Display CSVLayer in Legend?

Re: Display CSVLayer in Legend?