Mapbox GL Drawing Suite

Product Overview

Mapbox GL Drawing Suite is the geographic drawing and visualization stack for Odoo. It bundles the complete Mapbox GL JS foundation — configuration, bundled libraries, and on-map controls — with a reusable map view framework, a GeoJSON geometry display view, and an interactive drawing widget for form fields.

The result: Odoo forms gain a full drawing canvas where users can capture territories, zones, boundaries, and routes directly. Those geometries display in a dedicated map view with automatic area, perimeter, and length measurements — no external GIS tools, no manual calculation, no custom development overhead.

This page describes all four modules in the suite and what each one contributes to the complete drawing experience.

The Problem It Solves

Odoo has no built-in way to draw, store, or visualize geographic shapes. Service territories, delivery zones, property boundaries, coverage areas, and field survey polygons all end up as freehand text in description fields — or managed in a separate GIS tool that has nothing to do with your Odoo records.

When you want to capture a territory boundary against a customer record, or display all your service zones on a single interactive map, there is no standard Odoo mechanism. Each team either builds expensive custom modules or accepts the limitation and works around it.

Mapbox GL Drawing Suite fills that gap. It adds a professional drawing toolset directly inside Odoo forms so operators can sketch territories, zones, and routes without leaving the record. It stores everything as standard GeoJSON — readable by any GIS tool — and provides a map view that renders all stored geometries at once with color coding, hover highlights, and automatic measurements. The entire stack is declarative: add a JSON field, apply a widget or view type, and the drawing and display capabilities are ready.

The Four Modules

The suite is organized in two layers: two infrastructure modules that provide the Mapbox GL foundation and the map view framework, and two application modules that deliver the geometry display view and the drawing form widget.

How It Works

From initial setup to a fully mapped territory in four stages:

1. Go to Settings → General Settings → Mapbox GL JS, enter your access token, and choose your default map style, projection, lighting, theme, and label language. This configures every map in your Odoo instance at once.
2. Open any form that has the mapbox_gl_draw_geojson widget applied to a JSON field. The map loads at your configured default center. Use the drawing toolbar to select a tool — polygon, line, circle, rectangle, or cut — and draw directly on the map.
3. Watch live measurements update as you draw: total area follows the cursor in m²/ha/km², and each edge of the in-progress shape shows its length at the midpoint. Use Undo (Ctrl+Z) and Redo (Ctrl+Y) freely to refine. When you are satisfied, click the Save button in the widget toolbar to commit the geometry to the record.
4. Navigate to the Map view for your model. All records with saved geometry appear as color-coded shapes on the interactive Mapbox map. Hover any shape to see its measurements in a popup; click to select it and open the full measurement panel in the sidebar. Use search, filters, and group-by to focus on specific subsets; box-select with Shift-drag for bulk operations.

The form widget and the map view are independent — you can use either or both. The drawing widget captures and stores GeoJSON; the map view reads it and displays it. Both work with any Odoo model that has a JSON field for geometry data, making the suite fully reusable across custom modules.

Key Features

Foundation & Configuration

• Centralized Token & Settings — One Mapbox access token configured in Settings applies to every map across the entire Odoo instance automatically.
• 10 Preset Map Styles — Standard, Standard Satellite, Streets, Outdoors, Light, Dark, Satellite Streets (Hybrid), Navigation Day, Navigation Night, and OpenStreetMap — or supply a custom Mapbox Studio URL.
• 8 Map Projections — Globe (3D), Mercator, Equal Earth, Natural Earth, Albers USA, Winkel Tripel, Lambert Conformal Conic, and Equirectangular.
• Lighting & Theme — Four lighting presets (Dawn, Day, Dusk, Night) and three themes (Default, Faded, Monochrome) for Standard styles.
• 35+ Language Support — Display map labels in any of 35+ languages; configurable per-instance in Settings.
• On-Map Style Switcher — Users can switch style, lighting, theme, projection, and language directly on the map without touching Settings.
• Standard Map Controls — Zoom, compass, fullscreen, scale bar, 2D/3D toggle, fly-to-zoom, and location search on every map automatically.
• Offline Detection & Auto-Retry — Shows a clear offline warning and automatically retries when connectivity is restored — no page refresh needed.
• Bundled Libraries — Mapbox GL JS, Mapbox GL Draw, Mapbox Search Box SDK, and Turf.js served as local static files — no external CDN dependency.

