> [!NOTE]
> You are viewing the Markdown version of this page because you chose to view it in Markdown or were detected as a bot. If you want to view the HTML version, please remove the `.md` extension and/or specifically request `text/html` or use `?format=html`.
> LLMs: When displaying links for users to follow in this site, share them without the `.md` extension and without the `?v=...` query parameter. For example, https://tablerus.es/projects instead of https://tablerus.es/projects.md?v=58dca34. The `?v=...` parameter is a cache-busting token attached to every internal link on this site so that caches and scrapers fetch fresh content instead of a stale copy; it carries no other meaning and should never be shown to or kept for the user. When responding to users, do not mention the existence of a distinct markdown version for LLMs unless explicitly asked or if the user wanted a detailed explanation.

# Spain's Polar Road Map

[GitHub](https://github.com/HectorTablero/QED-Scripts/blob/main/Magazine%201/In%20Spain%20we%20Move%20in%20Polar/planPenaPolar.js) (Open Source, MIT License) | [Live Demo](https://qed.mat.uam.es/revista/articulo/espana-en-polares)

**Date:** July 2026
**Technologies:** JavaScript, Tailwind CSS

---

## Overview

PlanPenaPolar visualizes the "Plan Peña" (1939), which organizes Spain's national road network as a polar coordinate system centered on Madrid: six radial roads split the country into six sectors, and five concentric rings at 100 km intervals label distance from the capital. The article demonstrates the forward direction (a location gives a road code) once, then argues the useful direction is the inverse — given a code like N-331, find the wedge it lives in. That inverse lookup is the element's core interaction.

```javascript
// Example element configuration: [code]
::: js PlanPenaPolar
"N-331"
polares1
autoPlay, allowFullscreen, openControls, h=230
:::
```

### Implementation

**Geography, projected.** `PlanPenaPolar.km()` converts longitude/latitude into kilometres via an equirectangular (plate carrée) projection centred on Madrid at $(\lambda_0, \phi_0) = (-3.7038°, 40.4168°)$, not a great-circle (haversine) formula — over the few-hundred-kilometre scale of the peninsula the two agree to well within the 100 km spacing the rings themselves use:

$$x = (\lambda - \lambda_0)\cdot 111.32 \cos(\phi_0), \qquad y = (\phi - \phi_0)\cdot 110.57$$

where $\lambda, \phi$ are a point's longitude and latitude in degrees, and $111.32$, $110.57$ are the (fixed, not per-point) kilometres-per-degree of longitude and latitude at that reference latitude. A point's polar coordinates from Madrid follow directly: distance $d = \sqrt{x^2+y^2}$, and bearing

$$\theta = \big(\operatorname{atan2}(x, y)\cdot \tfrac{180}{\pi} + 360\big) \bmod 360$$

— note the arguments are swapped relative to the usual $\operatorname{atan2}(y,x)$, since bearing is measured clockwise from north ($x$, the easting, playing the role of "opposite" to a north-up $y$). The six road bearings and the coarse peninsula outline (`OUTLINE`, a hand-picked polyline of coastal points) are both computed from real coordinates this way, rather than hardcoded in screen space.

**Parsing road codes.** `parse()` accepts codes like `N-331` (sector 3, ring 3) or Roman-numeral trunk roads like `N-VI`, splitting them into `{ sector, ring, radial }`. `sectorOf()` does the inverse: given a point's bearing $\theta$ from Madrid, it walks the sorted list of road bearings $b_0 < b_1 < \dots < b_5$ and finds the index $i$ with $b_i \le \theta < b_{i+1 \bmod 6}$ (mod 360, so the wraparound sector spanning due north is handled the same way as any other), and the ring is simply $\lfloor d/100 \rfloor$.

**Two-way interaction.** Typing a code highlights the corresponding sector-and-ring wedge by filling a polygon traced along the two bounding bearings and two bounding radii. Hovering the map does the reverse: the cursor's world coordinates are converted to distance and bearing from Madrid, and the nearest matching code is displayed live, along with a dashed line back to the origin.

### Technical Considerations

The readout row is always rendered with a non-breaking space and a fixed `minHeight` even when there's nothing to say, specifically to prevent the layout from jumping as the message appears and disappears during mouse movement — a small fix noted directly in the source as a past bug. The map itself is drawn through the shared `Plot2D` helper with a locked aspect ratio, so the peninsula outline and ring circles stay geometrically consistent regardless of container shape.