Mask layers in Web AppBuilder App

[LukasWürsch]

Hi,

I have to create a regional data viewer with Web AppBuilder for Developers (2.6). The available layers are on national level, yet the application should only draw the layers in a particular province, while data in the rest of the provinces is masked out. 

Is it possible to configure an App created with WAB (or the webmap it uses) to only show layers within in a defined extent? Or is there a way to mask / clip layers by extent with JSAPI 3.x?

I would be very thankful for suggestions or hints in this matter.

[Egge-Jan_Pollé]

Hi Lukas Würsch,

Did you have a look at this very cool masking example?

Masking effect using a custom layer view | ArcGIS API for JavaScript 4.15 (It uses the JSAPI 4.x which is the successor of the JSAPI 3.x)

An please note:

This sample shows experimental functionality, please read the documentation carefully before using it in a product.

BR,

Egge-Jan

[KenBuja]

Remember that Web AppBuilder uses JS API 3.x. You'd have to use Experience Builder to take advantage of the JS API 4.x capabilities.

[LukasWürsch]

Hi Egge-Jan, thank you for sharing this example, really nice that we can do that with 4.x. Unfortunately, I must use Web AppBuilder so i cannot use this

[LukasWürsch]

I sort of found a way to make it work for api 3.x and Web AppBuilder: I added a graphic layer as mask layer, covering the whole map, except the location I want to show. 

I added the following code to a widget which is opening when the application starts:

startup: function startup() {
    var webmap = this.map;

    // Create Polygon covering the whole world, except an area of interest
    var coordinatesMaskLayer = [[-180, 90], [-180, -90], [180, -90], [180, 90], [-180, 90]]; // coordinates of the area which should be masked
    var coordinatesAreaOfInterest = [[11, 52], [11, 56], [15, 56], [15, 52], [11, 52]]; // coordinates of the area which should not be masked (must be within coordinatesMaskLayer)
    var polygonJson = {
        rings: [coordinatesMaskLayer, coordinatesAreaOfInterest],
        spatialReference: {wkid: 4326},
    };
    var polygonMask = new Polygon(polygonJson);

    // create graphic from polygon
    var graphicPolyMask = new Graphic({
        "geometry": polygonMask,
        "symbol": {"color": [0, 0, 0, 255], "width": 1, "type": "esriSFS", "style": "esriSFSSolid"}
    });

    // create a graphic (mask) layer and the polygon to it
    var graphicsLayer = new GraphicsLayer();
    graphicsLayer.add(graphicPolyMask);

    // add the graphic to the map and define opacity
    webmap.addLayer(graphicsLayer);
    graphicsLayer.setOpacity(0.5);

    .......
}‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍‍

It is not the ideal solution, as the graphic layer briefly reloads every time the zoom level is changed. If anyone is aware of a better solution to make this work with Web AppBuilder let me know.