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
Solved! Go to Solution.
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
}
Pavel,
I have not done this personally but the documentation here:
Gives you the the property of the object that is expected.
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
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
}
Hi Robert,
thank you very much, it worked perfectly.
Pavel