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

SirishByreddy — Sat, 11 Dec 2021 06:22:01 GMT

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>

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.

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

KristianEkenes — Fri, 23 Aug 2019 15:39:16 GMT

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.

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

SirishByreddy — Sat, 24 Aug 2019 04:57:04 GMT

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

topic Re: Unique Value Renderer with color ramp in JavaScript API Version 4X in ArcGIS JavaScript Maps SDK Questions

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

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

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