Maps are a great way to efficiently communicate content in a visual and interactive way, and provide a great hook for attracting attention and inspiring engagement. This tutorial will show you how to add a 3D building layer to Social Pinpoint's mapping tools using Mapbox to boost the 'wow factor' and drive interaction.

Many users can struggle to interpret maps when viewed from a 'top-down' perspective, as it requires a particular skill that many of the public simply do not possess. Adding 3D buildings brings Social Pinpoint's mapping tools to a new level by creating a more 'realistic' virtual environment that better communicates a project's spatial context and facilitates engagement.

Step 1 - Create Mapbox account

Mapbox is an industry-leading online mapping application that lets you create and style beautiful web maps. We use Mapbox in Social Pinpoint to provide some of the basemap options in the Web Map and Social Map tools. These give us information like roads, land use, parks, hospitals, etc.

Mapbox also hosts a very useful dataset containing 3D building information, obtained from the Open Street Map project (this is a great project where anyone can contribute spatial information to). We can grab this dataset and bring it into Social Pinpoint for use in our maps.

To take advantage of the 3D building information you will first need to setup a Mapbox account. Mapbox is a paid service, but there is a free plan that provides 50,000 map views each month - this should be a generous amount for most engagement needs.

To create an account visit the website and click the 'Start mapping for free' button, then provide your details as requested. When creating the account, make note of the 'username' you use - you'll need this information later.

Step 2 - Setup a new map style

Step 2 involves setting up and styling a new custom map in Mapbox containing the 3D building information that we can then bring into Social Pinpoint.

Once you've created and validated your account, head to the Mapbox Studio page by clicking the 'profile' icon and selecting the 'Studio' option from the menu. Once in Studio, create a new map by clicking the 'New Style' button. This will open a new window allowing you to 'Choose a template' for your basemap. Select the 'Basic' option and then click the 'Customize Basic' button.

You will now see a new custom map, centered on Paris. Use the search bar at the top right of the map, and zoom the map in quite close. The 3D buildings will only render at smaller scales, and will not appear when the map is zoomed far away.

To add the 3D buildings to your map, select 'Buildings' from the menu on the left-hand menu which will open a new sub-menu. Next, click the toggle next to the '3D buildings' label to enable the layer - the 3D buildings should now appear on your map.

You can style the 3D building layer by clicking the 'more options' link at the top of the menu, then clicking the 'View Layers' link. This will present you with a number of style properties that you can change to alter the opacity of the layer or even change its color.

Once you have finished styling the layer, it's a good idea to rename your map by clicking the title at the top left of the main menu, and giving it a name like 3D building layers. Finally, it's time to publish the map so we can bring it into Social Pinpoint. Click the 'Publish' button at the top right of the menu and follow the prompts.

Step 3: Get access token and ID

Before we leave Mapbox, we need to obtain a few pieces of information that will link Social Pinpoint to your Mapbox content. To do this, click the 'Share' button at the top-right of the map.

This will open a new window which contains the 'Style ID' and 'Access Token'. We need to copy this information (sing the copy icon), and make note of it for later.

Step 4: Setup map in Social Pinpoint

We're now ready to setup the custom map we created in Mapbox in Social Pinpoint.

First, add a new Web Map or Social Map to a page in Social Pinpoint. Next open the tool's settings and navigate to the 'Map' tab in the settings. In the 'Basemap' settings, select the 'Mapbox' option. This will present some additional additional fields where we can copy in the username, Style ID, and access token information we obtained in Steps 1 and 3.

When copying the Style ID, Social Pinpoint requires us to only enter the unique string at the end of the URL. For example, when we copy this information from Mapbox it will look like this:

mapbox://styles/harvest/ck7mtdu150cwi1imosi8mb883.

However, we only need to add 'ck7mtdu150cwi1imosi8mb883' into Social Pinpoint- otherwise it won't work.

Once you enter this information, save the map by clicking the 'save' button at the bottom right of the block settings window. You will also need to save or publish the page in order to interact with the map.

When setting up your map, don't forget to set an appropriate zoom level for when the map loads to ensure the 3D buildings can be viewed. You can also adjust the 'pitch' and 'bearing' values to maximise the impact of the 3D environment when the map loads - otherwise users may not see this feature.

And that's all you need to do to get 3D buildings into your Social Pinpoint maps. After the initial setup, you can reuse these settings across other maps in Social Pinpoint - just be mindful to not exceed any usage limits you have if using a free plan.

Taking it to the next level

This tutorial demonstrates the power of using 3D data in mapping tools for you engagement. In the future, we will look to natively support 3D spatial files directly into Social Pinpoint, to simplify the process. It also showcases the potential of third party, speciality mapping software like Mapbox to give you even greater ability to customise your maps to create truly creative and engaging map-based content.

The 3D building information used in Mapbox comes from the Open Street Maps (OSM) project, a collaborative, open-source project that seeks to gather and create geo-data from around the world. Anyone can contribute or edit data in OSM (like an online Wiki), so if you find inaccuracies or gaps you can contribute this information directly to the project yourself.

If you need information that is more accurate than what is provided out of the box and you have this information available (e.g. spatial files of building footprints), you can import it directly into Mapbox to create your own custom 3D building layer.

Maybe you could even use these features to visualise future planning applications in your municipality!