You are using a browser that is no longer supported. Please use the latest version of Google Chrome, Mozilla Firefox, Apple Safari, or Microsoft Edge. For more information please see the System Requirements.
Skip To ContentArcGIS for DevelopersSign In Dashboard
Loading...

Note: Support for 3D on mobile devices may vary, view the system requirements for more information.

This sample uses layer blending on multiple layers to create a more artistic way of highlighting features selected by the user.

How it works

When the application loads, the basemap is displayed over all other layers in the map. When a user clicks on a country, the country will be highlighted as shown below:

multiply-layers-blendmode

The light gray canvas vector tiles layer and a countries feature layer are added to a group layer and the destination-over blendMode is set on the group layer. With the destination-over blendMode, the background layer covers, or is placed over, the top layer. The content of the top layer is visible where both layers do not overlap. When the app loads, you see the modern antique vector tiles basemap on top of the groupLayer.

// 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);

The buffersGraphicsLayer is created with the destination-in blendMode and is added to the basemap as shown below. The destination-in blendMode displays the background layer where it overlaps with the top layer. Everything else is made transparent. When the app loads, a white polygon graphic that covers the world is added to the graphics layer. Because this polygon covers the entire world, you see the entire modern antique basemap over the graphics layer.

// With destination-in blend mode, the contents of background layer is
// kept where it overlaps with top layer. Everything else is made transparent.
// Graphicslayer will be displayed underneath modern antique vector tiles
// this layer is added to the basemap
const buffersGraphicsLayer = new GraphicsLayer({
  blendMode: "destination-in"
});

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

Then when user clicks a country, five ring buffers are created for the country that the user clicked on. The results of the buffer operation are added to the graphicsLayer. Then we zoom to the clicked country while decreasing the opacity of the white graphic all way to full transparency. Once this graphic is fully transparent, you will see the content of the group layer where the group layer and the basemap do not overlap. Remember we have destination-over blendMode set on the groupLayer. We still see the basemap for the clicked country, because the graphics layer is displaying the buffer polygons.

// listen to the view's click event
view.on("click", async (event) => {
  const {
    features: [feature]
  } = await layerView.queryFeatures({
    geometry: view.toMap(event),
    returnGeometry: true,
    maxAllowableOffset: 10000,
    outFields: ["*"]
  });

  buffersGraphicsLayer.graphics.removeAll();

  // if user clicked on a country and buffers are returned
  // add the buffer polygons to the graphicslayer
  if (feature) {
    const bufferGraphics = bufferDistances.map((distance) => ({
      geometry: geometryEngine.buffer(
        feature.geometry,
        distance,
        "kilometers"
      ),
      symbol
    }));

    buffersGraphicsLayer.graphics.addMany(bufferGraphics);
    // add an animation when zooming to the clicked 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 });
  }
});

The map would look and behave like the following where the group layer is displayed over the basemap when:

  • The blendMode property is not set on any of the layers
  • Only buffersGraphicsLayer has the destination-in blendMode set and is part of the basemap.

multiply-layers-no-blendmode

If the groupLayer is the only layer that has a blend mode set (destination-over in this case), then the app would look and behave like the following when the user clicks on a country.

multiply-layers-no-blendmode

Sample search results

TitleSample
Loading...