AnsweredAssumed Answered

WFS Layer and Simple Renderer with Color Ramp Does not work

Question asked by frank on Aug 10, 2016

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>

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

    <link rel="stylesheet" href="https://js.arcgis.com/3.17/dijit/themes/claro/claro.css">

    <link rel="stylesheet" href="https://js.arcgis.com/3.17/esri/css/esri.css">

    <style>

      html, body, #border-container {

        height: 100%;

        margin: 0;

      }

    </style>

    <script src="https://js.arcgis.com/3.17/"></script>

    <script>

      require([

        "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/WFSLayer",

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

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

        "dojo/domReady!"

      ], function(

        Map, FeatureLayer, Legend, SimpleRenderer, SimpleMarkerSymbol,

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

      ) {

        parser.parse();

 

 

  esriConfig.defaults.io.corsEnabledServers.push("data.conryservices.com:8080");

        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": "http://data.conryservices.com:8080/geoserver/wfs",

  "version": "1.0.0",

  "name": "zip_centroids",

  "wkid": 4326,

  "maxFeatures": 100,

  "mode": "snapshot"

  };

  layer.fromJson(opts);

  layer.setInfoTemplate(infoTemplate);

  /* // initializing layer as below works

        var layer = new FeatureLayer("https://tmservices1.esri.com/arcgis/rest/services/LiveFeeds/NOAA_METAR_current_wind_speed_direction/MapServer/0", {

          mode: FeatureLayer.MODE_ONDEMAND,

          outFields:["*"],

          infoTemplate: infoTemplate

        });

  */

        map.addLayers([layer]);

       

        var marker = new SimpleMarkerSymbol();

        var renderer = new SimpleRenderer(marker);

 

 

        renderer.setColorInfo({

          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])

          ]

        });

        layer.setRenderer(renderer);

 

 

      });

    </script>

  </head>

  <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>

    </div>

  </body>

</html>

 

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

Outcomes