Mask layers in Web AppBuilder App

Question

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.

LukasWürsch · Answer

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.

LukasWürsch · Answer

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

kenbuja · Answer

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.