@geoblocks/elevation-profile 0.0.25-beta.8 → 0.0.25

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.
Files changed (5) hide show
  1. package/README.md +3 -2
  2. package/package.json +1 -1
  3. package/dist/elevation-profile.1e043dac.js +0 -5830
  4. package/dist/elevation-profile.1e043dac.js.map +0 -1
  5. package/dist/index.html +0 -1959
package/dist/index.html DELETED
@@ -1,1959 +0,0 @@
1
- <!DOCTYPE html><html><head>
2
- <meta charset="UTF-8">
3
- <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1">
4
- <title>Elevation Profile Demo - @geoblocks/elevation-profile</title>
5
-
6
- <script type="module" src="/elevation-profile.1e043dac.js"></script>
7
- <style>:root {
8
- --color-bg: #f5f5f5;
9
- --color-fg: #1a1a1a;
10
- --color-border: #d0d0d0;
11
- --color-card-bg: #fff;
12
- --color-subtle: #666;
13
- --color-accent: #2a2a2a;
14
- }
15
-
16
- body {
17
- background: var(--color-bg);
18
- color: var(--color-fg);
19
- margin: 0;
20
- font-family: SF Mono, Monaco, Inconsolata, Fira Code, Droid Sans Mono, Source Code Pro, monospace;
21
- line-height: 1.5;
22
- }
23
-
24
- .header {
25
- background: var(--color-card-bg);
26
- border-bottom: 1px solid var(--color-border);
27
- margin-bottom: 48px;
28
- padding: 48px 32px;
29
- }
30
-
31
- .header h1 {
32
- color: var(--color-fg);
33
- letter-spacing: -.5px;
34
- margin: 0 0 8px;
35
- font-size: 32px;
36
- font-weight: 600;
37
- }
38
-
39
- .header p {
40
- color: var(--color-subtle);
41
- margin: 0;
42
- font-size: 14px;
43
- }
44
-
45
- .container {
46
- max-width: 1200px;
47
- margin: 0 auto;
48
- padding: 0 32px 48px;
49
- }
50
-
51
- .example-card {
52
- background: var(--color-card-bg);
53
- border: 1px solid var(--color-border);
54
- border-radius: 2px;
55
- margin-bottom: 32px;
56
- padding: 32px;
57
- }
58
-
59
- .example-header {
60
- border-bottom: 1px solid var(--color-border);
61
- justify-content: space-between;
62
- align-items: center;
63
- margin-bottom: 24px;
64
- padding-bottom: 16px;
65
- display: flex;
66
- }
67
-
68
- .example-header h2 {
69
- color: var(--color-fg);
70
- margin: 0;
71
- font-size: 18px;
72
- font-weight: 600;
73
- }
74
-
75
- .example-description {
76
- color: var(--color-subtle);
77
- margin-bottom: 24px;
78
- font-size: 14px;
79
- line-height: 1.6;
80
- }
81
-
82
- #tooltip {
83
- background-color: var(--color-accent);
84
- color: #fff;
85
- border: 1px solid var(--color-border);
86
- pointer-events: none;
87
- z-index: 1000;
88
- white-space: pre-wrap;
89
- border-radius: 2px;
90
- max-width: 300px;
91
- padding: 8px 12px;
92
- font-size: 12px;
93
- line-height: 1.4;
94
- display: none;
95
- position: absolute;
96
- transform: translate(10px, -50%);
97
- box-shadow: 0 2px 4px #0000001a;
98
- }
99
-
100
- elevation-profile {
101
- width: 100%;
102
- height: 300px;
103
- display: block;
104
- }
105
-
106
- elevation-profile .grid.x {
107
- display: none;
108
- }
109
-
110
- elevation-profile line {
111
- shape-rendering: crispEdges;
112
- }
113
-
114
- elevation-profile .axis .domain, elevation-profile .grid .domain {
115
- display: none;
116
- }
117
-
118
- elevation-profile .axis line {
119
- stroke: #2a2a2a;
120
- }
121
-
122
- elevation-profile .grid line {
123
- stroke: #e0e0e0;
124
- }
125
-
126
- elevation-profile .pointer-line {
127
- stroke: #666;
128
- stroke-opacity: .5;
129
- stroke-width: 1px;
130
- stroke-dasharray: 3 3;
131
- }
132
-
133
- elevation-profile .pointer-circle {
134
- fill: #3761a4;
135
- stroke: #fff;
136
- stroke-width: 2px;
137
- }
138
-
139
- elevation-profile .pointer-circle-outline {
140
- fill: #000;
141
- fill-opacity: .1;
142
- }
143
-
144
- elevation-profile .elevation, elevation-profile .elevation.highlight {
145
- stroke: #3761a4;
146
- stroke-width: 2px;
147
- stroke-linejoin: round;
148
- }
149
-
150
- elevation-profile .elevation.highlight {
151
- stroke-width: 3px;
152
- }
153
-
154
- elevation-profile .elevation[data-value="paved"] {
155
- stroke: #2ecc71;
156
- }
157
-
158
- elevation-profile .elevation[data-value="unpaved"] {
159
- stroke: #e67e22;
160
- stroke-dasharray: 5 5;
161
- }
162
-
163
- elevation-profile .elevation[data-value="stairs"] {
164
- stroke: #9b59b6;
165
- }
166
-
167
- elevation-profile .elevation[data-value="tunnel"] {
168
- stroke: #f2000c;
169
- }
170
-
171
- elevation-profile .elevation[data-value="aboveground"] {
172
- stroke: #1abc9c;
173
- }
174
-
175
- elevation-profile .trail-band {
176
- fill: none;
177
- height: 3px;
178
- }
179
-
180
- elevation-profile .trail-band[data-value="wanderweg"] {
181
- fill: #e7ab3c;
182
- }
183
-
184
- elevation-profile .trail-band[data-value="bergwanderweg"] {
185
- fill: #e74c3c;
186
- }
187
-
188
- elevation-profile .trail-band[data-value="other"] {
189
- fill: #3498db;
190
- }
191
-
192
- elevation-profile .area {
193
- fill: #e8e8e8;
194
- fill-opacity: .5;
195
- }
196
-
197
- elevation-profile .point {
198
- fill: #1a1a1a;
199
- stroke: #fff;
200
- stroke-width: 2px;
201
- }
202
-
203
- .controls {
204
- flex-wrap: wrap;
205
- gap: 12px;
206
- margin-top: 24px;
207
- display: flex;
208
- }
209
-
210
- .legend {
211
- background: var(--color-bg);
212
- border: 1px solid var(--color-border);
213
- border-radius: 2px;
214
- margin-top: 24px;
215
- padding: 16px;
216
- }
217
-
218
- .legend-title {
219
- text-transform: uppercase;
220
- letter-spacing: .5px;
221
- color: var(--color-fg);
222
- margin-bottom: 12px;
223
- font-size: 12px;
224
- font-weight: 600;
225
- }
226
-
227
- .legend-items {
228
- flex-wrap: wrap;
229
- gap: 20px;
230
- display: flex;
231
- }
232
-
233
- .legend-item {
234
- align-items: center;
235
- gap: 8px;
236
- font-size: 12px;
237
- display: flex;
238
- }
239
-
240
- .legend-color {
241
- border-radius: 1px;
242
- width: 24px;
243
- height: 2px;
244
- }
245
-
246
- .legend-color.dashed {
247
- background-image: repeating-linear-gradient(to right, currentColor 0 5px, #0000 5px 10px);
248
- height: 2px;
249
- }
250
-
251
- .code-block {
252
- border: 1px solid var(--color-border);
253
- color: #e8e8e8;
254
- white-space: pre-wrap;
255
- word-wrap: break-word;
256
- background: #2a2a2a;
257
- border-radius: 2px;
258
- margin-top: 16px;
259
- padding: 16px;
260
- font-family: SF Mono, Monaco, Inconsolata, monospace;
261
- font-size: 12px;
262
- overflow-x: auto;
263
- }
264
-
265
- .btn {
266
- background: var(--color-accent);
267
- color: #fff;
268
- border: 1px solid var(--color-accent);
269
- cursor: pointer;
270
- border-radius: 2px;
271
- align-items: center;
272
- gap: 8px;
273
- padding: 10px 16px;
274
- font-family: inherit;
275
- font-size: 12px;
276
- font-weight: 600;
277
- transition: all .15s;
278
- display: inline-flex;
279
- }
280
-
281
- .btn:hover {
282
- background: #1a1a1a;
283
- border-color: #1a1a1a;
284
- }
285
-
286
- .btn:active {
287
- transform: translateY(1px);
288
- }
289
-
290
- code {
291
- background: var(--color-bg);
292
- border: 1px solid var(--color-border);
293
- border-radius: 2px;
294
- padding: 2px 6px;
295
- font-family: inherit;
296
- font-size: 12px;
297
- }
298
- </style>
299
- </head>
300
- <body>
301
- <div class="header">
302
- <h1>@geoblocks/elevation-profile</h1>
303
- <p>Interactive elevation profile component with segment support for trail visualization</p>
304
- </div>
305
-
306
- <div class="container">
307
- <div id="tooltip"></div>
308
-
309
- <!-- Example 1: Basic Single Line -->
310
- <div class="example-card">
311
- <div class="example-header">
312
- <h2>Basic Single Line</h2>
313
- </div>
314
- <p class="example-description">
315
- A simple elevation profile showing a single line without any segment styling.
316
- </p>
317
- <elevation-profile id="profile-basic" locale="de-CH"></elevation-profile>
318
- </div>
319
-
320
- <!-- Example 2: Multiple Lines (MultiLineString) -->
321
- <div class="example-card">
322
- <div class="example-header">
323
- <h2>Multiple Lines (MultiLineString)</h2>
324
- </div>
325
- <p class="example-description">
326
- Elevation profile with multiple disconnected line segments (e.g., separated by a ferry or bus connection). The gap between segments is clearly visible.
327
- </p>
328
- <elevation-profile id="profile-multi" locale="de-CH"></elevation-profile>
329
- </div>
330
-
331
- <!-- Example 3: Line with Surface Segments -->
332
- <div class="example-card">
333
- <div class="example-header">
334
- <h2>Line with Surface Segments</h2>
335
- </div>
336
- <p class="example-description">
337
- Shows different surface types (paved, unpaved, stairs) along the elevation profile using the <code>lineSegments</code> property.
338
- </p>
339
- <elevation-profile id="profile-segments" locale="de-CH"></elevation-profile>
340
- <div class="legend">
341
- <div class="legend-title">Surface Types</div>
342
- <div class="legend-items">
343
- <div class="legend-item">
344
- <div class="legend-color" style="background-color: #2ecc71"></div>
345
- <span>Paved</span>
346
- </div>
347
- <div class="legend-item">
348
- <div class="legend-color dashed" style="color: #e67e22"></div>
349
- <span>Unpaved</span>
350
- </div>
351
- <div class="legend-item">
352
- <div class="legend-color" style="background-color: #9b59b6"></div>
353
- <span>Stairs</span>
354
- </div>
355
- <div class="legend-item">
356
- <div class="legend-color" style="background-color: #f2000c"></div>
357
- <span>Tunnel</span>
358
- </div>
359
- </div>
360
- </div>
361
- </div>
362
-
363
- <!-- Example 4: Full Featured with Trail Bands -->
364
- <div class="example-card">
365
- <div class="example-header">
366
- <h2>Full Featured with Trail Bands</h2>
367
- </div>
368
- <p class="example-description">
369
- Complete example showing both surface segments and trail category bands below the x-axis using <code>lineSegments</code> and <code>xAxisSegments</code>.
370
- </p>
371
- <elevation-profile id="profile-full" locale="de-CH"></elevation-profile>
372
- <div class="legend">
373
- <div class="legend-title">Surface Types &amp; Trail Categories</div>
374
- <div class="legend-items">
375
- <div class="legend-item">
376
- <div class="legend-color" style="background-color: #2ecc71"></div>
377
- <span>Paved</span>
378
- </div>
379
- <div class="legend-item">
380
- <div class="legend-color dashed" style="color: #e67e22"></div>
381
- <span>Unpaved</span>
382
- </div>
383
- <div class="legend-item">
384
- <div class="legend-color" style="background-color: #1abc9c"></div>
385
- <span>Above Ground</span>
386
- </div>
387
- <div class="legend-item">
388
- <div class="legend-color" style="background-color: #e7ab3c"></div>
389
- <span>Wanderweg</span>
390
- </div>
391
- <div class="legend-item">
392
- <div class="legend-color" style="background-color: #3498db"></div>
393
- <span>Other</span>
394
- </div>
395
- </div>
396
- </div>
397
- <div class="controls">
398
- <button id="export-svg" class="btn">
399
- <span>↓</span>
400
- <span>Export as SVG</span>
401
- </button>
402
- </div>
403
- </div>
404
- </div>
405
-
406
- <script>// modules are defined as an array
407
- // [ module function, map of requires ]
408
- //
409
- // map of requires is short require name -> numeric require
410
- //
411
- // anything defined in a previous bundle is accessed via the
412
- // orig method which is the require for previous bundles
413
-
414
- (function (
415
- modules,
416
- entry,
417
- mainEntry,
418
- parcelRequireName,
419
- externals,
420
- distDir,
421
- publicUrl,
422
- devServer
423
- ) {
424
- /* eslint-disable no-undef */
425
- var globalObject =
426
- typeof globalThis !== 'undefined'
427
- ? globalThis
428
- : typeof self !== 'undefined'
429
- ? self
430
- : typeof window !== 'undefined'
431
- ? window
432
- : typeof global !== 'undefined'
433
- ? global
434
- : {};
435
- /* eslint-enable no-undef */
436
-
437
- // Save the require from previous bundle to this closure if any
438
- var previousRequire =
439
- typeof globalObject[parcelRequireName] === 'function' &&
440
- globalObject[parcelRequireName];
441
-
442
- var importMap = previousRequire.i || {};
443
- var cache = previousRequire.cache || {};
444
- // Do not use `require` to prevent Webpack from trying to bundle this call
445
- var nodeRequire =
446
- typeof module !== 'undefined' &&
447
- typeof module.require === 'function' &&
448
- module.require.bind(module);
449
-
450
- function newRequire(name, jumped) {
451
- if (!cache[name]) {
452
- if (!modules[name]) {
453
- if (externals[name]) {
454
- return externals[name];
455
- }
456
- // if we cannot find the module within our internal map or
457
- // cache jump to the current global require ie. the last bundle
458
- // that was added to the page.
459
- var currentRequire =
460
- typeof globalObject[parcelRequireName] === 'function' &&
461
- globalObject[parcelRequireName];
462
- if (!jumped && currentRequire) {
463
- return currentRequire(name, true);
464
- }
465
-
466
- // If there are other bundles on this page the require from the
467
- // previous one is saved to 'previousRequire'. Repeat this as
468
- // many times as there are bundles until the module is found or
469
- // we exhaust the require chain.
470
- if (previousRequire) {
471
- return previousRequire(name, true);
472
- }
473
-
474
- // Try the node require function if it exists.
475
- if (nodeRequire && typeof name === 'string') {
476
- return nodeRequire(name);
477
- }
478
-
479
- var err = new Error("Cannot find module '" + name + "'");
480
- err.code = 'MODULE_NOT_FOUND';
481
- throw err;
482
- }
483
-
484
- localRequire.resolve = resolve;
485
- localRequire.cache = {};
486
-
487
- var module = (cache[name] = new newRequire.Module(name));
488
-
489
- modules[name][0].call(
490
- module.exports,
491
- localRequire,
492
- module,
493
- module.exports,
494
- globalObject
495
- );
496
- }
497
-
498
- return cache[name].exports;
499
-
500
- function localRequire(x) {
501
- var res = localRequire.resolve(x);
502
- if (res === false) {
503
- return {};
504
- }
505
- // Synthesize a module to follow re-exports.
506
- if (Array.isArray(res)) {
507
- var m = {__esModule: true};
508
- res.forEach(function (v) {
509
- var key = v[0];
510
- var id = v[1];
511
- var exp = v[2] || v[0];
512
- var x = newRequire(id);
513
- if (key === '*') {
514
- Object.keys(x).forEach(function (key) {
515
- if (
516
- key === 'default' ||
517
- key === '__esModule' ||
518
- Object.prototype.hasOwnProperty.call(m, key)
519
- ) {
520
- return;
521
- }
522
-
523
- Object.defineProperty(m, key, {
524
- enumerable: true,
525
- get: function () {
526
- return x[key];
527
- },
528
- });
529
- });
530
- } else if (exp === '*') {
531
- Object.defineProperty(m, key, {
532
- enumerable: true,
533
- value: x,
534
- });
535
- } else {
536
- Object.defineProperty(m, key, {
537
- enumerable: true,
538
- get: function () {
539
- if (exp === 'default') {
540
- return x.__esModule ? x.default : x;
541
- }
542
- return x[exp];
543
- },
544
- });
545
- }
546
- });
547
- return m;
548
- }
549
- return newRequire(res);
550
- }
551
-
552
- function resolve(x) {
553
- var id = modules[name][1][x];
554
- return id != null ? id : x;
555
- }
556
- }
557
-
558
- function Module(moduleName) {
559
- this.id = moduleName;
560
- this.bundle = newRequire;
561
- this.require = nodeRequire;
562
- this.exports = {};
563
- }
564
-
565
- newRequire.isParcelRequire = true;
566
- newRequire.Module = Module;
567
- newRequire.modules = modules;
568
- newRequire.cache = cache;
569
- newRequire.parent = previousRequire;
570
- newRequire.distDir = distDir;
571
- newRequire.publicUrl = publicUrl;
572
- newRequire.devServer = devServer;
573
- newRequire.i = importMap;
574
- newRequire.register = function (id, exports) {
575
- modules[id] = [
576
- function (require, module) {
577
- module.exports = exports;
578
- },
579
- {},
580
- ];
581
- };
582
-
583
- // Only insert newRequire.load when it is actually used.
584
- // The code in this file is linted against ES5, so dynamic import is not allowed.
585
- // INSERT_LOAD_HERE
586
-
587
- Object.defineProperty(newRequire, 'root', {
588
- get: function () {
589
- return globalObject[parcelRequireName];
590
- },
591
- });
592
-
593
- globalObject[parcelRequireName] = newRequire;
594
-
595
- for (var i = 0; i < entry.length; i++) {
596
- newRequire(entry[i]);
597
- }
598
-
599
- if (mainEntry) {
600
- // Expose entry point to Node, AMD or browser globals
601
- // Based on https://github.com/ForbesLindesay/umd/blob/master/template.js
602
- var mainExports = newRequire(mainEntry);
603
-
604
- // CommonJS
605
- if (typeof exports === 'object' && typeof module !== 'undefined') {
606
- module.exports = mainExports;
607
-
608
- // RequireJS
609
- } else if (typeof define === 'function' && define.amd) {
610
- define(function () {
611
- return mainExports;
612
- });
613
- }
614
- }
615
- })({"jRR65":[function(require,module,exports,__globalThis) {
616
- var global = arguments[3];
617
- var HMR_HOST = null;
618
- var HMR_PORT = null;
619
- var HMR_SERVER_PORT = 1234;
620
- var HMR_SECURE = false;
621
- var HMR_ENV_HASH = "d6ea1d42532a7575";
622
- var HMR_USE_SSE = false;
623
- module.bundle.HMR_BUNDLE_ID = "4ab0800fdde8570e";
624
- "use strict";
625
- /* global HMR_HOST, HMR_PORT, HMR_SERVER_PORT, HMR_ENV_HASH, HMR_SECURE, HMR_USE_SSE, chrome, browser, __parcel__import__, __parcel__importScripts__, ServiceWorkerGlobalScope */ /*::
626
- import type {
627
- HMRAsset,
628
- HMRMessage,
629
- } from '@parcel/reporter-dev-server/src/HMRServer.js';
630
- interface ParcelRequire {
631
- (string): mixed;
632
- cache: {|[string]: ParcelModule|};
633
- hotData: {|[string]: mixed|};
634
- Module: any;
635
- parent: ?ParcelRequire;
636
- isParcelRequire: true;
637
- modules: {|[string]: [Function, {|[string]: string|}]|};
638
- HMR_BUNDLE_ID: string;
639
- root: ParcelRequire;
640
- }
641
- interface ParcelModule {
642
- hot: {|
643
- data: mixed,
644
- accept(cb: (Function) => void): void,
645
- dispose(cb: (mixed) => void): void,
646
- // accept(deps: Array<string> | string, cb: (Function) => void): void,
647
- // decline(): void,
648
- _acceptCallbacks: Array<(Function) => void>,
649
- _disposeCallbacks: Array<(mixed) => void>,
650
- |};
651
- }
652
- interface ExtensionContext {
653
- runtime: {|
654
- reload(): void,
655
- getURL(url: string): string;
656
- getManifest(): {manifest_version: number, ...};
657
- |};
658
- }
659
- declare var module: {bundle: ParcelRequire, ...};
660
- declare var HMR_HOST: string;
661
- declare var HMR_PORT: string;
662
- declare var HMR_SERVER_PORT: string;
663
- declare var HMR_ENV_HASH: string;
664
- declare var HMR_SECURE: boolean;
665
- declare var HMR_USE_SSE: boolean;
666
- declare var chrome: ExtensionContext;
667
- declare var browser: ExtensionContext;
668
- declare var __parcel__import__: (string) => Promise<void>;
669
- declare var __parcel__importScripts__: (string) => Promise<void>;
670
- declare var globalThis: typeof self;
671
- declare var ServiceWorkerGlobalScope: Object;
672
- */ var OVERLAY_ID = '__parcel__error__overlay__';
673
- var OldModule = module.bundle.Module;
674
- function Module(moduleName) {
675
- OldModule.call(this, moduleName);
676
- this.hot = {
677
- data: module.bundle.hotData[moduleName],
678
- _acceptCallbacks: [],
679
- _disposeCallbacks: [],
680
- accept: function(fn) {
681
- this._acceptCallbacks.push(fn || function() {});
682
- },
683
- dispose: function(fn) {
684
- this._disposeCallbacks.push(fn);
685
- }
686
- };
687
- module.bundle.hotData[moduleName] = undefined;
688
- }
689
- module.bundle.Module = Module;
690
- module.bundle.hotData = {};
691
- var checkedAssets /*: {|[string]: boolean|} */ , disposedAssets /*: {|[string]: boolean|} */ , assetsToDispose /*: Array<[ParcelRequire, string]> */ , assetsToAccept /*: Array<[ParcelRequire, string]> */ , bundleNotFound = false;
692
- function getHostname() {
693
- return HMR_HOST || (typeof location !== 'undefined' && location.protocol.indexOf('http') === 0 ? location.hostname : 'localhost');
694
- }
695
- function getPort() {
696
- return HMR_PORT || (typeof location !== 'undefined' ? location.port : HMR_SERVER_PORT);
697
- }
698
- // eslint-disable-next-line no-redeclare
699
- let WebSocket = globalThis.WebSocket;
700
- if (!WebSocket && typeof module.bundle.root === 'function') try {
701
- // eslint-disable-next-line no-global-assign
702
- WebSocket = module.bundle.root('ws');
703
- } catch {
704
- // ignore.
705
- }
706
- var hostname = getHostname();
707
- var port = getPort();
708
- var protocol = HMR_SECURE || typeof location !== 'undefined' && location.protocol === 'https:' && ![
709
- 'localhost',
710
- '127.0.0.1',
711
- '0.0.0.0'
712
- ].includes(hostname) ? 'wss' : 'ws';
713
- // eslint-disable-next-line no-redeclare
714
- var parent = module.bundle.parent;
715
- if (!parent || !parent.isParcelRequire) {
716
- // Web extension context
717
- var extCtx = typeof browser === 'undefined' ? typeof chrome === 'undefined' ? null : chrome : browser;
718
- // Safari doesn't support sourceURL in error stacks.
719
- // eval may also be disabled via CSP, so do a quick check.
720
- var supportsSourceURL = false;
721
- try {
722
- (0, eval)('throw new Error("test"); //# sourceURL=test.js');
723
- } catch (err) {
724
- supportsSourceURL = err.stack.includes('test.js');
725
- }
726
- var ws;
727
- if (HMR_USE_SSE) ws = new EventSource('/__parcel_hmr');
728
- else try {
729
- // If we're running in the dev server's node runner, listen for messages on the parent port.
730
- let { workerData, parentPort } = module.bundle.root('node:worker_threads') /*: any*/ ;
731
- if (workerData !== null && workerData !== void 0 && workerData.__parcel) {
732
- parentPort.on('message', async (message)=>{
733
- try {
734
- await handleMessage(message);
735
- parentPort.postMessage('updated');
736
- } catch {
737
- parentPort.postMessage('restart');
738
- }
739
- });
740
- // After the bundle has finished running, notify the dev server that the HMR update is complete.
741
- queueMicrotask(()=>parentPort.postMessage('ready'));
742
- }
743
- } catch {
744
- if (typeof WebSocket !== 'undefined') try {
745
- ws = new WebSocket(protocol + '://' + hostname + (port ? ':' + port : '') + '/');
746
- } catch (err) {
747
- // Ignore cloudflare workers error.
748
- if (err.message && !err.message.includes('Disallowed operation called within global scope')) console.error(err.message);
749
- }
750
- }
751
- if (ws) {
752
- // $FlowFixMe
753
- ws.onmessage = async function(event /*: {data: string, ...} */ ) {
754
- var data /*: HMRMessage */ = JSON.parse(event.data);
755
- await handleMessage(data);
756
- };
757
- if (ws instanceof WebSocket) {
758
- ws.onerror = function(e) {
759
- if (e.message) console.error(e.message);
760
- };
761
- ws.onclose = function() {
762
- console.warn("[parcel] \uD83D\uDEA8 Connection to the HMR server was lost");
763
- };
764
- }
765
- }
766
- }
767
- async function handleMessage(data /*: HMRMessage */ ) {
768
- checkedAssets = {} /*: {|[string]: boolean|} */ ;
769
- disposedAssets = {} /*: {|[string]: boolean|} */ ;
770
- assetsToAccept = [];
771
- assetsToDispose = [];
772
- bundleNotFound = false;
773
- if (data.type === 'reload') fullReload();
774
- else if (data.type === 'update') {
775
- // Remove error overlay if there is one
776
- if (typeof document !== 'undefined') removeErrorOverlay();
777
- let assets = data.assets;
778
- // Handle HMR Update
779
- let handled = assets.every((asset)=>{
780
- return asset.type === 'css' || asset.type === 'js' && hmrAcceptCheck(module.bundle.root, asset.id, asset.depsByBundle);
781
- });
782
- // Dispatch a custom event in case a bundle was not found. This might mean
783
- // an asset on the server changed and we should reload the page. This event
784
- // gives the client an opportunity to refresh without losing state
785
- // (e.g. via React Server Components). If e.preventDefault() is not called,
786
- // we will trigger a full page reload.
787
- if (handled && bundleNotFound && assets.some((a)=>a.envHash !== HMR_ENV_HASH) && typeof window !== 'undefined' && typeof CustomEvent !== 'undefined') handled = !window.dispatchEvent(new CustomEvent('parcelhmrreload', {
788
- cancelable: true
789
- }));
790
- if (handled) {
791
- console.clear();
792
- // Dispatch custom event so other runtimes (e.g React Refresh) are aware.
793
- if (typeof window !== 'undefined' && typeof CustomEvent !== 'undefined') window.dispatchEvent(new CustomEvent('parcelhmraccept'));
794
- await hmrApplyUpdates(assets);
795
- hmrDisposeQueue();
796
- // Run accept callbacks. This will also re-execute other disposed assets in topological order.
797
- let processedAssets = {};
798
- for(let i = 0; i < assetsToAccept.length; i++){
799
- let id = assetsToAccept[i][1];
800
- if (!processedAssets[id]) {
801
- hmrAccept(assetsToAccept[i][0], id);
802
- processedAssets[id] = true;
803
- }
804
- }
805
- } else fullReload();
806
- }
807
- if (data.type === 'error') {
808
- // Log parcel errors to console
809
- for (let ansiDiagnostic of data.diagnostics.ansi){
810
- let stack = ansiDiagnostic.codeframe ? ansiDiagnostic.codeframe : ansiDiagnostic.stack;
811
- console.error("\uD83D\uDEA8 [parcel]: " + ansiDiagnostic.message + '\n' + stack + '\n\n' + ansiDiagnostic.hints.join('\n'));
812
- }
813
- if (typeof document !== 'undefined') {
814
- // Render the fancy html overlay
815
- removeErrorOverlay();
816
- var overlay = createErrorOverlay(data.diagnostics.html);
817
- // $FlowFixMe
818
- document.body.appendChild(overlay);
819
- }
820
- }
821
- }
822
- function removeErrorOverlay() {
823
- var overlay = document.getElementById(OVERLAY_ID);
824
- if (overlay) {
825
- overlay.remove();
826
- console.log("[parcel] \u2728 Error resolved");
827
- }
828
- }
829
- function createErrorOverlay(diagnostics) {
830
- var overlay = document.createElement('div');
831
- overlay.id = OVERLAY_ID;
832
- let errorHTML = '<div style="background: black; opacity: 0.85; font-size: 16px; color: white; position: fixed; height: 100%; width: 100%; top: 0px; left: 0px; padding: 30px; font-family: Menlo, Consolas, monospace; z-index: 9999;">';
833
- for (let diagnostic of diagnostics){
834
- let stack = diagnostic.frames.length ? diagnostic.frames.reduce((p, frame)=>{
835
- return `${p}
836
- <a href="${protocol === 'wss' ? 'https' : 'http'}://${hostname}:${port}/__parcel_launch_editor?file=${encodeURIComponent(frame.location)}" style="text-decoration: underline; color: #888" onclick="fetch(this.href); return false">${frame.location}</a>
837
- ${frame.code}`;
838
- }, '') : diagnostic.stack;
839
- errorHTML += `
840
- <div>
841
- <div style="font-size: 18px; font-weight: bold; margin-top: 20px;">
842
- \u{1F6A8} ${diagnostic.message}
843
- </div>
844
- <pre>${stack}</pre>
845
- <div>
846
- ${diagnostic.hints.map((hint)=>"<div>\uD83D\uDCA1 " + hint + '</div>').join('')}
847
- </div>
848
- ${diagnostic.documentation ? `<div>\u{1F4DD} <a style="color: violet" href="${diagnostic.documentation}" target="_blank">Learn more</a></div>` : ''}
849
- </div>
850
- `;
851
- }
852
- errorHTML += '</div>';
853
- overlay.innerHTML = errorHTML;
854
- return overlay;
855
- }
856
- function fullReload() {
857
- if (typeof location !== 'undefined' && 'reload' in location) location.reload();
858
- else if (typeof extCtx !== 'undefined' && extCtx && extCtx.runtime && extCtx.runtime.reload) extCtx.runtime.reload();
859
- else try {
860
- let { workerData, parentPort } = module.bundle.root('node:worker_threads') /*: any*/ ;
861
- if (workerData !== null && workerData !== void 0 && workerData.__parcel) parentPort.postMessage('restart');
862
- } catch (err) {
863
- console.error("[parcel] \u26A0\uFE0F An HMR update was not accepted. Please restart the process.");
864
- }
865
- }
866
- function getParents(bundle, id) /*: Array<[ParcelRequire, string]> */ {
867
- var modules = bundle.modules;
868
- if (!modules) return [];
869
- var parents = [];
870
- var k, d, dep;
871
- for(k in modules)for(d in modules[k][1]){
872
- dep = modules[k][1][d];
873
- if (dep === id || Array.isArray(dep) && dep[dep.length - 1] === id) parents.push([
874
- bundle,
875
- k
876
- ]);
877
- }
878
- if (bundle.parent) parents = parents.concat(getParents(bundle.parent, id));
879
- return parents;
880
- }
881
- function updateLink(link) {
882
- var href = link.getAttribute('href');
883
- if (!href) return;
884
- var newLink = link.cloneNode();
885
- newLink.onload = function() {
886
- if (link.parentNode !== null) // $FlowFixMe
887
- link.parentNode.removeChild(link);
888
- };
889
- newLink.setAttribute('href', // $FlowFixMe
890
- href.split('?')[0] + '?' + Date.now());
891
- // $FlowFixMe
892
- link.parentNode.insertBefore(newLink, link.nextSibling);
893
- }
894
- var cssTimeout = null;
895
- function reloadCSS() {
896
- if (cssTimeout || typeof document === 'undefined') return;
897
- cssTimeout = setTimeout(function() {
898
- var links = document.querySelectorAll('link[rel="stylesheet"]');
899
- for(var i = 0; i < links.length; i++){
900
- // $FlowFixMe[incompatible-type]
901
- var href /*: string */ = links[i].getAttribute('href');
902
- var hostname = getHostname();
903
- var servedFromHMRServer = hostname === 'localhost' ? new RegExp('^(https?:\\/\\/(0.0.0.0|127.0.0.1)|localhost):' + getPort()).test(href) : href.indexOf(hostname + ':' + getPort());
904
- var absolute = /^https?:\/\//i.test(href) && href.indexOf(location.origin) !== 0 && !servedFromHMRServer;
905
- if (!absolute) updateLink(links[i]);
906
- }
907
- cssTimeout = null;
908
- }, 50);
909
- }
910
- function hmrDownload(asset) {
911
- if (asset.type === 'js') {
912
- if (typeof document !== 'undefined') {
913
- let script = document.createElement('script');
914
- script.src = asset.url + '?t=' + Date.now();
915
- if (asset.outputFormat === 'esmodule') script.type = 'module';
916
- return new Promise((resolve, reject)=>{
917
- var _document$head;
918
- script.onload = ()=>resolve(script);
919
- script.onerror = reject;
920
- (_document$head = document.head) === null || _document$head === void 0 || _document$head.appendChild(script);
921
- });
922
- } else if (typeof importScripts === 'function') {
923
- // Worker scripts
924
- if (asset.outputFormat === 'esmodule') return import(asset.url + '?t=' + Date.now());
925
- else return new Promise((resolve, reject)=>{
926
- try {
927
- importScripts(asset.url + '?t=' + Date.now());
928
- resolve();
929
- } catch (err) {
930
- reject(err);
931
- }
932
- });
933
- }
934
- }
935
- }
936
- async function hmrApplyUpdates(assets) {
937
- global.parcelHotUpdate = Object.create(null);
938
- let scriptsToRemove;
939
- try {
940
- // If sourceURL comments aren't supported in eval, we need to load
941
- // the update from the dev server over HTTP so that stack traces
942
- // are correct in errors/logs. This is much slower than eval, so
943
- // we only do it if needed (currently just Safari).
944
- // https://bugs.webkit.org/show_bug.cgi?id=137297
945
- // This path is also taken if a CSP disallows eval.
946
- if (!supportsSourceURL) {
947
- let promises = assets.map((asset)=>{
948
- var _hmrDownload;
949
- return (_hmrDownload = hmrDownload(asset)) === null || _hmrDownload === void 0 ? void 0 : _hmrDownload.catch((err)=>{
950
- // Web extension fix
951
- if (extCtx && extCtx.runtime && extCtx.runtime.getManifest().manifest_version == 3 && typeof ServiceWorkerGlobalScope != 'undefined' && global instanceof ServiceWorkerGlobalScope) {
952
- extCtx.runtime.reload();
953
- return;
954
- }
955
- throw err;
956
- });
957
- });
958
- scriptsToRemove = await Promise.all(promises);
959
- }
960
- assets.forEach(function(asset) {
961
- hmrApply(module.bundle.root, asset);
962
- });
963
- } finally{
964
- delete global.parcelHotUpdate;
965
- if (scriptsToRemove) scriptsToRemove.forEach((script)=>{
966
- if (script) {
967
- var _document$head2;
968
- (_document$head2 = document.head) === null || _document$head2 === void 0 || _document$head2.removeChild(script);
969
- }
970
- });
971
- }
972
- }
973
- function hmrApply(bundle /*: ParcelRequire */ , asset /*: HMRAsset */ ) {
974
- var modules = bundle.modules;
975
- if (!modules) return;
976
- if (asset.type === 'css') reloadCSS();
977
- else if (asset.type === 'js') {
978
- let deps = asset.depsByBundle[bundle.HMR_BUNDLE_ID];
979
- if (deps) {
980
- if (modules[asset.id]) {
981
- // Remove dependencies that are removed and will become orphaned.
982
- // This is necessary so that if the asset is added back again, the cache is gone, and we prevent a full page reload.
983
- let oldDeps = modules[asset.id][1];
984
- for(let dep in oldDeps)if (!deps[dep] || deps[dep] !== oldDeps[dep]) {
985
- let id = oldDeps[dep];
986
- let parents = getParents(module.bundle.root, id);
987
- if (parents.length === 1) hmrDelete(module.bundle.root, id);
988
- }
989
- }
990
- if (supportsSourceURL) // Global eval. We would use `new Function` here but browser
991
- // support for source maps is better with eval.
992
- (0, eval)(asset.output);
993
- // $FlowFixMe
994
- let fn = global.parcelHotUpdate[asset.id];
995
- modules[asset.id] = [
996
- fn,
997
- deps
998
- ];
999
- }
1000
- // Always traverse to the parent bundle, even if we already replaced the asset in this bundle.
1001
- // This is required in case modules are duplicated. We need to ensure all instances have the updated code.
1002
- if (bundle.parent) hmrApply(bundle.parent, asset);
1003
- }
1004
- }
1005
- function hmrDelete(bundle, id) {
1006
- let modules = bundle.modules;
1007
- if (!modules) return;
1008
- if (modules[id]) {
1009
- // Collect dependencies that will become orphaned when this module is deleted.
1010
- let deps = modules[id][1];
1011
- let orphans = [];
1012
- for(let dep in deps){
1013
- let parents = getParents(module.bundle.root, deps[dep]);
1014
- if (parents.length === 1) orphans.push(deps[dep]);
1015
- }
1016
- // Delete the module. This must be done before deleting dependencies in case of circular dependencies.
1017
- delete modules[id];
1018
- delete bundle.cache[id];
1019
- // Now delete the orphans.
1020
- orphans.forEach((id)=>{
1021
- hmrDelete(module.bundle.root, id);
1022
- });
1023
- } else if (bundle.parent) hmrDelete(bundle.parent, id);
1024
- }
1025
- function hmrAcceptCheck(bundle /*: ParcelRequire */ , id /*: string */ , depsByBundle /*: ?{ [string]: { [string]: string } }*/ ) {
1026
- checkedAssets = {};
1027
- if (hmrAcceptCheckOne(bundle, id, depsByBundle)) return true;
1028
- // Traverse parents breadth first. All possible ancestries must accept the HMR update, or we'll reload.
1029
- let parents = getParents(module.bundle.root, id);
1030
- let accepted = false;
1031
- while(parents.length > 0){
1032
- let v = parents.shift();
1033
- let a = hmrAcceptCheckOne(v[0], v[1], null);
1034
- if (a) // If this parent accepts, stop traversing upward, but still consider siblings.
1035
- accepted = true;
1036
- else if (a !== null) {
1037
- // Otherwise, queue the parents in the next level upward.
1038
- let p = getParents(module.bundle.root, v[1]);
1039
- if (p.length === 0) {
1040
- // If there are no parents, then we've reached an entry without accepting. Reload.
1041
- accepted = false;
1042
- break;
1043
- }
1044
- parents.push(...p);
1045
- }
1046
- }
1047
- return accepted;
1048
- }
1049
- function hmrAcceptCheckOne(bundle /*: ParcelRequire */ , id /*: string */ , depsByBundle /*: ?{ [string]: { [string]: string } }*/ ) {
1050
- var modules = bundle.modules;
1051
- if (!modules) return;
1052
- if (depsByBundle && !depsByBundle[bundle.HMR_BUNDLE_ID]) {
1053
- // If we reached the root bundle without finding where the asset should go,
1054
- // there's nothing to do. Mark as "accepted" so we don't reload the page.
1055
- if (!bundle.parent) {
1056
- bundleNotFound = true;
1057
- return true;
1058
- }
1059
- return hmrAcceptCheckOne(bundle.parent, id, depsByBundle);
1060
- }
1061
- if (checkedAssets[id]) return null;
1062
- checkedAssets[id] = true;
1063
- var cached = bundle.cache[id];
1064
- if (!cached) return true;
1065
- assetsToDispose.push([
1066
- bundle,
1067
- id
1068
- ]);
1069
- if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
1070
- assetsToAccept.push([
1071
- bundle,
1072
- id
1073
- ]);
1074
- return true;
1075
- }
1076
- return false;
1077
- }
1078
- function hmrDisposeQueue() {
1079
- // Dispose all old assets.
1080
- for(let i = 0; i < assetsToDispose.length; i++){
1081
- let id = assetsToDispose[i][1];
1082
- if (!disposedAssets[id]) {
1083
- hmrDispose(assetsToDispose[i][0], id);
1084
- disposedAssets[id] = true;
1085
- }
1086
- }
1087
- assetsToDispose = [];
1088
- }
1089
- function hmrDispose(bundle /*: ParcelRequire */ , id /*: string */ ) {
1090
- var cached = bundle.cache[id];
1091
- bundle.hotData[id] = {};
1092
- if (cached && cached.hot) cached.hot.data = bundle.hotData[id];
1093
- if (cached && cached.hot && cached.hot._disposeCallbacks.length) cached.hot._disposeCallbacks.forEach(function(cb) {
1094
- cb(bundle.hotData[id]);
1095
- });
1096
- delete bundle.cache[id];
1097
- }
1098
- function hmrAccept(bundle /*: ParcelRequire */ , id /*: string */ ) {
1099
- // Execute the module.
1100
- bundle(id);
1101
- // Run the accept callbacks in the new version of the module.
1102
- var cached = bundle.cache[id];
1103
- if (cached && cached.hot && cached.hot._acceptCallbacks.length) {
1104
- let assetsToAlsoAccept = [];
1105
- cached.hot._acceptCallbacks.forEach(function(cb) {
1106
- let additionalAssets = cb(function() {
1107
- return getParents(module.bundle.root, id);
1108
- });
1109
- if (Array.isArray(additionalAssets) && additionalAssets.length) assetsToAlsoAccept.push(...additionalAssets);
1110
- });
1111
- if (assetsToAlsoAccept.length) {
1112
- let handled = assetsToAlsoAccept.every(function(a) {
1113
- return hmrAcceptCheck(a[0], a[1]);
1114
- });
1115
- if (!handled) return fullReload();
1116
- hmrDisposeQueue();
1117
- }
1118
- }
1119
- }
1120
-
1121
- },{}],"9grxS":[function(require,module,exports,__globalThis) {
1122
- // Initialize when DOM is ready
1123
- if (document.readyState === 'loading') document.addEventListener('DOMContentLoaded', initDemo);
1124
- else initDemo();
1125
- function initDemo() {
1126
- // Profiles
1127
- const profileBasic = document.querySelector("#profile-basic");
1128
- const profileMulti = document.querySelector("#profile-multi");
1129
- const profileSegments = document.querySelector("#profile-segments");
1130
- const profileFull = document.querySelector("#profile-full");
1131
- const tooltip = document.querySelector("#tooltip");
1132
- // Sample data - single line
1133
- const singleLineBasic = [
1134
- [
1135
- [
1136
- 937484.88,
1137
- 5937783.93,
1138
- 441.26,
1139
- 0
1140
- ],
1141
- [
1142
- 937468.19,
1143
- 5937779.04,
1144
- 441.4,
1145
- 11.86
1146
- ],
1147
- [
1148
- 937455.94,
1149
- 5937775.77,
1150
- 441.61,
1151
- 20.5
1152
- ],
1153
- [
1154
- 937445.92,
1155
- 5937772.51,
1156
- 441.8,
1157
- 27.68
1158
- ],
1159
- [
1160
- 937439.24,
1161
- 5937770.88,
1162
- 441.94,
1163
- 32.36
1164
- ],
1165
- [
1166
- 937432.56,
1167
- 5937769.25,
1168
- 442.1,
1169
- 37.05
1170
- ],
1171
- [
1172
- 937424.77,
1173
- 5937769.25,
1174
- 442.25,
1175
- 42.36
1176
- ],
1177
- [
1178
- 937416.98,
1179
- 5937767.62,
1180
- 442.4,
1181
- 47.79
1182
- ],
1183
- [
1184
- 937398.05,
1185
- 5937767.62,
1186
- 442.97,
1187
- 60.69
1188
- ],
1189
- [
1190
- 937386.92,
1191
- 5937767.62,
1192
- 443.27,
1193
- 68.27
1194
- ],
1195
- [
1196
- 937384.7,
1197
- 5937767.62,
1198
- 443.34,
1199
- 69.79
1200
- ],
1201
- [
1202
- 937369.11,
1203
- 5937769.25,
1204
- 443.7,
1205
- 80.47
1206
- ],
1207
- [
1208
- 937354.64,
1209
- 5937765.98,
1210
- 444.14,
1211
- 90.58
1212
- ],
1213
- [
1214
- 937353.53,
1215
- 5937765.98,
1216
- 444.2,
1217
- 91.34
1218
- ],
1219
- [
1220
- 937355.75,
1221
- 5937754.56,
1222
- 444.69,
1223
- 99.27
1224
- ],
1225
- [
1226
- 937355.75,
1227
- 5937751.3,
1228
- 444.9,
1229
- 101.49
1230
- ],
1231
- [
1232
- 937361.32,
1233
- 5937733.36,
1234
- 445.89,
1235
- 114.3
1236
- ],
1237
- [
1238
- 937366.89,
1239
- 5937705.62,
1240
- 447.4,
1241
- 133.58
1242
- ],
1243
- [
1244
- 937373.56,
1245
- 5937687.68,
1246
- 448.3,
1247
- 146.63
1248
- ],
1249
- [
1250
- 937374.68,
1251
- 5937681.15,
1252
- 448.7,
1253
- 151.14
1254
- ],
1255
- [
1256
- 937373.56,
1257
- 5937679.52,
1258
- 448.79,
1259
- 152.49
1260
- ],
1261
- [
1262
- 937372.45,
1263
- 5937677.89,
1264
- 448.9,
1265
- 153.84
1266
- ],
1267
- [
1268
- 937371.34,
1269
- 5937672.99,
1270
- 449.2,
1271
- 157.26
1272
- ],
1273
- [
1274
- 937365.77,
1275
- 5937668.1,
1276
- 449.36,
1277
- 162.31
1278
- ],
1279
- [
1280
- 937364.66,
1281
- 5937666.47,
1282
- 449.38,
1283
- 163.66
1284
- ],
1285
- [
1286
- 937340.17,
1287
- 5937656.68,
1288
- 449.4,
1289
- 181.63
1290
- ],
1291
- [
1292
- 937330.15,
1293
- 5937651.78,
1294
- 449.3,
1295
- 189.23
1296
- ],
1297
- [
1298
- 937324.58,
1299
- 5937648.52,
1300
- 449.3,
1301
- 193.63
1302
- ],
1303
- [
1304
- 937311.23,
1305
- 5937640.36,
1306
- 449.09,
1307
- 204.3
1308
- ],
1309
- [
1310
- 937306.77,
1311
- 5937637.1,
1312
- 449,
1313
- 208.06
1314
- ],
1315
- [
1316
- 937304.55,
1317
- 5937633.84,
1318
- 448.99,
1319
- 210.75
1320
- ],
1321
- [
1322
- 937303.43,
1323
- 5937632.21,
1324
- 448.97,
1325
- 212.1
1326
- ],
1327
- [
1328
- 937302.32,
1329
- 5937630.58,
1330
- 448.9,
1331
- 213.44
1332
- ],
1333
- [
1334
- 937296.75,
1335
- 5937622.42,
1336
- 448.85,
1337
- 220.17
1338
- ],
1339
- [
1340
- 937294.53,
1341
- 5937619.16,
1342
- 448.8,
1343
- 222.87
1344
- ],
1345
- [
1346
- 937290.07,
1347
- 5937611,
1348
- 448.7,
1349
- 229.2
1350
- ],
1351
- [
1352
- 937277.83,
1353
- 5937591.42,
1354
- 448.4,
1355
- 244.94
1356
- ],
1357
- [
1358
- 937273.38,
1359
- 5937581.63,
1360
- 448.31,
1361
- 252.27
1362
- ],
1363
- [
1364
- 937267.81,
1365
- 5937571.84,
1366
- 448.21,
1367
- 259.94
1368
- ],
1369
- [
1370
- 937266.7,
1371
- 5937568.58,
1372
- 448.1,
1373
- 262.29
1374
- ],
1375
- [
1376
- 937265.58,
1377
- 5937568.58,
1378
- 448.16,
1379
- 263.05
1380
- ],
1381
- [
1382
- 937263.36,
1383
- 5937563.69,
1384
- 448.1,
1385
- 266.72
1386
- ],
1387
- [
1388
- 937258.91,
1389
- 5937558.79,
1390
- 448.1,
1391
- 271.23
1392
- ],
1393
- [
1394
- 937255.57,
1395
- 5937555.53,
1396
- 448.1,
1397
- 274.41
1398
- ],
1399
- [
1400
- 937252.23,
1401
- 5937550.64,
1402
- 448.04,
1403
- 278.45
1404
- ],
1405
- [
1406
- 937250,
1407
- 5937549,
1408
- 448,
1409
- 280.33
1410
- ],
1411
- [
1412
- 937241.09,
1413
- 5937540.85,
1414
- 448,
1415
- 288.56
1416
- ],
1417
- [
1418
- 937233.3,
1419
- 5937537.58,
1420
- 448,
1421
- 294.32
1422
- ],
1423
- [
1424
- 937223.28,
1425
- 5937532.69,
1426
- 448.1,
1427
- 301.92
1428
- ],
1429
- [
1430
- 937186.55,
1431
- 5937521.27,
1432
- 448.5,
1433
- 328.14
1434
- ],
1435
- [
1436
- 937138.68,
1437
- 5937503.33,
1438
- 449,
1439
- 362.98
1440
- ],
1441
- [
1442
- 937129.77,
1443
- 5937500.06,
1444
- 449.1,
1445
- 369.45
1446
- ],
1447
- [
1448
- 937121.98,
1449
- 5937496.8,
1450
- 449.2,
1451
- 375.21
1452
- ],
1453
- [
1454
- 937111.96,
1455
- 5937491.91,
1456
- 449.3,
1457
- 382.81
1458
- ],
1459
- [
1460
- 937107.51,
1461
- 5937488.64,
1462
- 449.4,
1463
- 386.57
1464
- ],
1465
- [
1466
- 937100.83,
1467
- 5937485.38,
1468
- 449.45,
1469
- 391.63
1470
- ],
1471
- [
1472
- 937088.59,
1473
- 5937480.49,
1474
- 449.6,
1475
- 400.62
1476
- ],
1477
- [
1478
- 937070.78,
1479
- 5937470.7,
1480
- 449.77,
1481
- 414.48
1482
- ],
1483
- [
1484
- 937040.72,
1485
- 5937452.75,
1486
- 450.1,
1487
- 438.34
1488
- ],
1489
- [
1490
- 937028.47,
1491
- 5937446.23,
1492
- 450.29,
1493
- 447.79
1494
- ],
1495
- [
1496
- 937026.25,
1497
- 5937446.23,
1498
- 450.3,
1499
- 449.31
1500
- ],
1501
- [
1502
- 937025.13,
1503
- 5937444.6,
1504
- 450.33,
1505
- 450.66
1506
- ],
1507
- [
1508
- 937011.78,
1509
- 5937436.44,
1510
- 450.6,
1511
- 461.32
1512
- ],
1513
- [
1514
- 936958.34,
1515
- 5937411.97,
1516
- 452.69,
1517
- 501.38
1518
- ],
1519
- [
1520
- 936912.7,
1521
- 5937390.76,
1522
- 454.35,
1523
- 535.69
1524
- ],
1525
- [
1526
- 936853.7,
1527
- 5937361.39,
1528
- 456.72,
1529
- 580.61
1530
- ],
1531
- [
1532
- 936847.02,
1533
- 5937358.13,
1534
- 456.9,
1535
- 585.67
1536
- ],
1537
- [
1538
- 936839.23,
1539
- 5937354.87,
1540
- 457.2,
1541
- 591.43
1542
- ],
1543
- [
1544
- 936832.55,
1545
- 5937348.34,
1546
- 457.41,
1547
- 597.79
1548
- ],
1549
- [
1550
- 936829.21,
1551
- 5937343.45,
1552
- 457.49,
1553
- 601.83
1554
- ],
1555
- [
1556
- 936823.65,
1557
- 5937346.71,
1558
- 457.3,
1559
- 606.23
1560
- ],
1561
- [
1562
- 936816.97,
1563
- 5937348.34,
1564
- 457.31,
1565
- 610.92
1566
- ],
1567
- [
1568
- 936805.84,
1569
- 5937353.24,
1570
- 457.25,
1571
- 619.21
1572
- ],
1573
- [
1574
- 936802.5,
1575
- 5937354.87,
1576
- 457.2,
1577
- 621.74
1578
- ],
1579
- [
1580
- 936800.27,
1581
- 5937358.13,
1582
- 457.1,
1583
- 624.43
1584
- ],
1585
- [
1586
- 936793.59,
1587
- 5937353.24,
1588
- 457.2,
1589
- 630.08
1590
- ],
1591
- [
1592
- 936789.14,
1593
- 5937349.98,
1594
- 457.3,
1595
- 633.84
1596
- ],
1597
- [
1598
- 936785.8,
1599
- 5937349.98,
1600
- 457.31,
1601
- 636.11
1602
- ],
1603
- [
1604
- 936773.55,
1605
- 5937348.34,
1606
- 457.4,
1607
- 644.53
1608
- ],
1609
- [
1610
- 936747.95,
1611
- 5937345.08,
1612
- 457.6,
1613
- 662.13
1614
- ],
1615
- [
1616
- 936688.95,
1617
- 5937341.82,
1618
- 458.9,
1619
- 702.4
1620
- ],
1621
- [
1622
- 936667.8,
1623
- 5937338.56,
1624
- 459.3,
1625
- 716.99
1626
- ],
1627
- [
1628
- 936648.87,
1629
- 5937336.92,
1630
- 459.6,
1631
- 729.94
1632
- ],
1633
- [
1634
- 936622.16,
1635
- 5937335.29,
1636
- 460.03,
1637
- 748.18
1638
- ],
1639
- [
1640
- 936608.8,
1641
- 5937332.03,
1642
- 460.3,
1643
- 757.55
1644
- ],
1645
- [
1646
- 936594.33,
1647
- 5937328.77,
1648
- 460.6,
1649
- 767.66
1650
- ],
1651
- [
1652
- 936584.31,
1653
- 5937327.14,
1654
- 460.74,
1655
- 774.58
1656
- ],
1657
- [
1658
- 936580.97,
1659
- 5937325.5,
1660
- 460.8,
1661
- 777.12
1662
- ],
1663
- [
1664
- 936564.27,
1665
- 5937318.98,
1666
- 461.21,
1667
- 789.34
1668
- ],
1669
- [
1670
- 936569.84,
1671
- 5937314.09,
1672
- 461.41,
1673
- 794.39
1674
- ],
1675
- [
1676
- 936578.74,
1677
- 5937315.72,
1678
- 462.42,
1679
- 800.56
1680
- ],
1681
- [
1682
- 936579.86,
1683
- 5937315.72,
1684
- 462.48,
1685
- 801.32
1686
- ],
1687
- [
1688
- 936582.08,
1689
- 5937301.03,
1690
- 464.37,
1691
- 811.44
1692
- ]
1693
- ]
1694
- ];
1695
- // Multi-line data (two separate trails with a gap representing a ferry/bus connection)
1696
- const multiLineData = [
1697
- [
1698
- [
1699
- 750639.57,
1700
- 5908792.26,
1701
- 442.5,
1702
- 0
1703
- ],
1704
- [
1705
- 750609.52,
1706
- 5908759.74,
1707
- 444.2,
1708
- 45
1709
- ],
1710
- [
1711
- 750591.7,
1712
- 5908741.85,
1713
- 445.8,
1714
- 85
1715
- ],
1716
- [
1717
- 750566.1,
1718
- 5908719.09,
1719
- 447.3,
1720
- 125
1721
- ],
1722
- [
1723
- 750539.38,
1724
- 5908697.95,
1725
- 448.9,
1726
- 165
1727
- ],
1728
- [
1729
- 750507.1,
1730
- 5908673.56,
1731
- 450.1,
1732
- 205
1733
- ],
1734
- [
1735
- 750460.35,
1736
- 5908639.41,
1737
- 451.8,
1738
- 260
1739
- ],
1740
- [
1741
- 750429.18,
1742
- 5908618.28,
1743
- 452.5,
1744
- 300
1745
- ],
1746
- [
1747
- 750379.08,
1748
- 5908582.5,
1749
- 453.2,
1750
- 360
1751
- ],
1752
- [
1753
- 750297.82,
1754
- 5908527.22,
1755
- 454.0,
1756
- 450
1757
- ]
1758
- ],
1759
- [
1760
- [
1761
- 747569.38,
1762
- 5908385.76,
1763
- 465.5,
1764
- 650
1765
- ],
1766
- [
1767
- 747587.19,
1768
- 5908366.25,
1769
- 466.8,
1770
- 690
1771
- ],
1772
- [
1773
- 747660.66,
1774
- 5908288.2,
1775
- 468.2,
1776
- 780
1777
- ],
1778
- [
1779
- 747686.27,
1780
- 5908260.56,
1781
- 469.5,
1782
- 820
1783
- ],
1784
- [
1785
- 747700.74,
1786
- 5908244.3,
1787
- 470.3,
1788
- 850
1789
- ],
1790
- [
1791
- 747737.47,
1792
- 5908205.28,
1793
- 471.8,
1794
- 910
1795
- ],
1796
- [
1797
- 747767.53,
1798
- 5908171.13,
1799
- 473.2,
1800
- 960
1801
- ],
1802
- [
1803
- 747785.34,
1804
- 5908150,
1805
- 474.5,
1806
- 995
1807
- ],
1808
- [
1809
- 747798.7,
1810
- 5908132.11,
1811
- 475.8,
1812
- 1025
1813
- ],
1814
- [
1815
- 747802.04,
1816
- 5908125.61,
1817
- 476.4,
1818
- 1045
1819
- ]
1820
- ]
1821
- ];
1822
- // Load all examples immediately
1823
- profileBasic.lines = singleLineBasic;
1824
- profileMulti.lines = multiLineData;
1825
- profileSegments.lines = singleLineBasic;
1826
- profileSegments.lineSegments = [
1827
- [
1828
- 0,
1829
- 37,
1830
- "paved"
1831
- ],
1832
- [
1833
- 37,
1834
- 38,
1835
- "tunnel"
1836
- ],
1837
- [
1838
- 38,
1839
- 70,
1840
- "paved"
1841
- ],
1842
- [
1843
- 70,
1844
- 80,
1845
- "stairs"
1846
- ],
1847
- [
1848
- 80,
1849
- 95,
1850
- "unpaved"
1851
- ]
1852
- ];
1853
- profileFull.lines = multiLineData;
1854
- profileFull.lineSegments = [
1855
- [
1856
- 0,
1857
- 5,
1858
- "paved"
1859
- ],
1860
- [
1861
- 5,
1862
- 8,
1863
- "aboveground"
1864
- ],
1865
- [
1866
- 8,
1867
- 9,
1868
- "unpaved"
1869
- ],
1870
- [
1871
- 11,
1872
- 15,
1873
- "paved"
1874
- ],
1875
- [
1876
- 15,
1877
- 20,
1878
- "unpaved"
1879
- ]
1880
- ];
1881
- profileFull.xAxisSegments = [
1882
- [
1883
- 0,
1884
- 7,
1885
- "other"
1886
- ],
1887
- [
1888
- 7,
1889
- 9,
1890
- "wanderweg"
1891
- ],
1892
- [
1893
- 11,
1894
- 16,
1895
- "other"
1896
- ],
1897
- [
1898
- 16,
1899
- 20,
1900
- "wanderweg"
1901
- ]
1902
- ];
1903
- // Export SVG button handler
1904
- const exportBtn = document.querySelector("#export-svg");
1905
- if (exportBtn) exportBtn.addEventListener("click", ()=>{
1906
- const svg = profileFull.innerHTML;
1907
- const blob = new Blob([
1908
- svg
1909
- ], {
1910
- type: "image/svg+xml"
1911
- });
1912
- const url = URL.createObjectURL(blob);
1913
- const a = document.createElement("a");
1914
- a.href = url;
1915
- a.download = "elevation-profile.svg";
1916
- a.click();
1917
- URL.revokeObjectURL(url);
1918
- });
1919
- // Event handlers for all profiles
1920
- const profiles = [
1921
- profileBasic,
1922
- profileMulti,
1923
- profileSegments,
1924
- profileFull
1925
- ];
1926
- profiles.forEach((profile)=>{
1927
- profile.addEventListener("over", (event)=>{
1928
- const rect = profile.getBoundingClientRect();
1929
- const absoluteX = rect.left + event.detail.position.x + window.scrollX;
1930
- const absoluteY = rect.top + event.detail.position.y + window.scrollY;
1931
- // Format all available data
1932
- const data = event.detail;
1933
- const coord = data.coordinate;
1934
- let tooltipText = `Elevation: ${coord[2]} m\n`;
1935
- tooltipText += `Distance: ${coord[3]} m\n`;
1936
- tooltipText += `X: ${coord[0].toFixed(2)}\n`;
1937
- tooltipText += `Y: ${coord[1].toFixed(2)}`;
1938
- // Add segment information if available
1939
- if (data.segments) {
1940
- if (data.segments.line !== null) tooltipText += `\nLine Segment: ${data.segments.line}`;
1941
- if (data.segments.xAxis !== null) tooltipText += `\nTrail: ${data.segments.xAxis}`;
1942
- }
1943
- tooltip.style.display = "block";
1944
- tooltip.textContent = tooltipText;
1945
- tooltip.style.left = `${absoluteX}px`;
1946
- tooltip.style.top = `${absoluteY}px`;
1947
- });
1948
- profile.addEventListener("out", ()=>{
1949
- tooltip.style.display = "none";
1950
- });
1951
- });
1952
- }
1953
-
1954
- },{}]},["jRR65","9grxS"], "9grxS", "parcelRequire7b5f", {})
1955
-
1956
- </script>
1957
-
1958
-
1959
- </body></html>