Road Orientations Map
The topic for day 8 of the #30DayMapChallenge is Urban. For this challenge I decided to go old-school and convert Vladimir Agafonkin's original Road Orientations from Mapbox to Maplibre. The original code analyzes street orientations and visualizes them as a polar histogram. I've just adapted Vladimir’s approach to work with MapLibre GL JS.
What the Map Shows
The map combines two layers of information:
- Street network: Using open vector tiles from OpenMapTiles via OpenFreeMap, we render major and minor streets.
- Polar histogram: A circular chart overlay in the bottom-left corner summarizes the orientation of roads around the current map center.
Each segment of the polar histogram corresponds to a directional bin. The longer the segment, the more road length in that orientation. Colors follow a rainbow-like sinebow palette, making dominant street orientations immediately visible.
How It Works
The histogram is calculated entirely in the browser:
Query streets in view - Using map.queryRenderedFeatures(), the map collects all street features in the layers highway_major_casing and highway_minor.
Clip to the map bounds - To avoid analyzing streets outside the viewport, each road line is clipped to the current map bounding box. A lightweight, inline lineclip function handles this efficiently.
Compute bearings and distances - For each segment of every street, we calculate:
- Bearing: The compass direction from one endpoint to the next.
- Distance: The great-circle distance between the points, using a simple haversine formula.
Aggregate into bins - Bearings are grouped into 64 bins spanning 360°, and the total length of roads in each bin is summed.
Draw the polar histogram - A <canvas> element overlays the map. Each bin is represented as a wedge extending outward from the center, scaled by the total length of roads in that direction. Color is determined by a sinebow interpolation for visual flair.
Update on map movement - The histogram updates every time you pan or zoom (moveend), giving a live view of local street orientations.
To ensure my map isn't just a duplication of Vladimir's map I have added buttons to also view runway and river orientations in the current map view. If you want to adapt the map further you can add any map layer from the OpenFreeMap style (or from layers of the map-tiles that you use).
Comments