AnsweredAssumed Answered

Why can't visualVariables be edited in-place?  And how to control opacity of outline?

Question asked by tograh on Apr 10, 2018

In this fiddle, I have an early test for animation that allows the user to click "forward" and "backward" buttons to toggle the opacity of simple markers based on their "date" attribute.

 

Based on the examples I found (here and here), I'm creating graphics at multiple coordinates and then progressively updating the stop values of an OpacityVisualVariable so that only one graphic shows.  (I wish I understood why we do this instead of, say, tweening the coordinates of a single graphic.  Am I missing something important?)

 

For each "frame", I run the following code.

 

function(value) {
var clone = layer.renderer.clone();

// These lines don't work: __Editing the array in-place.__
//clone.visualVariables.splice(clone.visualVariables.findIndex(function(vv){return vv.type === "opacity";}),1);
//clone.visualVariables.push(buildOpacityVisualVariable(value));

// But this line does: __Recreating the array.__
//clone.visualVariables = buildAllVisualVariables(value);

// This also works: __Copying the array.__
var vvs = clone.visualVariables.slice();
vvs.splice(clone.visualVariables.findIndex(function(vv){return vv.type === "opacity";}),1);
vvs.push(buildOpacityVisualVariable(value));
clone.visualVariables = vvs;

// __Hypothesis: array assignment is initializing something.__

layer.renderer = clone;
document.getElementById("currentDate").innerHTML = value.format("MM/DD/YYYY");
};

 

(1) Why can't I edit the visualVariables in-place?  Editing in-place does have an effect; so I don't think I'm getting a copy of the array.  (It causes weird state side-effects.)  In my actual use case, I won't always know what other visual variables are assigned.  So my current "solution" is to edit the visualVariables in place and then reassign visualVariables.slice().

 

(2) How do I apply the OpacityVisualVariable to the outline as well as the simple marker?

Outcomes