AnsweredAssumed Answered

Changing visual variables based on user interaction

Question asked by p_griffith on Apr 17, 2017
Latest reply on Apr 18, 2017 by p_griffith

I'm trying to implement something like the data-driven opacity example shown here demonstrating the use of visual variables in version 4.3 of the ESRI JavaScript API, but with a twist: I'd like to alter the opacity values of the polygons when the user pans around the screen. I've been using the workflow described in this documentation, where you clone the renderer, create (or alter) an opacity visual variable object, then reassign it to the layer's renderer, but it doesn't seem to have an effect. What am I doing wrong? I expect the layer to be rendered using the new visual variables when the map is moved, but it doesn't look like the renderer has been altered in any way, or if the renderer has been altered, the polygons are not displayed any differently than before. Is this the correct workflow? Do I need to be adding a new, modified layer to the map and removing the old one?

 

Here's the code I'm adding to the example at the very end of the script tag, just after the legend is added to the map view:

view.watch("change", changeOpac);

function changeOpac() {
   var newRenderer = edLyr.renderer.clone();

   newRenderer.visualVariables = [{
      type: "opacity",
      field: "EDUCBASECY",
      stops: [{value: 300, opacity: 0.1},
              {value: 750, opacity: 0.9}]
   }];

   edLyr.renderer = newRenderer;
}

Thanks for any help you can provide!

Outcomes