AnsweredAssumed Answered

How to define ColorScheme in ArcGIS API Javascript 4.9?

Question asked by Landcor on Dec 2, 2018
Latest reply on Dec 4, 2018 by Landcor
  • Comment • 4

Hi,

I am developing a custom web map application using ArcGIS API for JavaScript 4.9 and trying to utilize smartmapping functionality (createContinuousRenderer()) -> generating data-driven continuous color visualization based on data from a numeric field in a FeatureLayer.

 

To the point....the data I would like to visualize is simply % of market share by municipality.  The goal is to create a continuous renderer that would look like this: 

 

 

 However, currently, I am getting the following : 

 

 

Based on the API description (continuous renderer), the user may select a pre-defined color scheme. -> "Pass the scheme object to this property to avoid getting one based on a theme and the basemap"..this is exactly what I would like to avoid to!!!

 

My code snippet below:

---------------------------------------------------------- 

function generateRenderer(){
var fieldLabel = fieldSelect.options[fieldSelect.selectedIndex].text;

var colorParams = {
layer: AssessmentStat,
basemap: map.basemap,
view: view,
field: fieldSelect.value,
normalizationField: null,
theme: "above-and-below",
ColorScheme: ......???,
defaultSymbolEnabled: true,
legendOptions: {
title: "% Market Share in " + fieldLabel
}
};
colorRendererCreator.createContinuousRenderer(colorParams)
.then(function(response){
AssessmentStat.renderer = response.renderer;
});
}

--------------------------------------

Would anyone know how such colorscheme parameter is defined?

 

Thank you in advance.

 

Pavel

rscheitlin
rscheitlin Champion Dec 4, 2018 8:00 AM
Correct Answer

Pavel,

 

  Here is what the object looks like populated:

colorScheme: {
          id: "above-and-below/gray/div-blue-red",
          colors: [[255,0,0],[255,127,127],[255,255,255],[127,127,255],[0,0,255]],
          noDataColor: [0,0,0],
          colorsForClassBreaks: [
            {
              colors: [[255,0,0]],
              numClasses: 1
            }, {
              colors: [[255,0,0],[255,255,255]],
              numClasses: 2
            }, {
              colors: [[255,0,0],[255,255,255],[0,0,255]],
              numClasses: 3
            }, {
              colors: [[255,0,0],[170,0,85],[85,0,170],[0,0,255]],
              numClasses: 4
            }, {
              colors: [[255,0,0],[255,127,127],[255,255,255],[127,127,255],[0,0,255]],
              numClasses: 5
            }, {
              colors: [[255,0,0],[255,85,85],[255,170,170],[255,255,255],[127,127,255],[0,0,255]],
              numClasses: 6
            }, {
              colors: [[255,0,0],[255,85,85],[255,170,170],[255,255,255],[170,170,255],[85,85,255],[0,0,255]],
              numClasses: 7
            }, {
              colors: [[255,0,0],[255,63,63],[255,127,127],[255,191,191],[255,255,255],[170,170,255],[85,85,255],[0,0,255]],
              numClasses: 8
            }, {
              colors: [[255,0,0],[255,63,63],[255,127,127],[255,191,191],[255,255,255],[191,191,255],[127,127,255],[63,63,255],[0,0,255]],
              numClasses: 9
            }, {
              colors: [[255,0,0],[255,63,63],[255,127,127],[255,191,191],[255,255,255],[204,204,255],[153,153,255],[102,102,255],[51,51,255],[0,0,255]],
              numClasses: 10
            }
          ],
          outline: {
            color: {r: 153, g: 153, b: 153, a: 0.25},
            width: "0.5px"
          },
          opacity: 0.8
        }
See the reply in context
No one else had this question

Outcomes