I have code that allows a user to select a field from a dropdown menu and re-symbolize the layer (previously set up in settings) based on the selected field. When I set the renderer using the selected field however, I can tell on the console that the renderer has been updated, but the map does not update with the newly set symbology. What am I missing?
/** @jsx jsx */
import {
React, AllWidgetProps, jsx, DataSourceComponent,
SqlQueryParams, DataSourceManager, QueriableDataSource,
DataSource
} from "jimu-core";
import { JimuMapViewComponent, JimuMapView, FeatureLayerDataSource } from "jimu-arcgis";
import Point from "esri/geometry/Point";
import { Button, Dropdown, DropdownButton, DropdownMenu } from 'jimu-ui'
export default class Widget extends React.PureComponent<AllWidgetProps<any>, any>
{
constructor(props) {
super(props);
this.state = {
allFields: [],
lyr:null
}
}
OnSelectedFieldChanged = e => {
const myfield = e.target.value;
const fwySym = {
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "#30ffea",
width: "0.5px",
style: "solid"
};
const hwySym = {
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "#ff6207",
width: "0.5px",
style: "solid"
};
const otherSym = {
type: "simple-line", // autocasts as new SimpleLineSymbol()
color: "#ef37ac",
width: "0.5px",
style: "solid"
};
const myRend =
{
type: "unique-value", // autocasts as new UniqueValueRenderer()
legendOptions: {
title: "Freeway type"
},
defaultSymbol: otherSym,
defaultLabel: "State Highway",
field: myfield,
uniqueValueInfos: [
{
value: "YES",
symbol: fwySym,
label: "Interstate"
},
{
value: "NO",
symbol: hwySym,
label: "US Highway"
}
]
};
this.state.lyr.renderer=myRend;
this.state.lyr.refresh();
console.log(this.state.lyr);
}
onDataSourceCreated = (ds: DataSource) => {
const datasrc=this.props.useDataSources[0]
const myDs = DataSourceManager.getInstance().getDataSource(datasrc.dataSourceId) as FeatureLayerDataSource
const fl = myDs.layer
this.setState({ allFields: fl.fields, lyr: fl })
}
render() {
return <div className="widget-starter jimu-widget">
<DataSourceComponent
useDataSource={this.props.useDataSources[0]}
widgetId={this.props.id}
onDataSourceCreated={this.onDataSourceCreated}
/>
{console.log(this.state.lyr)}
{this.state.allFields.length > 0 &&
<select onChange={this.OnSelectedFieldChanged}>
<option value="Select a field">-- select a field --</option>
{this.state.allFields.map((field) => <option key={field.alias} value={field.name}>{field.alias}</option>)}
</select>}
</div>
}
}
@Jianxia @GavinRehkemper @milesleeaus @EmilieRabeau @PatrickHuls_SpatialNinja @TonghuiMing @jcarlson @KenBuja @RhettZufelt @ShengdiZhang @ZhifangWang @DaveFullerton @DavidMartinez
