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

Question

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

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. UniqeRender_3X.html.zip

sirishb · Answer

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

KristianEkenes · Answer

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.