How do show updated layer renderer in map? (WAB-DE/JSAPI 3.x)

387
2
Jump to solution
06-11-2021 12:26 PM
Arne_Gelfert
Regular Contributor

Likely this is explained somewhere but I can't find it and nothing I've tried seems to work. Working in WAB DE 2.16 with corresponding JSAPI 3.x. The back and forth between the JSAPI documentation and the cryptic jimu pages is killing me.

I have a dojo dropdown that allows me to set a filter expression for a particular layer. Depending on the value selected from the dropdown, only features with attribute A matching the dropdown value are shown in the map. Simple enough, right?

Now I would also like to color those features based on Attribute B as part of the same dropdown event handler. Value1 = 'red', value2 = 'blue', value3 = 'green'... something like that.

I have created a renderer that dynamically creates a list of colors depending on the list of values for Attribute and I seem to be updating the layers renderer. But the change is never reflected in the map.

I am doing something like this:

var nodeId = 'my_id'
var layerStructure = LayerStructure.getInstance();
var myLayer = layerStructure.getNodeById(nodeId);
myLayer.renderer = uniqueValueRenderer;

I can see in Dev Tools myLayer now has this renderer with the correct number of values. But the map does not update.

myLayer.refresh()

doesn't work. It says:

Not entirely sure what the difference is between the layerNode and layerNode.getLayerObject() but when I try this:

myLayer.getLayerObject().then(function(result) {
   result.renderer = uniqueValueRenderer;
   console.log(result);
   result.refresh();
});

there is no error and I also see the renderer when I look at 'result'. But again, the map doesn't update.

And how about RendererChooser? Where does that come in? I've looked with no luck for an example of how that's supposed to be used but I can't find one. Is this a features vs. graphics issue? Am I not seeing the trees for the forest? 

0 Kudos
1 Solution

Accepted Solutions
Arne_Gelfert
Regular Contributor

So turns out that the issue was not with refresh() or with creating the uniqueValueRenderer() but I was doing this:

// inside foreach loop over mycolors list
uniqueValueRenderer.addValue(attr, new SimpleMarkerSymbol().setColor(new Color(mycolor)));

when I should have been doing this:

// inside foreach loop over mycolors list
let rendSymbol = new SimpleFillSymbol();
rendSymbol.setColor(new Color(mycolor));
uniqueValueRenderer.addValue(attr, rendSymbol);

Not entirely sure why the latter but the former fails. But I got it working. Now depending on your choice of attribute, we can dynamically create a palette of colors and symbolize map features with the palette.

View solution in original post

0 Kudos
2 Replies
Arne_Gelfert
Regular Contributor

So turns out that the issue was not with refresh() or with creating the uniqueValueRenderer() but I was doing this:

// inside foreach loop over mycolors list
uniqueValueRenderer.addValue(attr, new SimpleMarkerSymbol().setColor(new Color(mycolor)));

when I should have been doing this:

// inside foreach loop over mycolors list
let rendSymbol = new SimpleFillSymbol();
rendSymbol.setColor(new Color(mycolor));
uniqueValueRenderer.addValue(attr, rendSymbol);

Not entirely sure why the latter but the former fails. But I got it working. Now depending on your choice of attribute, we can dynamically create a palette of colors and symbolize map features with the palette.

0 Kudos
KisakyeM
New Contributor III

@Arne_Gelfert do you have a widget with the full code that you wouldn't mind sharing? I am trying to do something similar to you but having lots of trouble.

0 Kudos