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>
whyzar
12.1k23 gold badges41 silver badges72 bronze badges
1 Answer 1
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.
answered Nov 21, 2016 at 16:34
Explore related questions
See similar questions with these tags.
lang-js