5/17/2021 (updated 3/19/2022)
How to Create a Custom Mapbox Map with Zoom in to Satellite View for Tableau
One popular requests when creating maps in Tableau is the ability to be able to swap between a regular map view and a satellite view. Tableau offers six different map layers; Light, Normal, Dark, Street, Outdoors and Satellite. With these newer map layers, it's possible to have a Satellite view as a default map in Tableau, but there is no functionality at the moment to swap these map layers. In this blog post I will outline how we can create a custom Mapbox map that will allow you to have the best of both worlds; a customized Mapbox map in any style, and a Satellite view, all in the same map.
Last year I worked on a project for Splash as part of a Tableau Foundation Project (with Chris DeMartini and Simon Beaumont). Splash is a non-profit organization that helps provide clean water for children around the world. For this project, Splash wanted a stylized map when looking at the region view of the map, but also wanted to be able to zoom in on the map and see a satellite view. I ended up building this functionality with a collapsible container. This worked well, but since the maps are independent maps in Tableau (one Mapbox and the other a Satellite view from Tableau), the zoom levels were not coordinated. While it works, it seemed a bit clunky to me. So instead, I decided to create both maps as a single map view in one using Mapbox.
The first step is to create the stylized map that you want in Mapbox Studio. I won't go into the details on how to create your own Mapbox map. There are loads of tutorials and blog posts on how to do that. Instead, I will use a default monochrome style map provided by Mapbox.
Open Mapbox Studio. (sign up for your free Mapbox account at Mapbox.com)
Select New Style.
Select Monochrome to start with a monochrome style.
Select "Customize Monochrome". This will open the Mapbox Studio interface.
At this point, there are two basic ways to add the Satellite view to your map, using Components or Layers. We'll start with Components.
Adding Mapbox Satelitte to Components:
Select the + to Add Components.
Select Satellite imagery.
The Satellite imagery Component should now be added.
Switch the slider to Fade in on zoom.
Well that was easy! You now have a custom Mapbox map with Satellite imagery. When you zoom in on the map down to a specific zoom level, the Satellite view will gradually fade in on the map. As with any Mapbox map, you can customize the map as you wish, layer by layer.
You can adjust the zoom levels and other options under Layers, but first, you must "Eject the Component" to move it to Layers. Once it's a Layer you can move it around and control the Layer options.
Select Layers (next to Component).
Scroll down and find "Satellite imagery, land".
Select "Satellite imagery, land" and the Layer Option will show.
Select Override to make changes.
Here are a few examples of some changes you can make.
Switch the "Rate of Change" to Step to have an immediate change from the monochrome map to the Satellite map.
"Add another step" to add and control more steps in between the two steps.
Edit the Zoom level to adjust when the changes will occur when the user is zooming.
Adjust the Opacity and Saturation to adjust the blend between the two maps.
Adding a Mapbox Satelitte Layer:
Alternatively, you can add the layer in Mapbox, rather than the Component. Starting again with a basic Monochrome map, let's add the satellite view using Layers.
Select Layers tab (next to Component) on the left menu.
Select the + to Add Layers.
Scroll down and find "Mapbox Satellite" folder.
Select "Mapbox Satellite" and the new layer will be added.
The layer will be added at the top of the list of layers and therefore the top layer on the map, so we need to move it down.
Using the 6 dots on the right-hand side of the layer, drag it down the list. For this example, we will place the layer behind the other layers, but on top of land and water. To do this, drag it down until it is right above Land, water, & sky built
The Zoom and Fade levels will not be set automatically in this case, so you will need to add them and edit them as desired.
Select the Layers tab again (next to Component) on the left menu.
Select Style across zoom range.
Select + Add Another Step to add another zoom layer.
Select the first Zoom at the top of the list (Zoom 0) and drag the Raster Opacity slider to 0. This should move the first part of the zoom range to zero.
Select the second Zoom in the list (for example Zoom 13.77) and drag the Raster Opacity slider to 0. This should move the middle part of the zoom range to zero.
Note - you can change the Zoom value to control when the satellite view will start to fade in. You can also adjust the rate of change, saturation and brightness. You might also want to click on the Buildings layer and hide it, or you could get fancy and have it zoom to buildings first and then later to satellite (again, by adjusting the layer zoom range).
You have now added a Satellite imagery to whatever Mapbox map you have. When you zoom in on the map down to the specified zoom level, the Satellite view will gradually fade in on the map.
Once your map is complete, it's just a few simple steps to bring this into Tableau as your map.
Select "Share..." in the upper right-hand corner.
Select "Third Party" and select Tableau in the dropdown menu.
Select the Copy button to copy the Integration URL into your clipboard.
From your map in Tableau, select Map from the top menu then -> Background Maps -> Add Mapbox Map...
Enter the style name for your new map style.
Paste the Integration URL as the URL and select OK.
Below is a Tableau Public Visualization created by Dinushki De Livera using this map zoom method.