Make Beautiful Spatial Visualizations with Plotly and Mapbox
By: Will Norris
Tags: Maps, Geospatial, Python, Plotly, Data Visualization

This plot is much busier than the two without country borders at this scale. And we still lack details that the tile map offers like country names and cities. These kinds of features can be configured on the outline map, but they aren’t very practical for an outline map that can quickly become cluttered.

Despite these downsides, outline maps do still have a place. When creating maps of smaller regions we often don’t need to render data at multiple scales, which means there is no reason to add the data and processing overhead of a tile based map. Also, when making maps for presentations it can be advantageous to customize an outline based map to maximize quick readability from a distance. Not to mention that conference rooms don’t always have the best wifi, and I have seen my fair share of web maps load extremely slowly to the dismay of the person speaking.

Mapbox and Plotly Tile Map Basics

Mapbox GL JS is a JavaScript library made for web mapping with interactive tile maps. Plotly refers to the Mapbox JavaScript library when we invoke one of the Plotly Mapbox functions in Python. Since some versions of the Mapbox GL JS library are open source, using these functions with an open source base map does not require a Mapbox API key. However, Mapbox as a company has extremely high quality vector tile base maps available that will require a Mapbox API key to use. Mapbox has a great free tier that allows up to 50,000 map loads per month, which is plenty for most users.

Raster Tiles versus Vector Tiles

Most web maps have traditionally used raster tiles to construct a map, but Mapbox allows us to take advantage of vector tiles as well. If you are familiar with GIS data, a raster is a grid of values (images) and vector data is geometry data — normally points, lines, and polygons.

Raster tiles are a set of images that line up next to each other to form a complete map. As you zoom in, different levels of raster tiles can be loaded to show new features at different scales. Vector tiles work very similarly to this, however the tiles contain pre-generated vector data that suit the zoom and location you are viewing.

There are a lot of upsides to vector tiles. They don’t have to be exactly the same size like raster tiles and they are rendered by the client’s computer, which can make them much lighter weight to host. Vector data also is generally much smaller than raster data making using the map snappier since you are relying less on a fast internet connection. Vector data can even render rasters if needed making it incredibly flexible.

Tile Base Maps

With Plotly we have access to both raster and vector tile base maps. The raster tile base maps we have access to are open source, like Open Street Map’s base maps. Mapbox provides access to vector tile base maps, but they require a Mapbox API token to access. Below I will go through some of the available base maps and show you the practical differences.

Raster Tile Base Maps from Public Servers

All of the raster tile base maps that we have access to are open source and don’t require an API token to make use of. Here are a few examples of what is available:

Open Street Map

Even though we are using a base map from Open Street Map, we still invoke the “Scattermapbox()” function. This is because Plotly makes use of the open source Mapbox JavaScript library to plot tiled maps regardless of whether they are raster or vector tiles.