This sample demonstrates how a scale dependent drop-shadow feature effect set on a FeatureLayerView can be used to highlight counties where the winning party in a presidential election flipped from the previous election.
This map has two feature layers that show the winning parties by county in the 2012 and 2016 presidential elections. References to those layers and their layer views are set once the webmap is loaded. Once each layer view is initialized, we set a scale dependent feature effect on each one to highlight the counties where the winning party flipped for the presidential election that year.
// get 2012 and 2016 election layers when the view is initialized
// setup feature effects on the corresponding layer views
view.when().then(() => {
// 2016 election layer
const layer16 = webmap.layers.items[0];
view.whenLayerView(layer16).then( (lv) => {
applyFilter(lv, "F2012_to_2016_Party_Switch");
});
// 2012 election layer
const layer12 = webmap.layers.items[1];
view.whenLayerView(layer12).then( (lv) => {
applyFilter(lv, "F2008_to_2012_Party_Switch");
});
// this function is called when layerViews are loaded
// for 2012 and 2016 election results layers and called
// once to set up the effects on the layer views to set
// drop-shadow effect on counties where the winning parties
// changed from the previous election
function applyFilter(layerView, field) {
const featureFilter = {
where: `${field}='R' OR ${field}='D'`
};
// set scale dependent drop-shadow effects on election results featurelayers
layerView.featureEffect = {
filter: featureFilter,
includedEffect: [
{
scale: 36978595,
value: "drop-shadow(3px, 3px, 4px)"
},
{
scale: 18489297,
value: "drop-shadow(2px, 2px, 3px)"
},
{
scale: 4622324,
value: "drop-shadow(1px, 1px, 2px)"
}
]
};
}
});