Home Frontend Guide Map View

Map View

Frontend Guide map leaflet nodes markers path trajectory links neighbors satellite dark auto refresh GPS position

The live Leaflet map — node markers, path trajectories, neighbor links, map styles, and auto-refresh.

The Map view renders all nodes with GPS coordinates on a Leaflet.js interactive map. Node positions, movement paths, and neighbor signal-strength links are all visualised in real time.

Map Controls

STYLE selector

C2 Dark — dark tile layer. Satellite — Esri satellite imagery. Standard — OpenStreetMap. Saved preference is applied immediately via window.c2ChangeMapStyle().

NODES toggle

Show/hide all node markers.

PATHS toggle

Show/hide the polyline trails showing each node's recent position history.

LINKS toggle

Show/hide neighbor RF links from GET /api/neighbors. Lines are coloured by SNR: green (strong) → amber → red (weak).

AUTO toggle

Enables auto-refresh on a timer. Calls window.c2FetchAndDrawMap() every N seconds.

↻ REFRESH

Manual refresh — fetches current node positions and redraws all layers.

⛶ FIT ALL

Calls window.c2FitMapBounds() to zoom the map so all nodes with coordinates are visible.

Node Markers

Each node with valid latitude/longitude gets a custom marker. The marker icon is colour-coded by signal quality and includes the node's short name. Clicking a marker opens a popup panel (appended to document.body by map.js) showing:

Long name + node ID
Last heard time
Battery level and voltage
SNR and RSSI
GPS coordinates
Reverse-geocoded location name (from the geocoding cache)
Quick-action buttons: Trace Route (opens traceroute to this node), Message (opens DM view)

Path Trajectories

For each node, the map draws a polyline of recent position history fetched from GET /api/nodes/{id}/history/positions. Each line segment is colour-coded with the node's assigned palette colour.

Neighbor Links

Straight lines drawn between neighbour pairs from the neighbors table. The line opacity and colour reflects the reported SNR between the pair. Only shown when the LINKS toggle is on (off by default to reduce visual clutter).

Loading Overlay

A full-map overlay with a spinning satellite icon and ACQUIRING TELEMETRY... appears while the initial data is loading. It disappears automatically once the first draw completes.

Data Sources

Node positions: window.meshState.nodes (live, from SSE) + /api/nodes
Position history/paths: /api/nodes/{id}/history/positions
Neighbor links: /api/neighbors
Reverse geocoding: /api/geocode

Node Popup Panel

The map module appends a slide-in detail panel to document.body (not inside the map div) to avoid Leaflet clipping. The panel shows:

Node long name, short name, and hex ID
Last heard time (live, updates on SSE node_update events)
Battery level with colour indicator
SNR and RSSI for most recent packet
GPS coordinates in decimal degrees
Reverse-geocoded location name (from the geocoding cache)
Hardware model and firmware version
Source badge (RF / MQTT / UNKNOWN)
Trace Route button — opens the Traceroute view with this node pre-selected
Message button — opens the Direct Messages view with this node selected

Map Tile Sources

C2 Dark

CartoDB dark matter tiles — designed to minimise visual noise and let node markers stand out. Default style.

Satellite

Esri World Imagery — high-resolution satellite photography. Useful for verifying node placement relative to terrain.

Standard

OpenStreetMap standard tiles — familiar road map with labels, good for urban mesh deployments.

Auto-Refresh

When the AUTO toggle is enabled, the map calls c2FetchAndDrawMap() on a timer (default interval: 30 seconds). This re-fetches node positions and redraws all markers. Useful for leaving the map view open on a secondary screen for real-time monitoring. Auto-refresh state is preserved when switching between map styles.

Relationship to the Overview Mini-Maps

The overview node cards each have a small embedded Leaflet instance showing just that node's position. These are independent of the full Map view and are created lazily. Navigating to the Map view initialises a single full-screen map instance that replaces the individual card maps.

Automation Views Messaging Views