Start ordering with Uber Eats

Order now
Engineering, Web

Editing Massive Geospatial Data Sets with

June 23, 2020 / Global

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, 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 upon Uber’s broader visualization ecosystem, including the open source tools and, which are used for performant visualization of static data sets. adds sophisticated interactivity, unlocking an infinitely customizable set of geospatial data editing capabilities.

Figure 1. 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., built on, heavily utilizes WebGL and the GPU to deliver fast visualizing and editing, even with many thousands of coordinates.

We designed 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. 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, 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 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.’s“Extrude” edit mode lets users trace building footprints.


Advanced rendering is a member of the ecosystem and integrates seamlessly with other frameworks such as and

As a result, seamlessly integrates with all geospatial 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, uses 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’s EditableGeoJsonLayer. API 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, geometry editing is accomplished through editing modes. These modes instruct how it should handle user interactions in order to manipulate GeoJSON features and geometries. provides several modes for creating and manipulating points, lines, and polygons. 

If the functionality that 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 itself. Editing modes can also compose other modes (e.g. “TransformMode” composes “ScaleMode”, `TranslateMode”, and “RotateMode”).


EditableGeoJsonLayer is a layer that can be passed to the same way as other layers, and can even be used in conjunction with other 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.


As powerful as 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 take advantage of the 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 For users who need geospatial drawing on a map but not’s massive data rendering technologies, this is a great option. Check this interactive example to learn more about it.

Next steps 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 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 is built on, 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 team to enable features like order independent transparency, to ensure we can provide optimal visuals.

Editing beyond GeoJSON includes powerful features for geospatial editing with Web Mercator projection. But we’re looking for use cases beyond this. For instance, could allow labelers, people who manually identify objects in images, to draw outlines around features on images in machine learning labeling workflows. Another use case we’re exploring is taking measurements while visualizing autonomous driving data using other projections.
We look forward to seeing how others in the open source community leverage for their own geometry editing projects. We encourage you to try for yourself by checking out our GitHub repository!  


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