1

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.

Improve this question

1 Answer 1

Reset to default
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"
});

Full example

Improve this answer
1

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Not the answer you're looking for? Browse other questions tagged or ask your own question.