Unique Value Renderer JavaScript API Version 4X
We are trying to generate "Unique Value Renderer" on a "string" type field of the polygon feature class and colors should be assign between the given "From color" and "To color".
Input:
To achieve this, we have used "typeRendererCreator.createRenderer" by passing the "Feature Layer" and "Field" as parameters.
Output:
It is rendering features with system defined 12 colors.
Help required on how to pass the colorramp i.e.."From color" and "To color" (AlgorithmicColorRamp)
Following is the JavaScript API Version 4X snippet of the code we are trying to use
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<title>Generate data-driven visualization of unique values - 4.12</title>
<link
rel="stylesheet"
href="https://js.arcgis.com/4.12/esri/themes/light/main.css"
/>
<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}
</style>
<script src="https://js.arcgis.com/4.12/"></script>
<script>
require([
"esri/Map",
"esri/views/MapView",
"esri/layers/FeatureLayer",
"esri/renderers/smartMapping/creators/type",
"esri/renderers/smartMapping/symbology/type",
"esri/widgets/Legend",
"esri/widgets/BasemapGallery",
"esri/widgets/Expand"
], function(
Map,
MapView,
FeatureLayer,
typeRendererCreator,
typeScheme,
Legend,
BasemapGallery,
Expand
) {
// Create a map and add it to a MapView
var map = new Map({
basemap: "gray"
});
var view = new MapView({
container: "viewDiv",
map: map,
center: [-100, 39],
zoom: 5
});
// Create FeatureLayer
var layer = new FeatureLayer({
url: "https://services.arcgis.com/V6ZHFr6zdgNZuVG0/arcgis/rest/services/US_county_crops_2007_clean/FeatureServer/0"
});
map.add(layer);
view.when(generateRenderer);
function generateRenderer() {
var params = {
layer: layer,
field: "POP2007"
};
typeRendererCreator
.createRenderer(params)
.then(function(response) {
// set the renderer to the layer and add it to the map
layer.renderer = response.renderer;
})
.catch(function(error) {
console.error("there was an error: ", error);
});
}
});
</script>
</head>
<body>
<div id="viewDiv"></div>
</body>
</html>
Same thing we could achieve with JavaScript API Version 3X.
By using JavaScript API Version 3X version we could achieve this and below is the code snippet which we were used (Attached complete code).
function createRenderer(field) {
// base symbol renderer
var baseSymbol = new SimpleFillSymbol();
baseSymbol.setStyle(SimpleFillSymbol.STYLE_SOLID);
baseSymbol.setColor(new Color([255, 255, 0, 0.25]));
var highlightOutline = new SimpleLineSymbol();
highlightOutline.setWidth(1);
highlightOutline.setStyle(SimpleLineSymbol.STYLE_DASH);
highlightOutline.setColor(new Color([255, 0, 0, 1]));
baseSymbol.setOutline(highlightOutline);
// from to colors for the renderer
var defaultFrom = Color.fromHex("#008000");
var defaultTo = Color.fromHex("#FF0000");
var uniqueDefinition = new UniqueValueDefinition();
uniqueDefinition.colorRamp = colorRamp;
uniqueDefinition.attributeField = field;
uniqueDefinition.baseSymbol=baseSymbol;
var colorRamp = new AlgorithmicColorRamp();
colorRamp.fromColor = defaultFrom;
colorRamp.toColor = defaultTo;
colorRamp.algorithm = "hsv"; // options are: "cie-lab", "hsv", "lab-lch"
uniqueDefinition.colorRamp = colorRamp;
var params = new GenerateRendererParameters();
params.classificationDefinition = uniqueDefinition;
var generateRenderer = new GenerateRendererTask(countiesUrl);
generateRenderer.execute(params, applyRenderer, errorHandler);
}
function applyRenderer(renderer) {
featureLayer.setRenderer(renderer);
featureLayer.redraw();
}
function errorHandler(err) {
console.log('Oops, error: ', err);
}
Appreciate help on this. Thanks.
Are you sure UniqueValueRenderer is the renderer type you want to use in this case? The code you attached is generating a lot more than 12 unique values because it's a number field. Here's a pen of the attached code: https://codepen.io/kekenes/pen/NWKdLLL?editors=1000 along with a screenshot
It seems that a continuous color renderer is closer to what you're looking for. https://developers.arcgis.com/javascript/latest/sample-code/visualization-vv-color/index.html
In that example you can provide a to and from color with a much more legible legend.
I also noticed you specifically asked about supporting this for string fields. I'm not sure how the renderer would know what string value to start with (the from color) versus a string value to end with (the to color) and how to interpolate all the values in between if they are not numbers. Will the sample above work for your use case? If not, I'll need some further clarification.
With the help of your other thread answer...https://community.esri.com/message/873424-initialize-uniquevalue-renderer-with-3-fields i am able to generate UniqueValue renderer for 3 fields
Trying to render UniqueValue renderer with colorramp.
Appreciate help on this.
Thanks.
S B