1

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

from the documentation:

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

parity with version 3.x is still a work in progress, but ultimately CSV layers will be supported.

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.