Introducing Terra Draw

James Milner has released a new JavaScript library designed to add drawing tools to various online map developer platforms. While most popular mapping platforms offer built-in drawing tools or have add-on drawing libraries, Terra Draw is specifically created to work cross-platform, seamlessly integrating with many popular mapping libraries.

Terra Draw is a powerful JavaScript library that provides a suite of geographical feature drawing tools for maps. It is designed to work "out of the box" with leading mapping libraries like Mapbox, MapLibre, Google Maps, OpenLayers, and Leaflet.

Why Choose Terra Draw?

Integrating drawing tools into interactive maps can be tedious, especially when working with different mapping libraries. Terra Draw addresses this by offering:

• Cross-Library Compatibility: With built-in adapters, developers can integrate Terra Draw into their preferred mapping platform without rethinking the core logic.
• State Management with the Store: The Store is the heart of Terra Draw, efficiently managing all the features and providing easy access to their geometries.
• Customizability: Developers can extend the library with custom modes, adapting it to specific use cases.

What Drawing Modes are Available?

Modes define the different drawing behaviors or tools that can be added to your map. Terra Draw includes several predefined modes, such as:

• Rectangle Mode: Draw rectangles.
• Polygon Mode: Draw polygons.
• Freehand Mode: Enable freeform drawing.
• Select Mode: Manipulate existing features.

The Drawing Data 'Store'

The Store in Terra Draw manages the state of all features added to the map by the user when drawing with one of the modes. It is created when Terra Draw is initialized and stores features in GeoJSON format. Features can be added using drawing modes (e.g., TerraDrawRectangleMode) or via the addFeatures method. The Store also supports adding, removing, and restoring features, offering robust data management for interactive map drawing.

Installing Terra Draw

You can install Terra Draw via npm or directly integrate it using a script tag. Adapters act as connectors between Terra Draw and your chosen mapping library, handling map-specific logic for rendering features.