Layer Effects in ArcGIS

Layer Effects

The ArcGIS API for JavaScript has had layer effects for a while now. You can do some pretty amazing visualizations with them. The recent release of the API introduced some more effects that you can abuse use wisely.

Let me tell you, when effects were introduced in the API, my excitement level was Dragon Ball 9000! Considering the fact you can apply an effect to features that match a query, as well as features that don’t match your query, you can do some cool stuff to emphasize data in your apps! This demo is a great playground to try stuff out.

New Stuff

So what’s new in effects world? The two effects that were missing, that I might have gently prodded for, but are finally here are blur and drop-shadow. We even get bloom, which is insane! Layer effects are based on css filters, so you can check that documentation for some ideas on how to use them. I had resorted to some crazy hacks to get similar effects, but pretty sure I could do this much cleaner now.

I can use something like the Slider widget to create a cool interactive app with the effects. I can use the Slider to grab values I can use to pass to my effects. Most of the time, I don’t want to apply the effects directly to my layer, I’ll apply them to the LayerView.

When the Slider values update, I can use them to create a FeatureFilter with the FeatureEffect.

view.whenLayerView(layer).then(async (layerView) => {
  await whenFalseOnce(layerView, "updating");
  slider.on("thumb-drag", ({ value }) => {
    label.innerText = `${value}%`;
    if (value > 0) {
      layerView.effect = {
        filter: {
          where: `PctUnemployed_CurrentMonth < ${value}`,
        },
        includedEffect: "bloom(20%) drop-shadow(2px, 2px, 2px)",
        excludedEffect: "blur(7px)",
      };
    } else {
      layerView.effect = null;
    }
  });
});

I wait for the LayerView to finish doing it’s thing and now I know I can apply an effect to it. I’m blooming it up with some drop-shadow and blurring faces like I’m hiding something!

I can’t tell you how much fun this stuff is.

You can watch me go through this in action here!