@glandais/vcyclist-elevation 0.0.0
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/demo.css +596 -0
- package/demo.js +613 -0
- package/index.html +195 -0
- package/kotlin-kotlin-stdlib.js +5544 -0
- package/kotlin-kotlin-stdlib.js.map +1 -0
- package/kotlin_org_jetbrains_kotlin_kotlin_dom_api_compat.js +15 -0
- package/kotlin_org_jetbrains_kotlin_kotlin_dom_api_compat.js.map +1 -0
- package/kotlinx-atomicfu.js +263 -0
- package/kotlinx-atomicfu.js.map +1 -0
- package/kotlinx-browser.js +19 -0
- package/kotlinx-browser.js.map +1 -0
- package/kotlinx-coroutines-core.js +5108 -0
- package/kotlinx-coroutines-core.js.map +1 -0
- package/package.json +27 -0
- package/sample.gpx +2 -0
- package/vcyclist-elevation.d.ts +8 -0
- package/vcyclist-elevation.js +2358 -0
- package/vcyclist-elevation.js.map +1 -0
package/index.html
ADDED
|
@@ -0,0 +1,195 @@
|
|
|
1
|
+
<!doctype html>
|
|
2
|
+
<html lang="en">
|
|
3
|
+
<head>
|
|
4
|
+
<meta charset="UTF-8" />
|
|
5
|
+
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
6
|
+
<title>vcyclist :elevation β Kotlin/JS demo</title>
|
|
7
|
+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css" />
|
|
8
|
+
<link rel="stylesheet" href="demo.css" />
|
|
9
|
+
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
|
|
10
|
+
</head>
|
|
11
|
+
<body>
|
|
12
|
+
<div class="app-container">
|
|
13
|
+
<div class="header">
|
|
14
|
+
<h1>vcyclist :elevation β Kotlin/JS demo</h1>
|
|
15
|
+
<div class="info">
|
|
16
|
+
Kotlin/JS port of @glandais/elevation, exercised through the same UI as the
|
|
17
|
+
original TypeScript demo (sibling of the Kotlin/Wasm demo for comparison).
|
|
18
|
+
<a href="https://github.com/glandais/vcyclist" target="_blank" rel="noopener"
|
|
19
|
+
>π View on GitHub</a
|
|
20
|
+
>
|
|
21
|
+
</div>
|
|
22
|
+
</div>
|
|
23
|
+
|
|
24
|
+
<div class="controls-panel">
|
|
25
|
+
<div class="controls-row">
|
|
26
|
+
<div class="section">
|
|
27
|
+
<strong>π Tools</strong>
|
|
28
|
+
<div class="button-group">
|
|
29
|
+
<button id="point-mode" class="primary">π Point</button>
|
|
30
|
+
<button id="path-mode" class="secondary">π€οΈ Path</button>
|
|
31
|
+
<button id="clear-path" class="danger" disabled>ποΈ Clear</button>
|
|
32
|
+
</div>
|
|
33
|
+
<div class="button-group">
|
|
34
|
+
<input
|
|
35
|
+
type="file"
|
|
36
|
+
id="gpx-file-input"
|
|
37
|
+
accept=".gpx"
|
|
38
|
+
style="display: none"
|
|
39
|
+
/>
|
|
40
|
+
<button id="gpx-upload-btn" class="secondary">π Load GPX</button>
|
|
41
|
+
<button id="load-sample-btn" class="secondary">π Example GPX</button>
|
|
42
|
+
</div>
|
|
43
|
+
<div id="gpx-status" class="gpx-status"></div>
|
|
44
|
+
</div>
|
|
45
|
+
|
|
46
|
+
<div class="section">
|
|
47
|
+
<strong>ποΈ Relief</strong>
|
|
48
|
+
<div class="button-group">
|
|
49
|
+
<button id="relief-off" class="primary">Off</button>
|
|
50
|
+
<button id="relief-hillshade" class="secondary">Hillshade</button>
|
|
51
|
+
<button id="relief-slope" class="secondary">Slope</button>
|
|
52
|
+
</div>
|
|
53
|
+
</div>
|
|
54
|
+
|
|
55
|
+
<div class="section">
|
|
56
|
+
<strong>π Smoothing</strong>
|
|
57
|
+
<div class="control-line">
|
|
58
|
+
<input type="checkbox" id="enable-smoothing" checked />
|
|
59
|
+
<label for="enable-smoothing">Enable</label>
|
|
60
|
+
<label for="smoothing-window-slider">Window:</label>
|
|
61
|
+
<input
|
|
62
|
+
type="range"
|
|
63
|
+
id="smoothing-window-slider"
|
|
64
|
+
min="10"
|
|
65
|
+
max="200"
|
|
66
|
+
value="150"
|
|
67
|
+
step="10"
|
|
68
|
+
/>
|
|
69
|
+
<input
|
|
70
|
+
type="number"
|
|
71
|
+
id="smoothing-window-input"
|
|
72
|
+
min="10"
|
|
73
|
+
max="200"
|
|
74
|
+
value="150"
|
|
75
|
+
step="10"
|
|
76
|
+
/>m
|
|
77
|
+
</div>
|
|
78
|
+
</div>
|
|
79
|
+
|
|
80
|
+
<div class="section">
|
|
81
|
+
<strong>π§ Filtering</strong>
|
|
82
|
+
<div class="control-line">
|
|
83
|
+
<input type="checkbox" id="enable-filtering" checked />
|
|
84
|
+
<label for="enable-filtering">Enable</label>
|
|
85
|
+
<label for="tolerance-slider">Tolerance:</label>
|
|
86
|
+
<input
|
|
87
|
+
type="range"
|
|
88
|
+
id="tolerance-slider"
|
|
89
|
+
min="1"
|
|
90
|
+
max="100"
|
|
91
|
+
value="10"
|
|
92
|
+
step="1"
|
|
93
|
+
/>
|
|
94
|
+
<input
|
|
95
|
+
type="number"
|
|
96
|
+
id="tolerance-input"
|
|
97
|
+
min="1"
|
|
98
|
+
max="100"
|
|
99
|
+
value="10"
|
|
100
|
+
step="1"
|
|
101
|
+
/>m
|
|
102
|
+
</div>
|
|
103
|
+
<div class="control-line">
|
|
104
|
+
<label for="z-exaggeration-slider">Z Exaggeration:</label>
|
|
105
|
+
<input
|
|
106
|
+
type="range"
|
|
107
|
+
id="z-exaggeration-slider"
|
|
108
|
+
min="1"
|
|
109
|
+
max="10"
|
|
110
|
+
value="3"
|
|
111
|
+
step="0.5"
|
|
112
|
+
/>
|
|
113
|
+
<input
|
|
114
|
+
type="number"
|
|
115
|
+
id="z-exaggeration-input"
|
|
116
|
+
min="1"
|
|
117
|
+
max="10"
|
|
118
|
+
value="3"
|
|
119
|
+
step="0.5"
|
|
120
|
+
/>x
|
|
121
|
+
</div>
|
|
122
|
+
</div>
|
|
123
|
+
</div>
|
|
124
|
+
<div class="mode-info" id="mode-info">Click anywhere to get elevation</div>
|
|
125
|
+
</div>
|
|
126
|
+
|
|
127
|
+
<div class="map-container">
|
|
128
|
+
<div id="map"></div>
|
|
129
|
+
<div class="status-bar">
|
|
130
|
+
<div id="elevation-display" class="elevation-display">
|
|
131
|
+
Loading Kotlin/JS moduleβ¦
|
|
132
|
+
</div>
|
|
133
|
+
<div id="coordinates" class="coordinates">Coordinates will appear here</div>
|
|
134
|
+
</div>
|
|
135
|
+
</div>
|
|
136
|
+
|
|
137
|
+
<div class="chart-panel">
|
|
138
|
+
<div id="chart-container">
|
|
139
|
+
<h3>π Elevation Profile</h3>
|
|
140
|
+
<canvas id="elevation-chart"></canvas>
|
|
141
|
+
<div class="chart-info">
|
|
142
|
+
<div class="stats" id="elevation-stats"></div>
|
|
143
|
+
</div>
|
|
144
|
+
</div>
|
|
145
|
+
</div>
|
|
146
|
+
</div>
|
|
147
|
+
|
|
148
|
+
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>
|
|
149
|
+
<script src="https://unpkg.com/gpxparser@3.0.8/dist/gpxparser.min.js"></script>
|
|
150
|
+
<script src="https://cdn.jsdelivr.net/npm/leaflet-relief@latest/dist/leaflet-relief.min.js"></script>
|
|
151
|
+
|
|
152
|
+
<!--
|
|
153
|
+
Kotlin/JS output: webpack UMD bundle that exposes `globalThis.elevation` synchronously
|
|
154
|
+
(no Wasm instantiation step). The shim below wraps the exported free functions in an
|
|
155
|
+
`ElevationProvider` class so demo.js sees the same `new ElevationProvider()` API as the
|
|
156
|
+
original TS demo and the sibling Kotlin/Wasm demo.
|
|
157
|
+
-->
|
|
158
|
+
<script src="./elevation.js"></script>
|
|
159
|
+
<script>
|
|
160
|
+
(async () => {
|
|
161
|
+
try {
|
|
162
|
+
// `await` on a non-Promise just resolves to the value β same shim works for
|
|
163
|
+
// both the synchronous Kotlin/JS module and the Promise-wrapped Kotlin/Wasm one.
|
|
164
|
+
const mod = await globalThis.elevation;
|
|
165
|
+
// Kotlin/JS preserves the package namespace (`mod.io.github.glandais.elevation`);
|
|
166
|
+
// Kotlin/Wasm exposes the @JsExport top-level functions directly on `mod`.
|
|
167
|
+
const lib = mod.io?.github?.glandais?.elevation ?? mod;
|
|
168
|
+
|
|
169
|
+
class ElevationProvider {
|
|
170
|
+
constructor(config) {
|
|
171
|
+
this._h = lib.newElevationProvider(config);
|
|
172
|
+
}
|
|
173
|
+
getElevation(latitude, longitude, interpolation = true) {
|
|
174
|
+
return lib.getElevation(this._h, latitude, longitude, interpolation);
|
|
175
|
+
}
|
|
176
|
+
getElevationsAlong(path, options) {
|
|
177
|
+
return lib.getElevationsAlong(this._h, path, options);
|
|
178
|
+
}
|
|
179
|
+
}
|
|
180
|
+
|
|
181
|
+
window.Elevation = { ElevationProvider };
|
|
182
|
+
|
|
183
|
+
const s = document.createElement('script');
|
|
184
|
+
s.src = './demo.js';
|
|
185
|
+
document.body.appendChild(s);
|
|
186
|
+
} catch (err) {
|
|
187
|
+
document.getElementById('elevation-display').textContent =
|
|
188
|
+
'Failed to load Kotlin/JS module: ' + err;
|
|
189
|
+
document.getElementById('elevation-display').className =
|
|
190
|
+
'elevation-display error';
|
|
191
|
+
}
|
|
192
|
+
})();
|
|
193
|
+
</script>
|
|
194
|
+
</body>
|
|
195
|
+
</html>
|