Plotly
Published in

Plotly

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

See how Dash supports real-time analytics during our webinar on July 27! 👀

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 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.

Image by Plotly

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.

Image by Plotly

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.

Image by Plotly

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:

Image by Plotly

Helpful links:

Dash Deck

Dash Deck is a 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.

Image by Plotly

Helpful links:

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.

Image by Plotly

Helpful links:

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.

Mapping data is frequently a starting point for real-time analytics. To learn more about how to deliver powerful, responsive models for operations, tune into our upcoming webinar! 📌

For questions, email info@plotly.com.

--

--

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store
plotly

plotly

The leading front-end for ML & data science models in Python.