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
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
33
34
const worldImagery = new TileLayer({
portalItem: {
id: "10df2279f9684e4a9f6a7f08febac2a9"// world imagery }
});
// clicked country feature will be added to this layerconst graphicsLayer = new GraphicsLayer({
blendMode: "destination-in",
title: "layer"});
const tileLayer = new TileLayer({
portalItem: {
// bottom layer in the group layerid: "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 countryconst 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 = newMap({
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
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
33
34
35
36
asyncfunctionhighlightCountry(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 pointconst {
features: [feature]
} = await countries.queryFeatures(query);
// user clicked on a country and the feature is returnedif (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.extent.clone().expand(1.8)
},
{ 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;
}
}