Overview

Home
Full examples
Components
Documentation

Home
Maps

Search nx-ui

Jump to any foundation, component, block or example.

Maps

Mapbox-powered map blocks for Nexus apps — a theme-aware map frame, branded markers and popups, clustered site maps, movement routes and site-boundary parcels. Every block is built on react-map-gl and follows the light/dark basemap flip.

A site-boundary map rendering polygon parcels with a brand fill, outline and hover state.

Cinematic camera control on map-view — fly, ease and jump between sites, plus a chained, pausable site tour. Reduced-motion aware.

The globe projection with atmosphere and stars — a pausable idle spin that pops the Nexus site pins as the UK rotates into view.

Travel-time overlays with a settings popover, legend bar and point-in-polygon site filtering, fed by the mock nx-geo isochrone API.

A branded pin marker with a selected state and a rounded popup card for map annotations.

Map stat overlay

A floating glass stat and legend panel that sits over a map.

The glass-pill map control toolbar: a prop-driven standard arrangement (zoom, locate, Map/Satellite switcher, tool toggles, reset view) or fully composable groups, buttons and toggles.

A theme-aware Mapbox map wrapper with UUI-styled zoom and basemap-style controls.

A movement route map with origin and destination markers and a brand line with a dashed progress overlay.

Click-to-add waypoint routing with numbered draggable pins, the accent-yellow route line and a live info bar, fed by the mock nx-geo routing API.

A clustered site map: point markers that group into brand-coloured cluster bubbles you can click to expand.

Tilted-pitch 3D — Mapbox DEM terrain with atmospheric fog over Eryri, and composite fill-extrusion buildings over London's Docklands.

A movement route in tilted perspective — the route line and animated vehicle on a pitched camera, with a slow orbital rotation option.

Transfer preview

The marketplace transfer-proposal flow: 70° cinematic camera choreography over a route, pulsing endpoint pins, and a bottom dock with source/destination cards, animated truck stats, a volume slider and a save-proposal callback.