arah2/theme/basemap/index.html

<!DOCTYPE html>
<!--
  araharah — Rams basemap browser proof (success criterion 3)
  ------------------------------------------------------------------
  Renders theme/basemap/liberty-rams.json (the token-derived Rams
  cartography fork of OpenFreeMap liberty) in MapLibre GL at the KL
  metro / KLCC anchor, with a PLACEHOLDER route vector in
  signal-orange.

  ROUTE ACCENT — PHASE 5 CONSUMES THIS VECTOR:
  The orange polyline below is a placeholder preview of the navigation
  vector. Per D-08, signal-orange appears in this view ONLY on the
  route line (raw tolerance) — never in the basemap cartography. The
  real route layer (Valhalla geometry, guidance state) replaces this
  placeholder in Phase 5; its color is read from the token package at
  runtime (var(--color-signal-orange)), not hand-tuned here (D-09).

  OPEN (serve theme/ as docroot so ../dist/rams.css + fonts resolve):
    npm run basemap:preview --workspace theme
    → http://localhost:8123/basemap/
-->
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>ARAHARAH // RAMS BASEMAP PROOF</title>

  <!-- token package: Rams tokens + self-hosted Geist / Space Grotesk (D-10/D-16) -->
  <link rel="stylesheet" href="../dist/rams.css">

  <!-- MapLibre GL v4 (CDN per plan; product build wires its own copy in Phase 3) -->
  <link rel="stylesheet" href="https://unpkg.com/maplibre-gl@^4/dist/maplibre-gl.css">
  <script src="https://unpkg.com/maplibre-gl@^4/dist/maplibre-gl.js"></script>

  <style>
    /* page chrome — every value a token reference */
    :root { color-scheme: light; }
    * { box-sizing: border-box; }
    html, body { height: 100%; margin: 0; }
    body {
      display: flex;
      flex-direction: column;
      background: var(--color-surface);
      color: var(--color-on-surface);
      font: var(--type-label-md);
      letter-spacing: var(--type-label-md-tracking);
    }
    header {
      display: flex;
      align-items: center;
      justify-content: space-between;
      gap: var(--spacing-space-md);
      padding: var(--spacing-space-sm) var(--spacing-margin);
      background: var(--color-matte-black);
      color: var(--color-inverse-on-surface);
      border-bottom: 2px solid var(--color-matte-black);
    }
    header .brand {
      font: var(--type-label-lg);
      letter-spacing: var(--type-label-lg-tracking);
      text-transform: uppercase;
    }
    header .ref { font: var(--type-label-sm); letter-spacing: var(--type-label-sm-tracking); text-transform: uppercase; opacity: 0.7; }
    main { position: relative; flex: 1; min-height: 0; }
    #map { position: absolute; inset: 0; }
    footer {
      display: flex;
      align-items: center;
      justify-content: space-between;
      padding: var(--spacing-space-xs) var(--spacing-margin);
      background: var(--color-soft-beige);
      color: var(--color-on-surface);
      border-top: 1px solid var(--color-matte-black);
      font: var(--type-label-sm);
      letter-spacing: var(--type-label-sm-tracking);
      text-transform: uppercase;
    }
    .swatch {
      display: inline-block;
      width: var(--spacing-space-md);
      height: var(--spacing-space-sm);
      margin-right: var(--spacing-space-xs);
      background: var(--color-signal-orange);
      border: 1px solid var(--color-matte-black);
      vertical-align: middle;
    }
    .maplibregl-ctrl-group { border-radius: 0; } /* zero roundedness, per Rams */
  </style>
</head>
<body>
  <header>
    <span class="brand">ARAHARAH // RAMS CARTOGRAPHY PROOF</span>
    <span class="ref">BASEMAP: LIBERTY → RAMS · KL METRO</span>
  </header>
  <main>
    <div id="map"></div>
  </main>
  <footer>
    <span><span class="swatch"></span>ROUTE VECTOR — SIGNAL-ORANGE · RESERVED (PHASE 5)</span>
    <span>GROUND / WATER / ROADS — DERIVED FROM TOKEN PACKAGE</span>
  </footer>

  <script>
    /* route accent read from the token package at runtime (D-09);
       literal fallback only if the token sheet failed to load */
    const routeColor =
      getComputedStyle(document.documentElement).getPropertyValue('--color-signal-orange').trim() || '#EB8008';
    const routeInk =
      getComputedStyle(document.documentElement).getPropertyValue('--color-matte-black').trim() || '#1A1A1A';

    const KLCC = [101.6958, 3.1513]; // KL metro anchor — product region

    const map = new maplibregl.Map({
      container: 'map',
      style: './liberty-rams.json', // the token-derived Rams basemap
      center: KLCC,
      zoom: 13,
    });
    map.addControl(new maplibregl.NavigationControl({ showCompass: false }));

    /* style-validation + resource errors surface in the console —
       the render proof listens for these */
    map.on('error', (e) => {
      console.error('RAMS-BASEMAP-ERROR', e && e.error && (e.error.message || e.error));
    });

    /* PLACEHOLDER ROUTE VECTOR (consumed by Phase 5):
       a Jalan Ampang → KLCC preview polyline; square caps + the 1px
       matte-black dashed centerline mirror the mockup route ribbon */
    const routePlaceholder = {
      type: 'FeatureCollection',
      features: [{
        type: 'Feature',
        properties: {},
        geometry: {
          type: 'LineString',
          coordinates: [
            [101.6793, 3.1594], [101.6842, 3.1566], [101.6879, 3.1549],
            [101.6903, 3.1536], [101.6928, 3.1525], [101.6945, 3.1518],
            [101.6958, 3.1513],
          ],
        },
      }],
    };

    map.on('load', () => {
      map.addSource('rams-route-placeholder', { type: 'geojson', data: routePlaceholder });

      /* route layers added LAST — above all basemap layers (D-08:
         the accent lives on top of the grayscale, never inside it) */
      map.addLayer({
        id: 'rams-route-line',
        type: 'line',
        source: 'rams-route-placeholder',
        layout: { 'line-cap': 'square', 'line-join': 'miter' },
        paint: { 'line-color': routeColor, 'line-width': 6 },
      });
      map.addLayer({
        id: 'rams-route-centerline',
        type: 'line',
        source: 'rams-route-placeholder',
        layout: { 'line-cap': 'square', 'line-join': 'miter' },
        paint: { 'line-color': routeInk, 'line-width': 1, 'line-dasharray': [3, 3] },
      });

      /* frame the proof on the route corridor */
      map.fitBounds(
        [[101.6793, 3.1513], [101.6958, 3.1594]],
        { padding: 64, maxZoom: 13 }
      );
      console.log('RAMS-BASEMAP-READY route=' + routeColor + ' layers=' +
        map.getStyle().layers.map((l) => l.id).length);
    });
  </script>
</body>
</html>