Select to view content in your preferred language

How to define ColorScheme in ArcGIS API Javascript 4.9?

1878
4
Jump to solution
12-02-2018 09:10 PM
LandcorAdmin
Emerging Contributor

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

0 Kudos
1 Solution

Accepted Solutions
RobertScheitlin__GISP
MVP Emeritus

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

View solution in original post

4 Replies
RobertScheitlin__GISP
MVP Emeritus

Pavel,

   I have not done this personally but the documentation here:

https://developers.arcgis.com/javascript/latest/api-reference/esri-renderers-smartMapping-symbology-... 

Gives you the the property of the object that is expected.

0 Kudos
LandcorAdmin
Emerging Contributor

Hi Robert,

thank you for your help.

I am having issues figuring out how to define the property of the object.

I am looking at ColorSchemeForPolygon and the id property is unclear to me:

The id is assigned based on the following template: <themeName>/<basemapName>/<schemeName>.

What is the schemeName, how can I define it? 

Thank you.

Pavel

0 Kudos
RobertScheitlin__GISP
MVP Emeritus

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
        }‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍
LandcorAdmin
Emerging Contributor

Hi Robert,

thank you very much, it worked perfectly. 

Pavel

0 Kudos