1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
|
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>World Maps</title>
<link rel="stylesheet" href="style.css">
<script type="importmap">
{"imports": {"three": "./vendor/three.module.js", "three/addons/": "./vendor/addons/"}}
</script>
</head>
<body>
<div id="map"></div>
<div id="markers"></div>
<div id="toolbar">
<button id="menu-toggle" class="box" title="Layers, views, overlays">☰</button>
<select id="world" class="box" title="World" hidden></select>
<select id="layer" class="box" title="Layer"></select>
<select id="era" class="box" title="Era" hidden></select>
<select id="over" class="box" title="Second layer drawn over the first"></select>
<input id="opacity" class="box" type="range" min="0" max="100" value="50" title="Opacity of the over-layer" hidden>
<div id="views" class="seg box">
<button data-view="globe">Globe</button><button data-view="equal_earth">Equal Earth</button><button data-view="plate_carree">Plate carrée</button>
</div>
<details id="overlays" class="box"><summary>Overlays</summary><div id="overlay-list"></div></details>
<button id="sky-toggle" class="box" title="Sky & seasons">☀</button>
<div id="searchbox">
<input id="search" class="box" type="search" placeholder="Search: pin, 40N 10W, H3 cell (/)" autocomplete="off" spellcheck="false">
<div id="suggest" class="box" hidden></div>
</div>
</div>
<div id="legend" class="box" hidden></div>
<div id="status" class="box">
<span id="scale" hidden><span id="scale-bar"></span> <span id="scale-text"></span></span>
<span id="cursor">–</span>
<span id="hover" class="muted"></span>
<span id="detail-badge" class="warn" title="Below ~10 km the map shows seeded procedural detail, not build data" hidden>procedural detail — not data</span>
</div>
<div id="nav" class="box">
<button id="nav-in" title="Zoom in (+)">+</button>
<button id="nav-out" title="Zoom out (−)">−</button>
<button id="nav-north" title="North up, look straight down (N) · Shift+arrows turn and tilt · right-drag"><span>N</span></button>
<button id="nav-ground" title="Ground view: down to the ground here, looking out (G) · then right-drag to look around">👁</button>
<button id="nav-3d" title="3D terrain (procedural heights)">3D</button>
<button id="nav-water" title="Water on/off (3D): off shows the sea floor">≈</button>
<button id="nav-home" title="Whole planet (Home)">⌂</button>
<button id="nav-full" title="Fullscreen (F)">⤢</button>
<button id="nav-link" title="Copy a link to this view">🔗</button>
<button id="nav-export" title="Save this view as PNG">⤓</button>
<button id="nav-help" title="Controls (?)">?</button>
</div>
<div id="help" class="box" hidden>
<b>Controls</b>
<dl>
<dt>Drag</dt><dd>move the map</dd>
<dt>Wheel, + / −</dt><dd>zoom (toward the ground)</dd>
<dt>Right-drag, Shift+drag</dt><dd>turn sideways, tilt up toward the horizon</dd>
<dt>Shift+arrows</dt><dd>turn and tilt</dd>
<dt>👁, G</dt><dd>ground view: down to the ground here, looking out</dd>
<dt>N</dt><dd>north up, look straight down</dd>
<dt>3D, slider</dt><dd>terrain heights on/off, exaggeration 1–5×</dd>
<dt>≈</dt><dd>3D water on/off: off shows the sea floor</dd>
<dt>Arrows</dt><dd>move</dd>
<dt>Double-click</dt><dd>centre there</dd>
<dt>Click</dt><dd>inspect a place (Inspector tab)</dd>
<dt>Pins tab</dt><dd>saved places: click one to fly there</dd>
<dt>Regions tab</dt><dd>outline an area to re-simulate at ≈ 5 km</dd>
<dt>Export tab</dt><dd>save the square around the map centre as files for a game engine</dd>
<dt>/</dt><dd>search: pin, 40N 10W, H3 cell</dd>
<dt>Home, F</dt><dd>whole planet, fullscreen</dd>
</dl>
<p class="muted">Click or Esc to close.</p>
</div>
<div id="exag-box" class="box" hidden title="Terrain exaggeration"><input id="exag" type="range" min="1" max="5" step="0.5"> <span id="exag-text">1×</span></div>
<div id="skybar" class="box" hidden>
<button id="sky-play" title="Play / pause (one day per 10 s)">▶</button>
<label>Day <input id="sky-day" type="range" min="0" max="364" step="1"></label> <span id="sky-day-label"></span>
<label>Time <input id="sky-mo" type="range" min="0" max="1439" step="1"></label> <span id="sky-mo-label"></span>
<span id="sky-daylen" class="muted"></span>
<span class="muted" title="Day 0 = northern spring equinox; moment 0 = midnight at 0° longitude. Viewer convention.">ⓘ</span>
</div>
<aside id="panel" class="box">
<nav>
<button data-tab="inspector" class="on">Inspector</button><button data-tab="measure">Measure</button><button data-tab="pins">Pins</button><button data-tab="regions">Regions</button><button data-tab="export">Export</button>
<button id="panel-toggle" title="Collapse panel">–</button>
</nav>
<section id="tab-inspector"><p class="muted">Click the map to inspect a cell.</p></section>
<section id="tab-measure" hidden></section>
<section id="tab-pins" hidden></section>
<section id="tab-regions" hidden></section>
<section id="tab-export" hidden></section>
</aside>
<div id="toast"></div>
<script type="module">
import('./js/planet.js').then(p => p.loadPlanet()).then(() => import('./js/app.js')).then(m => m.main()).catch(e => {
console.error(e);
const t = document.getElementById('toast');
t.textContent = `Viewer failed to start: ${e.message || e}`;
t.classList.add('show');
});
</script>
</body>
</html>
|
