Problem Statement / Feature Objective
Utility infrastructure (pipes, cables, conduits) forms a dense planar graph that Mapbox's native line layer cannot render efficiently beyond 10,000 edges due to GPU draw-call saturation. A custom Mapbox GL JS must render the network topology using raw WebGL, employing hierarchical edge bundling to declutter visual overlap, dynamic LOD with edge simplification, and per-vertex color attributes encoding flow direction and load status. The layer must support , , , and lifecycle hooks with Metro tiles as the coordinate anchor.
Technical Invariants & Bounds
- Maximum edges in viewport: 50,000 before LOD simplification kicks in; simplification targets 15,000 edges.
- Edge bundling: use FDEB (Force-Directed Edge Bundling) with 40 iterations max, convergence epsilon 0.001, spring constant , compatibility threshold cosine similarity > 0.7.
- LOD simplification: Douglas-Peucker with epsilon = 5 meters at zoom ≤14, 20 meters at zoom ≥16.
- Vertex buffer: interleaved for position + color attribute; index buffer for line segments.
- Draw mode: with capped at 4.0 (WebGL limit varies by GPU; fallback to textured triangles if > 1.0 not supported).
- Shader program: / with uniform (Mapbox projection matrix) and .
Codebase Navigation Guide
- src/components/map/UtilityNetworkLayer.ts — Main custom layer implementation implementing .
- src/components/map/shaders/utilityNetwork.vert — Vertex shader accepting , ; transforms via .
- src/components/map/shaders/utilityNetwork.frag — Fragment shader; applies per-vertex color with optional dash pattern uniform.
- src/utils/edgeBundling.ts — FDEB algorithm: subdivides edges into control points, iterates spring forces.
- src/utils/edgeSimplification.ts — Douglas-Peucker simplification with zoom-aware epsilon.
- src/hooks/useNetworkTopology.ts — Fetches GeoJSON network data from REST endpoint .
Implementation Blueprint
- In , implement : compile shaders, create VAO, populate position and color buffers from the initial edge set.
- On , bind uniform, bind VAO, call .
- In the prerender phase (or via Mapbox event), compute current zoom and bounding box. Filter edges to those intersecting the bounding box, then run Douglas-Peucker simplification with epsilon scaled by zoom.
- Pass simplified edges through the edge bundler: subdivide each edge into 8 control points, run 40 FDEB iterations, then rebuild vertex buffer.
- Assign per-vertex color attributes based on edge metadata: (blue→forward, red→reverse, green→bidirectional), modulates alpha (1.0 = nominal, 0.4 = overloaded, 0.2 = idle).
- Implement : delete GL buffers, shader program, and VAO.
- Expose a Redux action that triggers a re-bind of the vertex buffer when the operator toggles network layer visibility or applies a status filter.
Problem Statement / Feature Objective
Utility infrastructure (pipes, cables, conduits) forms a dense planar graph that Mapbox's native line layer cannot render efficiently beyond 10,000 edges due to GPU draw-call saturation. A custom Mapbox GL JS must render the network topology using raw WebGL, employing hierarchical edge bundling to declutter visual overlap, dynamic LOD with edge simplification, and per-vertex color attributes encoding flow direction and load status. The layer must support , , , and lifecycle hooks with Metro tiles as the coordinate anchor.
Technical Invariants & Bounds
Codebase Navigation Guide
Implementation Blueprint