Mapbox GL JS Custom Style Layer for Utility Network Topology with Dynamic Edge Bundling

[elizabetheonoja-art]

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

1. In , implement : compile shaders, create VAO, populate position and color buffers from the initial edge set.
2. On , bind uniform, bind VAO, call .
3. 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.
4. Pass simplified edges through the edge bundler: subdivide each edge into 8 control points, run 40 FDEB iterations, then rebuild vertex buffer.
5. 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).
6. Implement : delete GL buffers, shader program, and VAO.
7. 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.

[real-venus]

Hey, I've read through the issue and I understand it.

Could you assign it to me? I can finish this within 24 hrs.

[grantfox-oss]

🦊 GrantFox — @real-venus has been assigned to this issue as part of the Official Campaign campaign!

Next steps:

1. Open a Pull Request referencing this issue (e.g., Closes #51)
2. Your PR will be reviewed by the Utility-Protocol maintainers

Good luck! Track your progress on GrantFox.

[grantfox-oss]

🎉 This issue has been marked as completed on GrantFox as part of the Official Campaign campaign!

@real-venus's PR #86 was approved and merged by @elizabetheonoja-art.

🏆 @real-venus: You earned 45 FoxPoints for this contribution! Your current tier: Specialist (4,156 total points). Track your full progress on GrantFox.

👏 Great work, @real-venus! Keep contributing to Utility-Protocol.