forked from c-fu/arah2
feat(01-design-tokens-rams-foundation-03): browser proof page — Rams basemap + signal-orange route placeholder at KL metro
- index.html: MapLibre GL v4 viewer loading ./liberty-rams.json at the KLCC anchor (101.6958, 3.1513, zoom 13); page chrome token-only (var(--color-*) via ../dist/rams.css, self-hosted Geist/Space Grotesk per D-10/D-16) - placeholder route vector: 6px signal-orange polyline + 1px matte-black dashed centerline (mockup route ribbon), color read from the token package at runtime (var(--color-signal-orange)); route layers added LAST (accent lives above grayscale, never inside it); README comment marks the vector as consumed by Phase 5 - basemap:preview script: python3 -m http.server 8123 (cwd=theme serves /basemap/ + /dist/rams.css + /fonts within one docroot — plan's cd-variant was doubly broken; open http://localhost:8123/basemap/) - real-browser render proof (scratch, plan 04 owns committed capture tooling): 8/8 checks pass — maplibre style validation clean, zero failed requests/non-200s, 296 sampled orange route pixels, 0 saturated non-red-hue pixels (grayscale grounding proven pixel-level), 100% warm-gray map area, header chrome rgb(26,26,26)
This commit is contained in:
araharah-executor
@@ -0,0 +1,176 @@
|
|||||||
|
<!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>
|
||||||
+2
-1
@@ -12,6 +12,7 @@
|
|||||||
"build": "tailwindcss -i ./src/theme.css -o ./dist/rams.css --minify",
|
"build": "tailwindcss -i ./src/theme.css -o ./dist/rams.css --minify",
|
||||||
"send": "mkdir -p dist/fonts && cp -r fonts/geist fonts/space-grotesk dist/fonts/",
|
"send": "mkdir -p dist/fonts && cp -r fonts/geist fonts/space-grotesk dist/fonts/",
|
||||||
"sheet": "npm run build && echo 'open theme/src/sheet.html in browser ( Consumes theme/dist/rams.css )'",
|
"sheet": "npm run build && echo 'open theme/src/sheet.html in browser ( Consumes theme/dist/rams.css )'",
|
||||||
"basemap": "node basemap/build.mjs"
|
"basemap": "node basemap/build.mjs",
|
||||||
|
"basemap:preview": "python3 -m http.server 8123"
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user