This framework is a web mapping platform designed to let teams add interactive maps to public-facing services in a consistent, extensible, and framework-agnostic way.
At its core, it provides:
- A stable map UI with consistent behaviour
- A plugin system for extending functionality
- An abstraction layer over multiple mapping engines
The system is designed so that the core controls rendering and layout, while plugins declaratively contribute behaviour and UI.
The framework consists of five main parts:
- Public API (Vanilla JS wrapper)
- Core React component
- Map provider abstraction
- Plugin system
- Rendering and slot system
The framework is consumed via a vanilla JavaScript API, making it easy to integrate into a wide range of environments (including legacy stacks and non-React applications).
This wrapper:
- Instantiates the core component
- Passes configuration, plugins, and providers
- Exposes events and methods to the host application
Note: Internally, the UI is implemented in React, but this is an implementation detail and not required knowledge for consumers.
The core component is the orchestrator of the application. It:
- Owns application state
- Controls rendering and layout
- Provides consistent map interactions (search, identify, draw, pan, etc.)
- Manages plugins, providers, and UI composition
Stability Guarantee: Plugins never control the render lifecycle. The core always mounts and renders independently of plugin success or failure.
The framework is not tied to a specific mapping library. It uses a mapProvider interface defining semantic operations such as:
- Fitting the map to bounds
- Setting the view zoom and centre
- Querying features
This allows providers to be swapped without rewriting plugins or UI code.
Our reference provider, offering the most complete and tested experience:
| Out of the box | Works immediately with no additional |
| Modern and lightweight | Better performance with smaller bundle sizes |
| Vector tile support | Most comprehensive support for vector tiles |
| Enhanced accessibility | The most accessbile offering |
An alternative provider with specific advantages:
| British National Grid | Native support for BNG coordinate systems |
Plugins describe what they add using a manifest (buttons, panels, shortcuts). They are contributors, not "render owners."
- Registration: Reads manifests and populates central registries at load time.
- Rendering: Controlled entirely by the core, which decides where and how items appear based on current state.
Each plugin receives a ring-fenced slice of state. They have read access to appState, mapState, appConfig, and services (eventBus, geocoding, etc.).
The UI uses a slot-based system. Slots represent logical areas (e.g., actions, side panels, modals).
Plugins declare UI elements with layout hints (which slot to use, modal vs non-modal, mobile vs desktop behavior). The core evaluates these rules to guarantee:
- Consistent layout and accessibility
- Centralized responsive design
- UI stability (plugins cannot "block" the interface)
Provides two-way, decoupled communication between the core, plugins, and the vanilla JS layer. This allows external applications to react to internal state changes without tight coupling.
| Core | The Platform |
| Plugins | Declarative Feature Descriptions |
| Providers | Adapters for Map Engines |
| Slots | Layout Positions |
| State | Shared Context |
| React | UI component framework |
| MapLibre | Primary mapping engine |
| Webpack | Module bundling (UMD, ESM builds) |
| Jest | Testing framework |
| SCSS | Styling |
| Babel | JavaScript compilation |