Terra Draw: Drawing on all the web maps!

Day 1 | 12:50 | 00:25 | AW1.120 | James Milner


Note: I'm reworking this at the moment, some things won't work.

The stream isn't available yet! Check back at 12:50.

Dealing with web mapping can be complicated, and when tasked with the requirement of drawing on one, things can quickly become a challenging, especially when dealing with complex requirements. Enter Terra Draw: an open source JavaScript library designed to simplify and standardise drawing functionality across popular web mapping libraries such as Leaflet, OpenLayers, Google Maps, MapboxGL JS, and MapLibreGL JS.

Terra Draw offers a versatile set of built-in drawing modes, enabling seamless creation of geometries. The library supports simpler geometry types like points lines and polygons, but also more complex modes like rectangles, circles and sectors. There is also advanced functionalities like snapping, rotation, and scaling, which often require significant effort to implement from scratch. These functionalities are designed to "just work" across the different mapping ecosystems.

The library’s modular design promotes extensibility, allowing developers to create custom drawing modes and adapters for new mapping libraries that may come along. Thanks to its decoupled architecture, any mode can work with any adapter, creating a multiplier effect. This flexibility also ensures that swapping out one mapping library should be much simpler, as the drawing logic is abstracted away from the mapping library.

In this talk, we’ll explore the origins of Terra Draw, demonstrate how to get started, and provide a glimpse of what's possible with it. Whether you're a seasoned developer or just starting with web maps, you'll walk away with practical insights on how Terra Draw can be used in your project.