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.
💡 Learn about creating 3D maps and how to integrate custom base maps.
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.
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 conceptualize 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 make the masking effect as subtle or dramatic as you'd like. In the example image below, 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.
Masking layer options
There are several options for uploading a mask layer:
- Your GIS team can likely provide you with the appropriate file format via GeoJSON or a Shapefile.
- If you don't have access to spatial data or a GIS team who can assist, we recommend one of the following options:
- You can draw a custom layer by hand in Social Pinpoint - click 'Custom' above.
- 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.
- You can draw a custom layer by hand in Social Pinpoint - click 'Custom' above.
⚙️ Settings
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 Color - Determines the color of the mask layer. Black or white is usually used for the fill color unless the mask is 'inverted' (in which case you can apply other color 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 Color - Adds a colored '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 (see this option checked off in the example above).
With this feature enabled, participants cannot drop map markers outside of the study area and receive a warning message if attempting to do so.
Try it out!
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 around!