5/17/2021
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.
   Select the + to Add Components.
   Select Satellite Imagery.
   Set "Fade in on zoom" slider to On.
   Set the Satellite Type to desired style (I used Saturated in this example).

That's it! 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.




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.

Alternatively, you can add the layer in Mapbox, rather than the Component.

   Open Mapbox Studio.
   Select New Style.
   Select Monochrome to start with a monochrome style.
   Select "Customize Monochrome".
   Select the Layers tab on the left-hand menu.
   Select the + to Add Layers.
   Select Source "None Selected" box.
   Select Mapbox Satellite in the Unused sources.
   Select the Mapbox Satellite source to add it to your layers.
   This Layer will be added at the top, so move it down in the list of Layers (drag and drop) if you want it to be underneath other map layers, for example, underneath the streets and street names.

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.

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.



If you have any questions feel free to email me at Jeff@DataPlusScience.com

Jeffrey A. Shaffer
Follow on Twitter @HighVizAbility