How to apply UniqValueRenderer on App load ?
mayur9785 opened this issue · 6 comments
Hi,
How do I apply UniqueValueRendering on application load ?
I would like to do in CMV app same as below example.
https://developers.arcgis.com/javascript/3/jssamples/renderer_unique_value.html
https://developers.arcgis.com/javascript/3/samples/renderer_unique_value/
I am trying below code in viewer.js file but it doesnt work.
renderer: {
include: true,
id: 'renderer',
type: 'invisible',
path: 'dijit/_WidgetBase',
options: {
map: true,
startup:function()
{
debugger;
var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);
//create renderer
var renderer = new UniqueValueRenderer(defaultSymbol, "CURRENT_STATUS");
//add symbol for each possible value
renderer.addValue("Work Completed", new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
renderer.addValue("Job Cancelled", new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5])));
renderer.addValue("Not Approved", new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5])));
renderer.addValue("Final Survey", new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])));
renderer.addValue("Preliminary Survey", new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75])));
renderer.addValue("Preliminary Survey On Hold", new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.5])));
renderer.addValue("W N Cen", new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
renderer.addValue("Inspections", new SimpleFillSymbol().setColor(new Color([127, 127, 127, 0.5])));
renderer.addValue("Under inspection", new SimpleFillSymbol().setColor(new Color([0, 0, 0, 0.5])));
var featureLayer = new FeatureLayer("http://serviceurl/arcgis/rest/services/BPDHC/GIS_MAP/MapServer/0", {
//infoTemplate: new InfoTemplate(" ", "${CURRENT_STATUS}"),
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ["CURRENT_STATUS"]
});
featureLayer.setRenderer(renderer);
this.map.addLayer(featureLayer);
}
}
}
No error in console.
Thanks,
@mayur9785 Obviously, I cannot test using your service but you are on the right path and the code appears to be correct. I tested using the feature layer and renderer from the Esri example and it works:
For explorers from the future that return here someday, here is the complete widget. I separated the creation of the renderer into a separate method for readability but the concept is unchanged:
renderer: {
include: true,
id: 'renderer',
type: 'invisible',
path: 'dijit/_WidgetBase',
options: {
map: true,
startup: function () {
var renderer = this.createRenderer();
var featureLayer = new FeatureLayer('https://sampleserver1.arcgisonline.com/ArcGIS/rest/services/Specialty/ESRI_StateCityHighway_USA/MapServer/1', {
//infoTemplate: new InfoTemplate(' ', '${CURRENT_STATUS}'),
mode: FeatureLayer.MODE_ONDEMAND,
outFields: ['SUB_REGION']
});
featureLayer.setRenderer(renderer);
this.map.addLayer(featureLayer);
},
createRenderer: function () {
var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);
//create renderer
var renderer = new UniqueValueRenderer(defaultSymbol, 'SUB_REGION');
//add symbol for each possible value
renderer.addValue('Pacific', new SimpleFillSymbol().setColor(new Color([255, 0, 0, 0.5])));
renderer.addValue('Mtn', new SimpleFillSymbol().setColor(new Color([0, 255, 0, 0.5])));
renderer.addValue('N Eng', new SimpleFillSymbol().setColor(new Color([0, 0, 255, 0.5])));
renderer.addValue('S Atl', new SimpleFillSymbol().setColor(new Color([255, 0, 255, 0.5])));
renderer.addValue('Mid Atl', new SimpleFillSymbol().setColor(new Color([255, 255, 255, 0.75])));
renderer.addValue('E N Cen', new SimpleFillSymbol().setColor(new Color([0, 255, 255, 0.5])));
renderer.addValue('W N Cen', new SimpleFillSymbol().setColor(new Color([255, 255, 0, 0.5])));
renderer.addValue('E S Cen', new SimpleFillSymbol().setColor(new Color([127, 127, 127, 0.5])));
renderer.addValue('W S Cen', new SimpleFillSymbol().setColor(new Color([0, 0, 0, 0.5])));
return renderer;
}
}
}You also need to load the modules at the top of viewer.js:
...
'esri/layers/FeatureLayer',
'esri/symbols/SimpleLineSymbol',
'esri/symbols/SimpleFillSymbol',
'esri/renderers/UniqueValueRenderer',
'esri/Color'
], function (
...
FeatureLayer,
SimpleLineSymbol,
SimpleFillSymbol,
UniqueValueRenderer,
Color
) {@tmcgee Thanks for reply.
I had to change correct field name, now it is working, but LayerControl and Legend doesn't show the layer in widgets.
How to update Layercontrol and Legend widgets once we add layer to map ?
Thanks,
@mayur9785 It is possible to update the widgets via code though it is easier to include the layer in the operational layers section of viewer.js then just apply your renderer to the existing layer within the widget:
...
var featureLayer = this.map.getLayer('statusLayerID');
...Hi @tmcgee,
I have layer added in OperationLayers section of viewer.js file.
Where should I exactly add renderer code in widget.
I am getting error featureLayer.setRenderer is not a function in renderer widget
below is my OperationalLayers and renderer widget code :
DynamicLayer has only 1 layer name Status
{
type: 'dynamic',
url: 'http://myserviceurl/arcgis/rest/services/DHC/GIS_Map_2019/MapServer',
title: i18n.viewer.operationalLayers.dashboard,
options: {
id: 'dashboard',
opacity: 1.0,
visible: true,
imageParameters: buildImageParameters()
},
identifyLayerInfos: {
returnFieldName: true
},
legendLayerInfos: {
exclude: false
},
layerControlLayerInfos: {
swipe: true,
metadataUrl: true,
expanded: true,
}
},
This is renderer widget code in viewer.js file
renderer: {
include: true,
id: 'renderer',
type: 'invisible',
path: 'dijit/_WidgetBase',
options: {
map: true,
startup: function () {
var renderer = this.createRenderer();
var featureLayer = this.map.getLayer('dashboard');
featureLayer.setRenderer(renderer);
},
createRenderer: function () {
var defaultSymbol = new SimpleFillSymbol().setStyle(SimpleFillSymbol.STYLE_NULL);
defaultSymbol.outline.setStyle(SimpleLineSymbol.STYLE_NULL);
//create renderer
var renderer = new UniqueValueRenderer(defaultSymbol, 'CURRENT_STATUS');
//add symbol for each possible value
renderer.addValue("Preliminary Survey", this.createSymbol('#3A8AE0'));
renderer.addValue("Preliminary Survey On Hold", this.createSymbol('#FF0000'));
renderer.addValue("Preliminary Survey Rejected", this.createSymbol('#FF0000'));
renderer.addValue("Final Survey Assignement", this.createSymbol('#7030a0'));
renderer.addValue("Work Completed", this.createSymbol('#ff0000'));
renderer.addValue("Not Approved", this.createSymbol('#ff0000'));
return renderer;
},
createSymbol: function (color) {
return new SimpleFillSymbol(SimpleFillSymbol.STYLE_SOLID, new SimpleLineSymbol(SimpleLineSymbol.STYLE_SOLID, new Color("#000"), 0.5), new Color(color));
}
}
}
dashboard is a dynamic layer, not a feature layer. You can't apply a single renderer to the entire dynamic layer (all sub layers). You can either add the specific sub layer in your operational layers as a Feature Layer and use it with the existing code. Or you will have to modify your code to apply the renderer to a specific sub layer of the dynamic layer.