Highlight feature with effects and blending

1
2
3
4
5
6
7
8
9
10
// This group layer groups the gray canvas vector tiles and
// countries feature layer.
// With destination-over blendMode, the background layer covers
// the top layer. The top layer is put underneath the destination layer.
// So when the app starts, the basemap layer will be shown over this layer
const groupLayer = new GroupLayer({
  layers: [vtLayer, countries],
  blendMode: "destination-over"
});
map.add(groupLayer);

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
// countryGraphicsLayer is added to the view's basemap.
// It will contain black polygon covering the extent of the world
// the country graphic will also be added to this layer when user clicks a country.
// With destination-in blend mode, the contents of background layer is
// kept where it overlaps with top layer. Everything else is made transparent.
// In this case, the countryGraphicsLayer will be displayed underneath
// modern antique vector tiles basemap.
// The bloom effect will add a glow around the selected country.
const countryGraphicsLayer = new GraphicsLayer({
  blendMode: "destination-in",
  countryGraphicsLayer
});

map.loadAll().then(async () => {
  addWorld(); // adds a black polygon graphic that covers the world
  // add the country graphicslayer to the basemap
  map.basemap.baseLayers.add(countryGraphicsLayer);
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
// listen to the view's click event
view.on("click", async (event) => {
  // query the countries featurelayer for a country that intersects the point
  // user clicked on
  const {
    features: [feature]
  } = await layerView.queryFeatures({
    geometry: view.toMap(event),
    returnGeometry: true,
    maxAllowableOffset: 10000,
    outFields: ["*"]
  }
  countryGraphicsLayer.graphics.removeAll();
  animation && animation.remove(
  let world = addWorld(
  // add the clicked country feature to the graphicslayer
  if (feature) {
    feature.symbol = symbol;
    countryGraphicsLayer.graphics.add(feature
    // add a fade animation to show the highlight effect
    // for the selected country
    animation = fadeWorld(world
    // zoom to the highlighted country
    view.goTo(
      {
        target: view.toMap(event),
        extent: feature.geometry.extent.clone().expand(1.8)
      },
      { duration: 1000 }
    );
  }
});