Masking is a graphical technique used in mapping to hide, or 'mask' certain geographic features of a map. Social Pinpoint supports the use of masking to create interesting visual effects that draw a visitor's attention to specific parts of the map so they can focus on important information.

Within the Social Map, you can use masking to constrain a participant's feedback to a specific geographic location.

This tutorial will teach you how the masking features work in Social Pinpoint and how to use them within your mapping projects.

⚡Did you know - You can interact with the maps in this tutorial in 3D by holding down your right mouse button over the map? You can also use the designated control on the user interface, or hold the 'ctrl' or 'command' key on the keyboard while holding down the left mouse button.

What is a masking layer?

Mask layers can be used in both the Web Map and Social Map tools. The mask layer sits above all other layers, including the underlying basemap layer, and masks or 'shades-out' the geographic areas outside of it.

You can conceptualise a mask layer by thinking of it like a 'cookie-cutter' - geographic information inside of it is preserved, while information outside of it is 'cut' or hidden from view, usually with the use of shading. You can see this effect in the map above by zooming it out. Notice how the City of Sydney is in clear view, while the areas outside of the city's boundary appear much darker.

You can make the masking effect as subtle or dramatic as you'd like. In this example, we've changed the 'fill colour' of the mask to 'white' and set its opacity (how transparent the layer is) to 100%. These settings completely shade the areas outside of the mask shape.

When combined with 3D buildings (see our tutorial on adding 3D buildings), the study area appears to almost float on the page. This effect can be useful for a smaller location like a development site, where the spatial context isn't so important, as it helps attract a user's attention.

While strong masking effects like this can be visually striking, you'll usually want to show some context around your study area. To achieve this, you can reduce the opacity of the mask.

Here we've reduced the mask's opacity to 60%, changed its colour to black, and made the map a little larger to show more of the surrounding area.

We can further embellish the appearance of the mask layer by adding a coloured 'stroke' or outline to it. Here we've added a 'yellow' border to highlight the study area.

The final visual effect we can create is shading the study area itself, instead of the areas outside of it as we did above. We can achieve this by selecting the 'invert' option in the masking layer.

Here we've made the study area light pink, and given it a dashed border.

Inverting the mask layer can be an appropriate technique when communicating information via Web Map tool, but we don't recommend using this effect in the Social Map as it obscures the area where participants leave feedback.

Setting up a masking layer

Currently, you can only set up one mask layer for each map. You'll also need to create the mask shape from spatial data, meaning you will need a GIS file that corresponds to your study area (you cannot draw it within the application).

If you don't have access to spatial data or a GIS team who can assist, we recommend using geojson.io, a free and easy to use web tool that lets you draw shapes and turn them into spatial data. Use the available drawing tools to create your mask shape and when finished, 'save' your file as a .geojson and import it to Social Pinpoint.

Once you've imported your spatial layer as either a .geojson or a shapefile (ensuring you have all corresponding .shp files combined into a single .zip folder), add the mask by navigating to the 'Layers' section of the Settings in either the Web Map or Social Map tool and click the 'Add Layer' button. Next, select the 'Mask' option from the dropdown.

Once you have added your mask layer and pressed 'save layer', you will then be able to preview the masking effect and visually style it through the editor. You can adjust the following properties:

• Fill Colour - Determines the colour of the mask layer. Black or white is usually used for the fill colour unless the mask is 'inverted' (in which case you can apply other colour choices).
• Fill Opacity - Determines how opaque or 'see-through' the mask layer is. If it is 100%, it will completely obscure anything within the masking area.
• Stroke Colour - Adds a coloured 'border' or line around the mask shape.
• Stroke Width - Determines how thick or thin the border or line around the mask shape will be.
• Stroke Opacity - Changes the opacity of the border or line you have added.
• Dash Array - Determines whether the border or line around the mask shape is solid or 'dashed'. To create a solid line, set the dash array to 0,1. To create a dashed line with small line segments, set the dash array to 1,2).

Besides the style properties listed above, you can reverse the areas where the shading is applied by selecting the 'Invert mask' option at the bottom of the layer panel. This option applies shades the areas inside of the mask shape rather than the areas outside of it.

To preview any changes you make to the masking layer, you will need to click the 'Save Layer' button to apply the styles to the preview map.

Constraining contributions in the Social Map

Within the Social Map, a mask layer can do more than add visual effects to your maps. You can also use it to restrict contributions so that participants can only drop 'markers' within the geographic bounds of your study area.

To enable this feature, open the settings of the Social Map, and edit the properties of your mask layer. Then, enable the 'Restrict markers to mask' option.

With this feature enabled, participants cannot drop map markers within the study area and receive a warning message if attempting to do so.

Want to try out the masking features but don't have any spatial data handy? Download the City of Sydney boundary file, courtesy of their open Data Hub. Just download the zip file, upload it to your site, set the map location to Sydney, add it as a 'mask' layer and start playing!