Hey everyone,
I'm new to ESRI, so I apologize if this is a novice question, but I've been banging my head on it all day and could use a hand. Here's my situation: I'm currently trying to update the color of a label based on an attribute that updates on user events.
1. When User opens a popup, the features attribute is updated to 1.
watchUtils.whenDefined(this.view.popup, 'selectedFeature', async (selectedFeature: __esri.Graphic) => {
if (selectedFeature) {
selectedFeature.setAttribute('selected', 1);
const update = await this.currentLayer.applyEdits({updateFeatures: [selectedFeature]});
}}
);
2. The UniqueValueRenderer renders different graphics depending on the selected attribute. So far, this all works, and I'm just posting it for context. When the attribute changes, a new graphic appears.
export const UniqueValueRenderer = {
type: 'unique-value', // autocasts as new UniqueValueRenderer()
field: 'type',
field2: 'selected',
fieldDelimiter: ', ',
defaultSymbol: { type: 'simple-fill' }, // autocasts as new SimpleFillSymbol()
uniqueValueInfos: [{
value: 'background, 0',
symbol: backgroundColorSymbol(false)
}, {
value: 'background, 1',
symbol: backgroundColorSymbol(true)
}]
};
3. My two label classes include 'where' clauses that differentiate which label is to be applied based on the attribute.
export const deSelectedLabelClass = {
symbol: {
type: 'text',
yoffset: 1.5,
size: 25,
color: '#00789E',
font: {
family: 'Ubuntu Mono',
size: 14,
weight: 'bold'
}
},
labelPlacement: 'center-center',
labelExpressionInfo: {
expression: '$feature.totalAssets'
},
where: 'selected = 0',
};
export const selectedLabelClass = {
symbol: {
type: 'text',
yoffset: 1.5,
size: 25,
color: 'white',
font: {
family: 'Ubuntu Mono',
size: 14,
weight: 'bold'
}
},
labelPlacement: 'center-center',
labelExpressionInfo: {
expression: '$feature.totalAssets'
},
where: 'selected = 1',
};
4. I toggle the layers depending on the scale. The context for me telling you this is that when I remove the updated layer and then add it back on, the changes have occurred.
this.view.watch('scale', (scale) => {
scale < 73000
? this.removeAndReplaceCurrentLayer(sitesLayer, false)
: this.removeAndReplaceCurrentLayer(assetClusterLayer, true);
});
private removeAndReplaceCurrentLayer(layer: __esri.FeatureLayer, shouldBeClustered: boolean): void {
if (this.isMapClustered() && !shouldBeClustered) {
this.toggleClustered(false);
this.view.map.layers.removeAll();
this.currentLayer = layer;
this.view.map.add(layer);
layer
.when()
.then(async () => {
this.layerView = await this.view.whenLayerView(layer);
});
}
if (!this.isMapClustered() && shouldBeClustered) {
this.toggleClustered(true);
this.view.map.layers.removeAll();
this.currentLayer = layer;
this.view.map.add(layer);
layer
.when()
.then(async () => {
this.layerView = await this.view.whenLayerView(layer);
});
}
}
I've tried calling refresh on every layer I can find, and none of it is working. That being said, I feel like there must some way to sync this up immediately. I just don't know how!
Any ideas?