ClassBreaksRenderer with CSVLayer

459
2
Jump to solution
11-14-2019 10:08 AM
Highlighted
New Contributor II

I am trying to create breaks in a csvlayer to differentiate points in my data by color or size. Ideally, I would be able to do something similar to what is in the tutorial found here: Class breaks renderer | ArcGIS API for JavaScript 3.22  . However, this doesn't seem to work as all the points are displayed as the same color. The code posted below is what I am currently working with. 

Thank you,

Nathan

Reply
0 Kudos
1 Solution

Accepted Solutions
Highlighted
Esri Contributor

Hi there, 

You have to pass in an instance of symbol to addBreaks method. You are passing in a color object in your code. 

I modified your test app.

-Undral

View solution in original post

2 Replies
Highlighted
New Contributor II

Here is the code that I am trying to run. When I run this, all of the points are the same color. 

<!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.30/esri/css/esri.css">
    <style>
      htmlbody#map {
        height100%;
        width100%;
        margin0;
        padding0;
      }
      body {
        background-color#FFF;
        overflowhidden;
        font-family"Trebuchet MS";
      }
    </style>
    <script src="https://js.arcgis.com/3.30/"></script>
    <script>
      var mapcsv;

      require([
        "esri/map"
        "esri/layers/CSVLayer",
        //"esri/Color",
        "dojo/_base/Color",
        "esri/symbols/SimpleMarkerSymbol",
        "esri/renderers/ClassBreaksRenderer",
        "esri/InfoTemplate",
        "esri/config",
        "dojo/domReady!"
      ], function(
        MapCSVLayerColorSimpleMarkerSymbolClassBreaksRendererInfoTemplateesriConfig
      ) {
        
        // 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: "streets",
          center: [-85.2537.96],
          zoom: 8
        });
        csv = new CSVLayer("KY_NOX.csv", { //local csv file
          copyright: "ky.gov"
        });

        var symbol = new SimpleMarkerSymbol();
        //symbol.setColor(new Color([150, 150, 150, 0.9]));


        var renderer = new ClassBreaksRenderer(symbol"${total_emissions}");
        renderer.addBreak(0.010.0new Color([02000.5]));
        renderer.addBreak(10.0100.0new Color([00200.5]));
        renderer.addBreak(100.0Infinitynew Color([1681681681]));



        var template = new InfoTemplate(); 
        template.setTitle("<b> EIS Site ID </b>: ${eis_facility_site_id}"); 
        template.setContent("<b>Facility</b>: ${facility_site_name} </br>"+"<b>County </b>: ${county_name}  </br>" + "<b> Total Emissions </b>: ${total_emissions} Tons  </br>" + "<b> Unit Type </b>: ${unit_type}");
        csv.setInfoTemplate(template);
        csv.setRenderer(renderer);

        map.addLayer(csv);
      });
    </script>
  </head>

  <body>
    <div id="map"></div>
  </body>
</html>
Reply
0 Kudos
Highlighted
Esri Contributor

Hi there, 

You have to pass in an instance of symbol to addBreaks method. You are passing in a color object in your code. 

I modified your test app.

-Undral

View solution in original post