WFS Layer and Simple Renderer with Color Ramp Does not work

08-10-2016 12:58 PM
New Contributor

I am trying to implement the setRenderer method of the WFS Layer object using a simple renderer with a color ramp using the setColorInfo method of the SimpleRenderer class. This works fine if I use a feature layer derived from and ArcServer instance, as in this example: Color ramp with rotation and proportional symbols | ArcGIS API for JavaScript 3.17  but does not work for my WFS. Oddly, if I use a class breaks renderer to achieve a similar effect, it works fine. I have found nothing in the docs to suggest that only some renderers work with a WFS. I have isolated the problem with the following code:

<!DOCTYPE html>



    <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>Class breaks with rotation and proportional symbols</title>

    <link rel="stylesheet" href="">

    <link rel="stylesheet" href="">


      html, body, #border-container {

        height: 100%;

        margin: 0;



    <script src=""></script>



        "esri/map", "esri/layers/FeatureLayer", "esri/dijit/Legend",

        "esri/renderers/SimpleRenderer", "esri/symbols/SimpleMarkerSymbol",

        "esri/Color", "dojo/_base/array", "dojo/parser", "esri/InfoTemplate", "esri/renderers/ClassBreaksRenderer",


        "esri/layers/LabelLayer", "esri/symbols/TextSymbol", "esri/symbols/Font", "esri/symbols/SimpleLineSymbol", "esri/config",

        "dijit/layout/BorderContainer", "dijit/layout/ContentPane",


      ], function(

        Map, FeatureLayer, Legend, SimpleRenderer, SimpleMarkerSymbol,

        Color, arrayUtils, parser, InfoTemplate, ClassBreaksRenderer, WFSLayer, LabelLayer, TextSymbol, Font, SimpleLineSymbol, esriConfig

      ) {


        var map = new Map("map", {

          basemap: "gray",

   center: [-122.836, 42.346],

   zoom: 13


  var infoTemplate = new InfoTemplate("Attributes", "${*}");

  // initializing layer in this way does not use renderer properly 

  var layer = new WFSLayer();

  var opts = {

  "url": "",

  "version": "1.0.0",

  "name": "zip_centroids",

  "wkid": 4326,

  "maxFeatures": 100,

  "mode": "snapshot"




  /* // initializing layer as below works

        var layer = new FeatureLayer("", {

          mode: FeatureLayer.MODE_ONDEMAND,


          infoTemplate: infoTemplate





        var marker = new SimpleMarkerSymbol();

        var renderer = new SimpleRenderer(marker);


          field: "temp",

          minDataValue: -20,

          maxDataValue: 296000,

          colors: [

            new Color([0,104,214]), new Color([20,120,220]), new Color([39,136,226]),

            new Color([59,152,232]), new Color([78,169,237]), new Color([98,185,243]),

            new Color([131,197,181]), new Color([164,210,120]), new Color([197,222,58]),

            new Color([205,188,80]), new Color([212,155,102]), new Color([220,121,124]),

            new Color([216,87,115]), new Color([211,53,106]), new Color([206,19,97])







  <body class="claro">

    <div id="border-container" data-dojo-type="dijit/layout/BorderContainer" data-dojo-props="design:'headline', gutters:false">

      <div data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'right'" style="width: 200px;"><div id="legend"></div></div>

      <div id="map" data-dojo-type="dijit/layout/ContentPane" data-dojo-props="region:'center'" style="padding: 0;"></div>




In addition I have attached screenshot of the two use cases. If there is any further information I can provide please let me know. Have been working on this for some time and it's quite frustrating.Screen Shot 2016-08-10 at 3.54.14 PM.pngScreen Shot 2016-08-10 at 3.54.42 PM.png

0 Kudos
0 Replies