WFS Layer and Simple Renderer with Color Ramp Does not work
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/...", {
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.
