Change symbology in colorAndSizeRendererCreator

193
4
Jump to solution
01-20-2022 02:25 AM
pragati224
New Contributor III

Hi Developers,

I am working on tree growth apllication at diffrenet time. I found a sample code in ARCGIS api for javascript for using slidear to change the size of object. I have input my data on it and it is coming but I am unable to change the symbology from pont to esrirealistic tree. 

my code is given below............

<html>
<head>
<meta charset="utf-8" />
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>

<title>
Generate univariate continuous size and color visualization in 3D | Sample
| ArcGIS API for JavaScript 4.22
</title>

<link
rel="stylesheet"
href="https://js.arcgis.com/4.22/esri/themes/light/main.css"
/>
<script src="https://js.arcgis.com/4.22/"></script>

<style>
html,
body,
#viewDiv {
padding: 0;
margin: 0;
height: 100%;
width: 100%;
}

#containerDiv {
background-color: white;
padding: 3px;
text-align: center;
}

#title {
font-size: 14pt;
}
</style>

<script>
require([
"esri/WebScene",
"esri/views/SceneView",
"esri/layers/FeatureLayer",
"esri/smartMapping/renderers/univariateColorSize",
"esri/smartMapping/statistics/histogram",
"esri/widgets/smartMapping/ColorSizeSlider",
"esri/symbols/PathSymbol3DLayer"
], (
WebScene,
SceneView,
FeatureLayer,
colorAndSizeRendererCreator,
histogram,
ColorSizeSlider,
PathSymbol3DLayer
) => {
const map = new WebScene({
portalItem: {
id: "38af2baefd3245f08895f07d915407db"
}
});

// The minSize and maxSize of volumetric symbols are determined
// based on the view/camera the data will be displayed in.

const view = new SceneView({
container: "viewDiv",
map: map,

});

// Create FeatureLayer instance with popupTemplate

const layer = new FeatureLayer({
url: "https://services8.arcgis.com/Dxp0iiM83fijnVoI/arcgis/rest/services/tree_hi/FeatureServer",
visible: false,
popupTemplate: {
// autocasts as new PopupTemplate()
title: "{CITY_NAME}, {CNTRY_NAME}",
content: "Total population: {Z}",
fieldInfos: [
{
fieldName: "Z",
format: {
digitSeparator: true,
places: 0
}
}
]
}
});
map.add(layer);

// configure parameters for the renderer generator.
// the layer must be specified along with a field name
// or arcade expression. The view and other properties determine
// the appropriate default color and size schemes.

const params = {
layer: layer,
field: "Z",
view: view,
symbol: {
type: "web-style", // autocasts as new WebStyleSymbol()
styleName: "esriRealisticTreesStyle",
name: "Other"
},
minValue: 0,
maxValue: 25
};

// Generate a renderer visualizing a single variable
// with continuous color and size based on the
// statistics of the data in the provided layer
// and field name.
//
// This resolves to an object containing several helpful
// properties, including size/color schemes, statistics,
// the renderer, and visual variables
let rendererResult = null;

view.when().then(() => {
colorAndSizeRendererCreator
.createContinuousRenderer(params)
.then((response) => {
// set generated renderer on the layer and add it to the map
rendererResult = response;
layer.renderer = response.renderer;
if (!layer.visible) {
layer.visible = true;
}

// generate a histogram for use in the slider. Input the layer
// and field name to generate it.
// You can also use an arcade expression instead of
// a field and normalization field

return histogram({
layer: layer,
field: params.field,
numBins: 40,
minValue: params.minValue,
maxValue: params.maxValue
});
})
.then((histogramResult) => {
const slider = ColorSizeSlider.fromRendererResult(
rendererResult,
histogramResult
);
slider.container = "slider";
slider.viewModel.precision = 0;
slider.labelFormatFunction = (value) => {
return parseInt(value.toFixed(0)).toLocaleString();
};
slider.histogramConfig.standardDeviation = null;
view.ui.add("containerDiv", "bottom-left");

// when the user slides the handle(s), update the renderer
// with the updated color and size visual variable objects

function changeEventHandler() {
const renderer = layer.renderer.clone();
renderer.visualVariables = slider.updateVisualVariables(
renderer.visualVariables
);
layer.renderer = renderer;
}

slider.on(
["thumb-change", "thumb-drag", "min-change", "max-change"],
changeEventHandler
);
})
.catch(console.error);
});
});
</script>
</head>

