Re-symbolized layer not updating on the map experience builder

803
2
Jump to solution
04-05-2022 12:47 PM
KisakyeM
New Contributor III

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 

0 Kudos
1 Solution

Accepted Solutions
mileslee_esri
New Contributor II

Hi KisakyeM,

Please find my modified codes which I think it's solved, noted that you have to modify both setting.tsx and widget.tsx and then select data source and map object. 

View solution in original post

0 Kudos
2 Replies
mileslee_esri
New Contributor II

Hi KisakyeM,

Please find my modified codes which I think it's solved, noted that you have to modify both setting.tsx and widget.tsx and then select data source and map object. 

0 Kudos
KisakyeM
New Contributor III

This works perfectly. Thank you!

0 Kudos