AnsweredAssumed Answered

Unique Value Renderer with color ramp in JavaScript API Version 4X

Question asked by sirish.byreddy on Aug 8, 2019
Latest reply on Aug 23, 2019 by sirish.byreddy

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.

Attachments

Outcomes