Highlight a country with an effect

Explore in the sandboxView live

This sample uses a combination of layer effects and layer blending on multiple layers to make a country stand out from the rest of the map. When the app loads, you will see the country of France will stand out from the rest. The user can then click on any country to highlight that country on the map.

How it works

We start by adding the following layers to the map. We set the blendMode to destination-in on a graphics layer and add it on top of the world imagery tile layer in the group layer. Then, we add an another instance of the world imagery tile layer underneath the group layer.

Use dark colors for code blocksCopy
const worldImagery = new TileLayer({
  portalItem: {
    id: "10df2279f9684e4a9f6a7f08febac2a9" // world imagery
  }
});

// clicked country feature will be added to this layer
const graphicsLayer = new GraphicsLayer({
  blendMode: "destination-in",
  title: "layer"
});

const tileLayer = new TileLayer({
  portalItem: {
    // bottom layer in the group layer
    id: "10df2279f9684e4a9f6a7f08febac2a9" // world imagery
  }
});

// this grouplayer has two layers
// destination-in blendMode set on the graphics layer
// country from the world imagery layer will show when user clicks on a country
const groupLayer = new GroupLayer({
  layers: [
    tileLayer,
    // world imagery layer will show where it overlaps with the graphicslayer
    graphicsLayer
  ],
  opacity: 0 // initially this layer will be transparent
});

const map = new Map({
  layers: [worldImagery, groupLayer]
});

When the app loads or when the user clicks on any country in the map, we call the highlightCountry function (shown below). This function queries the countries feature layer and returns the clicked country feature. The app will then add this feature to the graphics layer. Since the graphics layer has the destination-in blendMode set, the app will show the contents of the world imagery tile layer within the boundary of the graphics layer. We apply the drop-shadow and brightness effects to the group layer to make the clicked country stand out from the rest. As for the other world imagery map which is displayed beneath the group layer, we set effects to blur, decrease its brightness, and apply grayscale.

Use dark colors for code blocksCopy
async function highlightCountry(query, zoomGeometry){
  // country symbol - when user clicks on a country
  // we will query the country from the countries featurelayer
  // add the country feature to the graphics layer.
  const symbol = {
    type: "simple-fill",
    color: "rgba(255, 255, 255, 1)",
    outline: null
  }

  // query the countries layer for a country that intersects the clicked point
  const {
      features: [feature]
    } = await countries.queryFeatures(query);
    // user clicked on a country and the feature is returned
    if (feature) {
      graphicsLayer.graphics.removeAll();
      feature.symbol = symbol;
      // add the country to the graphics layer
      graphicsLayer.graphics.add(feature);
      // zoom to the highlighted country
      view.goTo(
        {
          target: zoomGeometry,
          extent: feature.geometry.clone()
        },
        { duration: 1000 }
      );
      // blur the world imagery basemap so that the clicked country can be highlighted
      worldImagery.effect = "blur(8px) brightness(1.2) grayscale(0.8)";
      // set the group layer opacity to 1
      // also increase the layer brightness and add drop-shadow to make the clicked country stand out.
      groupLayer.effect = "brightness(1.5) drop-shadow(0, 0px, 12px)";
      groupLayer.opacity = 1;
    }
}

Layer

blendMode

destination