Editing Massive Geospatial Data Sets with nebula.gl

Geospatial data, or data tied to a specific, real-world location, is integral to Uber’s ability to better understand the cities we serve. From predicting the most accurate estimated times of arrival (ETAs) to determining the best driving routes , geospatial data empowers us to deliver improved experiences for users across the globe.

But map data is large and complex, and because the world is always changing, we need to update map data frequently. To this end, Uber built and open sourced nebula.gl , a tool set designed for full-featured, accessible, and performant geometry editing in a web browser, even when working with massive data sets.

We built nebula.gl upon Uber’s broader visualization ecosystem, including the open source tools deck.gl and vis.gl , which are used for performant visualization of static data sets. nebula.gl adds sophisticated interactivity, unlocking an infinitely customizable set of geospatial data editing capabilities.

Figure 1. nebula.gl lets users draw a variety of geometry types.

High-performance editing of large data sets

When working with large geospatial data sets, libraries can become quite slow if they rely too much on the CPU or the browser Document Object Model (DOM). Many other browser-based solutions will freeze or crash when attempting to load data sets with many thousands of coordinates. nebula.gl, built on deck.gl, heavily utilizes WebGL and the GPU to deliver fast visualizing and editing, even with many thousands of coordinates.

We designed nebula.gl from the ground up to provide optimized rendering and editing performance, without the need for complex application logic, such as splitting data into subgroups or custom data diffing. nebula.gl handles all events, such as click, drag, and pointer move events, and includes touch screen support, so that applications can focus on their application logic.

Figure 2. In this demonstration of nebula.gl, we use the tool to edit a complex polygon with 14,000 points, enough points to cause other browser-based tools to freeze.

Advanced geospatial editing

nebula.gl provides the basic geometry drawing and editing tools for points, lines, circles, rectangles, and polygons, but goes a step further than most solutions by providing over 30 modes for drawing, editing, and measuring geometries.

Examples include:

• • Drawing new points, lines, or polygons
  • Moving individual vertices
  • Translating, Scaling, and Rotating multiple shapes
  • Unioning, intersecting, and subtracting shapes
  • Measuring distance and angles

There are even more powerful modes such as one we built at Uber for tracing building footprints.

Figure 3. nebula.gl’s“Extrude” edit mode lets users trace building footprints.

Advanced rendering

nebula.gl is a member of the vis.gl ecosystem and integrates seamlessly with other vis.gl frameworks such as deck.gl and loaders.gl .

As a result, nebula.gl seamlessly integrates with all geospatial deck.gl layers, allowing for GeoJSON editing to be interleaved with rich 3D visualizations. Due to this integration, users control how geometries are rendered, allowing for customizing the color, size, dashed lines, icons, as well as the cursor based on the state of the edits.

Figure 4. In the above demo, kepler.gl uses nebula.gl-powered react-map-gl-draw to filter data based on a polygon drawn by the user (see this for more context).

Full GeoJSON support

A core offering of nebula is its full-featured GeoJSON editing capability, which handles the following geometry types of the GeoJSON specification: Point , MultiPoint , LineString , MultiLineString , Polygon , and MultiPolygon as well as working with geometries with an altitude component.

Figure 5. A GeoJSON file with various geometry types is edited via nebula.gl’s EditableGeoJsonLayer.

nebula.gl API

nebula.gl is a browser-based geometry editing library, written in TypeScript. It is designed to provide powerful and flexible capabilities for developers, and provides first-class support for React, but is not dependent on it.

Editing modes

With nebula.gl, geometry editing is accomplished through editing modes. These modes instruct nebula.gl how it should handle user interactions in order to manipulate GeoJSON features and geometries. nebula.gl provides several modes for creating and manipulating points, lines, and polygons. 

If the functionality that nebula.gl provides out-of-the box doesn’t quite meet a use case, developers can extend or create their own editing mode with custom event handling logic without needing to make changes to nebula.gl itself. Editing modes can also compose other modes (e.g. “TransformMode” composes “ScaleMode”, `TranslateMode”, and “RotateMode”).

EditableGeoJsonLayer

EditableGeoJsonLayer is a deck.gl layer that can be passed to deck.gl the same way as other deck.gl layers, and can even be used in conjunction with other deck.gl layers. It exposes a reactive-style interface where data updates are provided through an onEdit callback, but the actual state of the geometries is owned and controlled by the application.

react-map-gl-draw

As powerful as deck.gl is, it is a big dependency for an application that just needs to draw simple 2D shapes on a map. To let applications that do not need deck.gl take advantage of the nebula.gl editing capabilities, the react-map-gl-draw module provides a simple React/SVG component. It is dependent on react-map-gl (a react wrapper for Mapbox JS ) but is not dependent on deck.gl. For users who need geospatial drawing on a map but not deck.gl’s massive data rendering technologies, this is a great option. Check this interactive example to learn more about it.

Next steps

nebula.gl is used in production by several teams at Uber, including our Geofences , Map Storage, and Map Editing teams. But we’d like it to become the reference implementation of web-based geospatial editing. How far we move towards that vision will depend partly on whether we get additional adopters. Some of our current development projects include:

React components

A new editor module was recently built as an easier way to get started with nebula.gl by providing React components. This module currently provides import and export components for importing and exporting between various geospatial data formats (e.g. GeoJSON, WKT, and KML). But we’d like to build additional components, such as a toolbar for switching between modes or navigating to a position, among other uses.

3D editing

nebula.gl is built on deck.gl, which supports 3D, so it is natural to extend editing capabilities into the third dimension.

Apart from defining new edit modes/interaction models and enriching the GeoJSON data with height-related properties, this involves a deep collaboration with the deck.gl team to enable features like order independent transparency, to ensure we can provide optimal visuals.

Editing beyond GeoJSON

Acknowledgements

The nebula.gl team would like to thank Ib Green for his help with this project and editing this article. Without his guidance and support, this project would not have been possible.