<body>
<div id="viewDiv"></div>
<div id="containerDiv">
<span id="title" class="esri-widget">Total population</span>
<div id="slider"></div>
</div>
</body>
</html>

 

 

 

Please help me in my task as soon as posible. any suggestions are welcome.

0 Kudos
1 Solution

Accepted Solutions
KristianEkenes
Esri Regular Contributor

You can't pass a symbol to the smart mapping creator functions. These functions rely on schemes (symbol properties) instead of symbol objects. You just need to swap out the symbol in the resulting renderer with the try symbol. See this for example: 

 
Note that you also need to set the symbolType to "3d-volumetric-uniform" in the method params. This will generate the proper size variables so the rendering is correct and the slider will work well alongside it.
 

View solution in original post

4 Replies
KristianEkenes
Esri Regular Contributor

You can't pass a symbol to the smart mapping creator functions. These functions rely on schemes (symbol properties) instead of symbol objects. You just need to swap out the symbol in the resulting renderer with the try symbol. See this for example: 

 
Note that you also need to set the symbolType to "3d-volumetric-uniform" in the method params. This will generate the proper size variables so the rendering is correct and the slider will work well alongside it.
 
pragati224
New Contributor III

Hi Kristian

Thank you for clarifying. This is helpful. can u please suggest where I will have to change the color of symbols because I am new to it. I am providing the color code just below the symbology but it is not coming.

response.renderer.classBreakInfos[0].symbol = {
type: "web-style", // autocasts as new WebStyleSymbol()
styleName: "esriRealisticTreesStyle",
name: "Acer",
visualVariables: [
{
type: "color", // indicates this is a color visual variable
field: "Z", // total population in poverty
//normalizationField: "TOTPOP_CY", // total population
stops: [
{
value: 0.1, // features where < 10% of the pop in poverty
color: "#72f50e", // will be assigned this color (beige)
//label: "10% or lower" // label to display in the legend
},
{
value: 25, // features where > 30% of the pop in poverty
color: "#003400", // will be assigned this color (purple)
//label: "30% or higher" // label to display in the legend
}
]

// features with values between 0.1 - 0.3 will be assigned
// a color on a ramp between beige and purple proportional
// to where the value falls between 0.1 and 0.3
}
]};

 

Please suggest me the solution

0 Kudos
KristianEkenes
Esri Regular Contributor

For 3D webstyles like the tree, we provide some utility functions for changing color and size. I highly recommend reading this guide: https://developers.arcgis.com/javascript/latest/visualization/3d-visualization/visualizing-points-3d... The code you're looking for is specifically at this location: https://developers.arcgis.com/javascript/latest/visualization/3d-visualization/visualizing-points-3d... 

Here's the full chapter on 3D visualization: https://developers.arcgis.com/javascript/latest/visualization/3d-visualization/

And if you want to read about all data viz capabilities in the JS API, here's the overall chapter: https://developers.arcgis.com/javascript/latest/visualization/

 

0 Kudos
pragati224
New Contributor III

Thank you for your support but Using the 3d guideline for tree visualization i am able to draw a tree with symbology but wile adding it in slider I got failed. Actually I have to visualize Tree As a time series analysis using slider. but I am unable to fetch the data in that then I used this code but again got no result  in color coding.

This is the feature layer which I have to visualize as tree in time series

https://services8.arcgis.com/Dxp0iiM83fijnVoI/arcgis/rest/services/Tree_TH/FeatureServer

 

0 Kudos