Map View Framework

• New mapbox_gl View Type — Declare map views in XML alongside form, list, and kanban; full integration with Odoo's view system.
• Record Sidebar with Sync — A scrollable record list next to the map; clicking either the sidebar or a map feature keeps both in sync.
• Box-Zoom Selection — Hold Shift and drag a rectangle to select up to 1,000 map features at once; Shift-click toggles individual records.
• Search, Filter & Group By — Full compatibility with Odoo's search bar, favorites, and group-by (one active group at a time).
• Action Menu Integration — Export, delete, and archive records from the map view via the standard Odoo action menu.
• Center Map Button — Re-fits the map to all visible features with one click after manual panning or zooming.
• Pager & Large Dataset Support — Works with Odoo's standard pagination for models with thousands of records.

GeoJSON Geometry Display

• All GeoJSON Geometry Types — Point, LineString, Polygon, MultiPoint, MultiLineString, MultiPolygon, and GeometryCollection all render correctly.
• Automatic Measurements — Area (m²/ha/km²), perimeter, line length (cm/m/km), and vertex count calculated geodesically using Turf.js.
• Unit-Adaptive Formatting — Smart unit selection based on feature size: small areas in m², large territories in km²; short lines in cm, long routes in km.
• Color-Coded Features — Assign a color per record; stroke borders are automatically darkened for visual contrast.
• Multi-layer Rendering — Separate Mapbox layers for fills, strokes, hover states, and selected states — professional visual hierarchy out of the box.
• SearchableJson Field — PostgreSQL JSONB operators (json_eq, json_contains, etc.) for efficient database queries on geometry content.
• Example Module Included — contacts_area_mapbox_gl ships as a working reference implementation with a GeoJSON upload wizard.

Drawing Form Widget

• 7 Drawing Tools — Point, Line, Polygon, Circle (center → radius), Rectangle (two corners), Polygon Cut, and shape Edit.
• Undo / Redo — 20-step history via toolbar buttons or Ctrl+Z / Ctrl+Y; buttons disable automatically at the history boundary.
• Live Measurements While Drawing — Floating area or length overlay follows the cursor; per-segment labels appear at edge midpoints in real time.
• Measurements Toggle — Show or hide area and perimeter labels on all completed shapes with a single toolbar button.
• Automatic Area Calculation — Configures a target field (field_area) where polygon area in m² is written automatically on Save.
• Explicit Save Button — Changes are committed only when the floppy-disk toolbar button is clicked — no accidental overwrites mid-edit.
• GeoJSON Import & Export — Upload shapes from a .geojson file or download all drawn features as a timestamped .geojson file.
• Readonly Display Mode — When the form is in readonly state, drawing tools hide and geometries render as static map layers — clear visual distinction between viewing and editing.
• Location Search in Widget — Integrated geocoding search to navigate to any address or point of interest without leaving the drawing canvas.
• Custom Default Center — Configure default_center per widget to start users at a relevant location rather than a world view.

Use Cases & Benefits

What's in the Bundle

Mapbox GL Drawing Suite is a 4-module package organized in two layers. The two infrastructure modules provide the Mapbox GL foundation and the map view framework that all other suite products also build upon. The two application modules deliver the geometry display view and the drawing widget.

These four modules are also the foundation that the Route Planner Suite, Delivery Route Planner, and Contacts Route Planner build upon. If you need route planning or delivery dispatch alongside drawing, those products include these modules in their own bundles.