5 Awesome Tools to Power Your Geospatial Dash App
A comprehensive guide to your first geospatial Dash app
By Hannah Ker, Elliot Gunn, and Rob Calvin
📌 Watch the recorded webinar to learn how to unlock the power of geospatial data with Dash.
Introduction
So you want to see voting behavior by county in a recent election? Or maybe you want to show how transportation patterns have changed in a city over time? What if you want to build a user interface around your satellite image classification model? The world of geospatial data is big and exciting, but it can be challenging to navigate the many options for displaying and allowing users on the web to interact with that data.
Plotly’s Dash framework has many options to help you out. We want to give you a starting point for navigating the ecosystem of tools at your disposal when building a Dash app around your geospatial data. Whether you’re simply putting some points on a map or you’re looking for a front end for spatial regression model; whether you’ve got shapefiles, geoJSONs, netCDFs, or geoTIFFS; Dash has options for you.
Dash can also be an ideal choice for your geospatial app given the growth of Python as a one-stop-shop for all of your geospatial data processing needs. Libraries such as GeoPandas, rasterio, and GDAL allow you to build complex analytical workflows for your geospatial data entirely in Python. With Dash, you never have to leave the world of Python.
This blog post will cover our most popular mapping tools that can support a wide range of data types, data volume, and user interactions.
- Geo maps: Plotly’s outline-based mapping from Plotly Express or Plotly Graph Objects
- Mapbox maps: Tile-based basemaps from Mapbox
- Dash Leaflet: A Dash component built around the popular lightweight Javascript library
- Dash Deck: A proof-of-concept Dash component built on top of deck.gl, known for supporting 3D visualization and large datasets.
- Datashader: While not necessarily just for geospatial data, Datashader can help you display your big data on a map.
We also created a handy table here that summarizes at a high level what the different libraries are, the use cases we recommend them for, input and output data formats, how flexible styling is, any user interactions, supported data sizes (and which ones are optimized for large datasets), and whether they need a paid license.
Geo maps
Plotly’s geo maps figures are your starting point for visualizing point or polygon-based geospatial data with the Plotly Express or Plotly Graphing Objects libraries over a simple background (eg. px.scatter_geo(), px.line_geo()). As is detailed in Plotly’s docs, these graphing functions provide access to built-in basemap data such as administrative boundaries, coastlines, rivers, and lakes. This data is provided by Natural Earth, which is a free source of many baseline geospatial datasets. Custom geoJSON data or Geopandas dataframes can be plotted and styled on top of these basemaps, or entirely on its own. The px.choropleth function also offers one of the simplest ways to create and customize choropleth maps. The example below shows a workflow where you can download and open shapefile data with geopandas, perform preprocessing with shapely and numpy, then display the data on a simple, styled basemap. The figure generated by this code snippet could then be displayed in a Dash app and connected to various controls for additional user flexibility.
Helpful links:
Mapbox maps
Plotly’s graphing libraries also provide support for creating interactive web maps with Mapbox base layers. These tiled baselayers can provide additional geographic context for your data and give the standard ‘slippy map’ experience that many users expect from web maps. The data from these basemaps (such as road networks, building footprints, points of interest) is visible to your user but not accessible for processing or analysis within your app. Most of this underlying data comes from OpenStreetMap, a free source of global geospatial data. A variety of basemap styles are available, even including satellite imagery! You can also customize your basemap style by hand using Mapbox’s style specification. It’s important to note that some uses of Mapbox baselayers require an API token from Mapbox, which limits free usage. See Plotly’s docs for more information.
In this oil and gas production Dash open-source app, the Mapbox access token is set and read into a dictionary that includes default configuration for the base map layout. As the chosen style is “light”, it requires a Mapbox Access Token. Our documentation includes more information about using Mapbox with Plotly Express to create a basemap.
To create the main graphing figure above, we use the graph object scattermapbox together with attributes such as lon, lat, text, customdata (extra data, useful for hovering), name, marker size and opacity. Each trace is rendered above the base map.
Helpful links:
Dash Leaflet
Dash Leaflet makes the popular open-source Javascript library, Leaflet, accessible to Dash developers in Python. This package is developed and maintained by Emil Eriksen. Dash Leaflet offers support for many common web mapping features, including vector layers (e.g. circles, lines, and polygons), raster layers (e.g. tile layers, image overlays and video overlays), and UI layers (e.g. makers, popups, and tooltips). In addition, a number of more complex components are bundled enabling features such as geolocation, gesture handling, animations, measurements, dynamic marker clustering, and free-hand drawing. Visualization of large datasets (millions of points) is possible via the highly customizable GeoJSON component.
For a simple example, we can put some markers on a map as you’ll see from the code below:
Helpful links:
- Dash Leaflet documentation
- Leaflet.js documentation
- Tutorial series on creating interactive map visualizations (West Health Institute)
- Workshop on map visualizations with Dash Leaflet (PyData Global 2021)
Dash Deck
Dash Deck is a proof-of-concept package for bringing impressive 2D and 3D geospatial visualizations into your Dash application. Built on top of deck.gl, Dash Deck uses deck.gl’s JSON API and pydeck to render large datasets. Dash Deck includes a deep catalog of eye catching layers and techniques for the visual representations of geospatial data. This open-source Dash app displays property values in Vancouver with a GeoJSON Layer. In a few lines of code, geojson is generated from the raw dataset, a polygon layer is created, and the multiple layers are combined to be passed into a Dash application.
Helpful links:
- Dash Deck documentation
- deck.gl
- WebGL public wiki
- pydeck
- Visualizing autonomous vehicle datasets with Dash Deck (Plotly)
Datashader
Datashader, an open-source Python package supported and maintained by Anaconda, makes it possible to plot and visualize large datasets of hundreds of thousands or millions of data points. It does so through a series of steps that transform raw data into rasterized (aggregated) representations. As Datashader solely handles the generation of images, it’s used with plotting libraries like Plotly or Holoviews to embed the rendered image into an interactive plot. Datashader can also be used to visualize geospatial data.
In this Dash app of 40 million cell towers, the Datashader raster is passed into a mapbox image layer for interactive visualization: users can zoom in and drill down to individual data points in seconds. In this code snippet to create the radio filter card, we first specify a Canvas object for a 700x400 pixel image covering the selected x and y ranges. Then we aggregate the data with a chosen glyph type, Canvas.points ((x,y pairs for coordinates), and use the count() argument as a reduction to map multiple points onto a pixel.
Helpful links:
- Datashader documentation
- Tutorial on visualising large raster datasets with Datashader and xarray (James Brennan)
- Dash World Cell Towers code (Plotly)
- Tutorial on mapping >1 million points (Adam Schroeder)
- How to use datashader to rasterize large datasets, and visualize the generated raster data (Plotly)
Conclusion
There’s no shortage of tools to pick from when building an analytical web app in Dash around your geospatial data. We’ve touched on 5 open-source components that will cover a wide range of use cases. These components will allow you to create simple outline-based maps (geo maps), render big datasets (Datashader and Dash Deck), integrate styled basemaps (Dash Mapbox, Dash Leaflet), and build in various forms of user interactivity (all of the above). As the Python ecosystem for handing geospatial data grows, Dash will also enable you to seamlessly integrate your Python analytical workflows with a flexible front-end UI.
For questions, email info@plotly.com.
