Using ArcGIS Javascript API 3.29 is it possible to set the size of a CSV Layer marker using a field value through the renderer?
Using this EXAMPLE in their samples, they add a CSV layer to the map and set the marker as a simple circle and set the color to Orange using the renderer, but they didn't interact with any field values other than adding them to the Popup. I know it is possible to set Symbol Size on feature Layers, as this example here using a Feature Layer sets the size, rotation and color of an arrow using some attribute values.
I am trying to use their CSV Layer Example to set the size of the Marker by the field 'magNst' here is my attempt:
<!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>CSVLayer sample</title>
<link rel="stylesheet" href="https://js.arcgis.com/3.29/esri/css/esri.css">
<style>
html, body, #map {
height: 100%;
width: 100%;
margin: 0;
padding: 0;
}
body {
background-color: #FFF;
overflow: hidden;
font-family: "Trebuchet MS";
}
</style>
<script src="https://js.arcgis.com/3.29/"></script>
<script>
var map, csv;
require([
"esri/map",
"esri/layers/CSVLayer",
"esri/Color",
"esri/symbols/SimpleMarkerSymbol",
"esri/renderers/SimpleRenderer",
"esri/InfoTemplate",
"esri/config",
"dojo/domReady!"
], function(
Map, CSVLayer, Color, SimpleMarkerSymbol, SimpleRenderer, InfoTemplate, esriConfig
) {
// Use CORS
esriConfig.defaults.io.corsEnabledServers.push("earthquake.usgs.gov"); // supports CORS
// Use proxy if the server doesn't support CORS
// esriConfig.defaults.io.proxyUrl = "/proxy/";
map = new Map("map", {
basemap: "gray",
center: [ -60, -10 ],
zoom: 4
});
csv = new CSVLayer("https://earthquake.usgs.gov/earthquakes/feed/v1.0/summary/2.5_week.csv", {
copyright: "USGS.gov"
});
var orangeRed = new Color([238, 69, 0, 0.5]); // hex is #ff4500
var marker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);
var renderer = new SimpleRenderer(marker);
//Trying to set the Marker size by the field "magNst"
renderer.setSizeInfo({
field:"magNst",
minSize:3,
maxSize:200,
minDataValue:5,
maxDataValue:50
});
csv.setRenderer(renderer);
//I want the info window to show magNst to ensure the fieldname is correct
var template = new InfoTemplate("${magNst}", "${magNst}");
csv.setInfoTemplate(template);
map.addLayer(csv);
});
</script>
</head>
<body>
<div id="map"></div>
</body>
</html>
Trying to use the renderer to access CSV Field Values doesn't appear to have any affect, am I missing something or is this not possible with the CSVLayer method?
I believe I can try to read/parse the CSV into a FeatureCollection, and the Renderer will work as it does in the example where they rotate the feature layer symbols and change its size. However the ability to add the CSVLayer is comparatively lightweight so I'd like to work with it as much as possible.
1 Answer 1
It looks like SetSizeInfo is deprecated. It says use setvisualvariables instead, but the more simple solution might be to use a ClassBreaksRenderer ... something like this:
var defaultMarker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);
var smallMarker = new SimpleMarkerSymbol("solid", 15, null, orangeRed);
var mediumMarker = new SimpleMarkerSymbol("solid", 30, null, orangeRed);
var largeMarker = new SimpleMarkerSymbol("solid", 45, null, orangeRed);
var renderer = new ClassBreaksRenderer(defaultMarker, "magNst");
renderer.addBreak({
minValue: 0,
maxValue: 100,
symbol: smallMarker,
label: "Small"
});
renderer.addBreak({
minValue: 101,
maxValue: 200,
symbol: mediumMarker,
label: "Medium"
});
renderer.addBreak({
minValue: 201,
maxValue: 1000,
symbol: largeMarker,
label: "Large"
});
-
Cheers Gavin, this works great!Just_African_Developer– Just_African_Developer2019年07月23日 13:31:27 +00:00Commented Jul 23, 2019 at 13:31
Explore related questions
See similar questions with these tags.