-
-
Notifications
You must be signed in to change notification settings - Fork 101
/
about.html
639 lines (628 loc) · 52.9 KB
/
about.html
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
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
398
399
400
401
402
403
404
405
406
407
408
409
410
411
412
413
414
415
416
417
418
419
420
421
422
423
424
425
426
427
428
429
430
431
432
433
434
435
436
437
438
439
440
441
442
443
444
445
446
447
448
449
450
451
452
453
454
455
456
457
458
459
460
461
462
463
464
465
466
467
468
469
470
471
472
473
474
475
476
477
478
479
480
481
482
483
484
485
486
487
488
489
490
491
492
493
494
495
496
497
498
499
500
501
502
503
504
505
506
507
508
509
510
511
512
513
514
515
516
517
518
519
520
521
522
523
524
525
526
527
528
529
530
531
532
533
534
535
536
537
538
539
540
541
542
543
544
545
546
547
548
549
550
551
552
553
554
555
556
557
558
559
560
561
562
563
564
565
566
567
568
569
570
571
572
573
574
575
576
577
578
579
580
581
582
583
584
585
586
587
588
589
590
591
592
593
594
595
596
597
598
599
600
601
602
603
604
605
606
607
608
609
610
611
612
613
614
615
616
617
618
619
620
621
622
623
624
625
626
627
628
629
630
631
632
633
634
635
636
637
638
639
<!DOCTYPE html>
<html lang="en">
<head>
<!-- ADD_LANGUAGE -->
<link rel="alternate" hreflang="x-default" href="https://gpx.studio/about.html"/>
<link rel="alternate" hreflang="en" href="https://gpx.studio/about.html"/>
<link rel="alternate" hreflang="de" href="https://gpx.studio/l/de/about.html"/>
<link rel="alternate" hreflang="es" href="https://gpx.studio/l/es/about.html"/>
<link rel="alternate" hreflang="fr" href="https://gpx.studio/l/fr/about.html"/>
<link rel="alternate" hreflang="it" href="https://gpx.studio/l/it/about.html"/>
<link rel="alternate" hreflang="nl" href="https://gpx.studio/l/nl/about.html"/>
<link rel="alternate" hreflang="no" href="https://gpx.studio/l/no/about.html"/>
<link rel="alternate" hreflang="pt" href="https://gpx.studio/l/pt/about.html"/>
<link rel="alternate" hreflang="ru" href="https://gpx.studio/l/ru/about.html"/>
<link rel="alternate" hreflang="hu" href="https://gpx.studio/l/hu/about.html"/>
<link rel="alternate" hreflang="pl" href="https://gpx.studio/l/pl/about.html"/>
<link rel="alternate" hreflang="sv" href="https://gpx.studio/l/sv/about.html"/>
<link rel="alternate" hreflang="ca" href="https://gpx.studio/l/ca/about.html"/>
<link rel="alternate" hreflang="cs" href="https://gpx.studio/l/cs/about.html"/>
<link rel="alternate" hreflang="zh" href="https://gpx.studio/l/zh/about.html"/>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0">
<title>gpx.studio — about</title>
<meta name="description" content="View, edit and create GPX files online: add, move and delete points, merge multiple files, reverse, add timestamps, edit waypoints and more!">
<meta property="og:title" content="gpx.studio — the online GPX file editor" />
<meta property="og:description" content="View, edit and create GPX files online: add, move and delete points, merge multiple files, reverse, add timestamps, edit waypoints and more!" />
<meta property="og:type" content="website" />
<meta property="og:url" content="https://gpx.studio" />
<meta property="og:image" content="https://gpx.studio/res/og_logo.png" />
<meta name="twitter:card" content="summary_large_image">
<script type="application/ld+json">
{
"@context" : "http://schema.org",
"@type" : "WebApplication",
"name" : "gpx.studio",
"alternateName": "gpx.studio — the online GPX file editor",
"description": "View, edit and create GPX files online: add, move and delete points, merge multiple files, reverse, add timestamps, edit waypoints and more!",
"applicationCategory": "Tool, Editor",
"url" : "https://gpx.studio",
"sameAs" : [
"https://www.facebook.com/gpx.studio"
],
"screenshot": "https://gpx.studio/res/preview.png",
"genre": "outdoors",
"keywords": "gpx, gps, file, viewer, editor, merge, reverse, timestamps, waypoints, segments",
"browserRequirements": "Requires JavaScript. Requires HTML5.",
"softwareHelp": {
"@type": "CreativeWork",
"url": "https://gpx.studio/about.html"
},
"operatingSystem": "All",
"featureList": "edit gpx files online, view gpx files online, merge gpx files online, reverse gpx file online, add timestamps to gpx file online, extract track segments, view and add waypoints gpx file online"
}
</script>
<link rel="icon" href="/res/favicon.png">
<link rel="stylesheet" type="text/css" href="/res/about.css">
<link rel="stylesheet" href="/include/fontawesome/css/fontawesome.min.css"/>
<link rel="stylesheet" href="/include/fontawesome/css/brands.min.css"/>
<link rel="stylesheet" href="/include/fontawesome/css/regular.min.css"/>
<link rel="stylesheet" href="/include/fontawesome/css/solid.min.css"/>
<script src="/js/lang.js"></script>
</head>
<body>
<div id="nav-container">
<div id="burger-container">
<div id="burger"><i class="fa-solid fa-bars"></i></div>
<div id="logo"><img src="/res/logo.png"></div>
</div>
<div id="nav-top">
<div id="nav-top-content">
<div><a href="./" class="my-anchor"><i class="fas fa-map-marked-alt"></i> <b>Go to the app</b></a></div>
<div><a href="#about" class="my-anchor">About</a></div>
<div><a href="#support" class="my-anchor">Support</a></div>
<div><a href="#funding" class="my-anchor">Funding</a></div>
<div><a href="#translation" class="my-anchor">Translation</a></div>
<div><a href="#guide" class="my-anchor">User Guide</a></div>
<div><a href="#embed" class="my-anchor">Embedding</a></div>
<div><a href="#terms" class="my-anchor">Terms of Service</a></div>
<div><a href="#privacy" class="my-anchor">Privacy Policy</a></div>
</div>
</div>
<div id="nav-bot">
<div id="nav-bot-content">
<!-- ADD_LANGUAGE -->
<div id="languages">
<select id="language-input">
<option value="ca">Català</option>
<option value="cs">Čeština</option>
<option value="de">Deutsch</option>
<option value="en">English</option>
<option value="es">Español</option>
<option value="fr">Français</option>
<option value="it">Italiano</option>
<option value="hu">Magyar</option>
<option value="nl">Nederlands</option>
<option value="no">Norsk</option>
<option value="pl">Polski</option>
<option value="pt">Português</option>
<option value="ru">Русский язык</option>
<option value="sv">Svenska</option>
<option value="zh">简体中文</option>
</select>
</div>
<div id="social">
<a href="https://facebook.com/gpx.studio" target="_blank"><i class="fab fa-facebook fa-lg"></i></a>
<a href="https://twitter.com/gpxstudio" target="_blank"><i class="fab fa-twitter fa-lg"></i></a>
<a href="https://github.com/gpxstudio/gpxstudio.github.io" target="_blank"><i class="fab fa-github fa-lg"></i></a>
<a href="mailto:[email protected]"><i class="fas fa-envelope fa-lg"></i></a>
</div>
</div>
</div>
</div>
<div id="body-container">
<a name="about"></a>
<div class="block">
<h1>About 🚴</h1>
<div>
<a href="./"><b>gpx.studio</b></a> is a free online GPX viewer and editor which allows to:
<ul>
<li>visualize multiple traces in different colors and aided by many different maps (cycling, hiking, satellite, etc)</li>
<li>edit traces by adding, inserting, moving or deleting track points</li>
<li>reverse traces</li>
<li>add or change the timestamps of a trace</li>
<li>view, add, edit and remove waypoints</li>
<li>reduce the number of track points</li>
<li>view and rework the structure of the file</li>
<li>automatically add elevation data to traces if missing</li>
<li>merge multiple traces, extending time, heart rate, cadence, power and temperature data where needed</li>
<li>extract segments from traces and perform any other action while maintaining the segments' structure within files</li>
<li>save the result on your computer or to your Google Drive™ to get a shareable link and embedding code</li>
</ul>
It is a one-person side project created after messing with GPX files for some time. The project source code is publicly available on <a href="https://github.com/gpxstudio/gpxstudio.github.io" target="_blank">GitHub</a>. Follow us on <a href="https://facebook.com/gpx.studio" target="_blank">Facebook</a> and <a href="https://twitter.com/gpxstudio" target="_blank">Twitter</a> to be notified about updates of the tool.
</div>
<a name="mapbox"></a><h2>Mapbox Community 🤝<a href="https://www.mapbox.com/" target="_blank"><img src="/res/mapbox.svg" style="height: 40px; vertical-align: bottom; float: right;"></a></h2>
<div>
<a href="https://www.mapbox.com/" target="_blank">Mapbox</a> is the company providing some of the beautiful maps on this website.
They created a program called <a href="https://www.mapbox.com/community/" target="_blank">Mapbox Community</a> to support non-profits, educational institutions, and positive-impact organizations (see the <a href="https://www.mapbox.com/community/" target="_blank"> official page</a> where they showcase some of their collaborations). We are <b>very lucky</b> to have joined this program and to benefit from a great discount on all API rates.<br><br>
I am (and all users of the website can be) very grateful for their support and availability.
</div>
</div>
<div class="block">
<a name="support"></a><h1>Support 💬</h1>
<div>
The <span class="button">Help</span> dialog and the <a href="#guide">User Guide</a> should answer most questions about the functionalities, but feel free to ask for help, report any issues or send suggestions on the <a href="https://facebook.com/gpx.studio" target="_blank">Facebook</a> or <a href="https://twitter.com/gpxstudio" target="_blank">Twitter</a> page, or by email at <a href="mailto:[email protected]">[email protected]</a>.<br><br>
For developers, the <a href="https://github.com/gpxstudio/gpxstudio.github.io" target="_blank">Github repository</a> is also a good place to report issues or share ideas.
</div>
</div>
<div class="block">
<a name="funding"></a><h1>Help keep the website free (and ad-free) 🙏</h1>
<div>
Each time you add or move a track point, we make a request to our servers to retrieve a route on the road network.
We also rely on APIs from <a href="https://www.mapbox.com/" target="_blank">Mapbox</a> to load beautiful maps, retrieve elevation data and process geocoding requests (looking for a place in the search bar).<br><br>
Unfortunately this is very costly so if you like the tool and use it frequently, please consider making even a small donation so that this website can stay <b>free to use</b> and <b>ad-free</b>. Thanks for your support!<br><br>
<div style="text-align: center;"><script type='text/javascript' src='https://ko-fi.com/widgets/widget_2.js'></script><script type='text/javascript'>kofiwidget2.init('Support gpx.studio on Ko-fi', '#29abe0', 'F1F1303GH');kofiwidget2.draw();</script></div>
</div>
</div>
<div class="block">
<a name="translation"></a><h1>Translation 🗣️</h1>
<div>
The website is translated by volunteers on a collaborative translation platform.
You can help complete and improve the translations by joining the <a href="https://crowdin.com/project/gpxstudio">Crowdin project</a>.
Get in touch on <a href="https://facebook.com/gpx.studio" target="_blank">Facebook</a>, <a href="https://twitter.com/gpxstudio" target="_blank">Twitter</a>, by <a href="mailto:[email protected]">email</a> or on <a href="https://github.com/gpxstudio/gpxstudio.github.io" target="_blank">GitHub</a> if you would like to start the translation in a new language.
Apart from a good understanding of <b>gpx.studio</b>, some basic knowledge of HTML can be useful. Any help is greatly appreciated!
</div>
</div>
<div class="block">
<a name="guide"></a><h1>User Guide 🎓</h1>
<div class="guide">
Click on a topic to learn more!<br><br>
<div class="guide-item"><a name="create-file" href="#create-file" class="my-anchor"><div class="guide-title" onclick="toggle('create')">Create a new GPX file</div></a>
<div id="create" class="guide-content">
<ol>
<li>In the top toolbar, click on <span class="button">New GPX</span>. A new tab called "new" appears above the bottom panel.</li>
<li>Place anchor points on the map by clicking at the locations you want to go through.</li>
<li>
If routing is enabled, select the appropriate activity type in order to take the most suitable roads.
Disabling the routing will allow you to draw straight lines freely on the map.
</li>
<li>You can drag a point or the line itself to re-route the trace through a new location.</li>
<li>If you make a mistake or change your mind about the itinerary, you can:
<ul>
<li>use the undo <i class="fas fa-reply button"></i> and redo <i class="fas fa-share button"></i> buttons.</li>
<li>click on an anchor point and use <span class="button"><i class="fas fa-trash-alt"></i> <span>Remove point</span></span> to remove it, or simply Shift+click on it.</li>
</ul>
</li>
</ol>
</div></div>
<div class="guide-item"><a name="load-file" href="#load-file" class="my-anchor"><div class="guide-title" onclick="toggle('load')">Load existing GPX files</div></a>
<div id="load" class="guide-content">There are two options:
<ul>
<li>Click on <span class="button">Load</span> and select one or more GPX files to load.</li>
<li>Drag and drop GPX files in the window.</li>
</ul>
</div></div>
<div class="guide-item"><a name="export-file" href="#export-file" class="my-anchor"><div class="guide-title" onclick="toggle('export')">Export GPX files</div></a>
<div id="export" class="guide-content">
There are two options:
<ul>
<li>Click on <span class="button">Export</span> and then choose whether to:
<ul>
<li>merge all open GPX files as tracks into one file, or export them separately.</li>
<li>include time, temperature, heartrate, cadence, power and surface data or not.</li>
</ul>
Then, click on <span class="button">Download <i class="fas fa-download"></i></span> to download the files on your computer or on <span class="button">Save to Google Drive</span> to save it in the cloud.
</li>
<li>Drag and drop a tab (below the bottom panel) onto your desktop.</li>
</ul>
</div></div>
<div class="guide-item"><a name="share-file" href="#share-file" class="my-anchor"><div class="guide-title" onclick="toggle('share')">Share a GPX file</div></a>
<div id="share" class="guide-content"><b>gpx.studio</b> does not provide GPX file hosting. However, it integrates smoothly with Google Drive.
To share GPX files:
<ol>
<li>Click on <span class="button">Export</span> and then choose whether to:
<ul>
<li>merge all open GPX files as tracks into one file, or export them separately.</li>
<li>include time, temperature, heartrate, cadence, power and surface data or not.</li>
</ul>
</li>
<li>Click on <span class="button">Save to Google Drive</span>.</li>
<li>Connect to your Google account.</li>
<li>Select the folder where you want to save the files.</li>
<li>When the files are uploaded, click on <span class="button">Copy link <i class="fas fa-link"></i></span> and send it to your friends!</li>
</ol>
If you want to use <b>gpx.studio</b> to open GPX files stored on your Google Drive, you can install the <a href="https://gsuite.google.com/marketplace/app/gpxstudio_the_online_gpx_editor/666808960580" target="_blank">Google Drive Add-on</a>.
</div></div>
<div class="guide-item"><a name="edit-track-points" href="#edit-track-points" class="my-anchor"><div class="guide-title" onclick="toggle('edit-track')">Edit the track points of a GPX file</div></a>
<div id="edit-track" class="guide-content">Click on <i class="fas fa-pencil-alt button"></i> to enter the edition mode. Depending on the zoom level, a set of anchor points appears. The more you zoom in, the more anchor points appear.<br>You can then:
<ul>
<li>add track points at the end of the trace by clicking on the map at the locations you want to go through.</li>
<li>drag an anchor point or the line itself to re-route the trace through a new location.</li>
<li>click on an anchor point and use <span class="button"><i class="fas fa-trash-alt"></i> <span>Remove point</span></span> to remove it, or simply Shift+click on it.</li>
<li>click on an anchor point or on the line and use <span class="button"><i class="fas fa-cut"></i> <span>Split here</span></span> to split the trace at a chosen location.</li>
<li>click on an anchor point or on the line and use <span class="button"><i class="fas fa-undo"></i> <span>Start loop here</span></span> to make the loop start at a chosen location.</li>
</ul>
If you make a mistake or change your mind about the itinerary, use the undo <i class="fas fa-reply button"></i> and redo <i class="fas fa-share button"></i> buttons.<br><br>
If routing is enabled, select the appropriate activity type in order to take the most suitable roads.
Disabling the routing will allow you to draw straight lines freely on the map.<br><br>
If you edit a GPX file containing time, temperature, heartrate, cadence or power data, new track points will automatically contain the average value for each of those fields.
</div></div>
<div class="guide-item"><a name="crop-file" href="#crop-file" class="my-anchor"><div class="guide-title" onclick="toggle('crop')">Crop a GPX file</div></a>
<div id="crop" class="guide-content">There are three options:
<ul>
<li>Use the slider in the bottom panel to move the start and end points of the trace. Click on <i class="fas fa-check button"></i> to validate the selection. You can choose whether you want to keep cropped parts in separate files.</li>
<li>Enter the edition mode by clicking on <i class="fas fa-pencil-alt button"></i>. Then, click on an anchor point or on the line and use <span class="button"><i class="fas fa-cut"></i> <span>Split here</span></span> to split the trace at a chosen location.</li>
<li>Click on <i class="fas fa-vector-square button"></i> and select an area containing the track points you want to keep or delete. Uncheck the box <i class="far fa-check-square"></i> Waypoints if you do not want to remove waypoints at the same time. Then, choose whether you want to delete track points inside or outside of the selection. Finally, click on <span class="button">Proceed</span>.</li>
</ul>
</div></div>
<div class="guide-item"><a name="split-file" href="#split-file" class="my-anchor"><div class="guide-title" onclick="toggle('split')">Split a GPX file</div></a>
<div id="split" class="guide-content">There are two options:
<ul>
<li>Use the slider in the bottom panel to move the start and end points of the trace. Click on <i class="fas fa-check button"></i> to validate the selection. Check the box <i class="far fa-check-square"></i> Keep cropped parts in new files and then click on <span class="button">Proceed</span>.</li>
<li>Enter the edition mode by clicking on <i class="fas fa-pencil-alt button"></i>. Then, click on an anchor point or on the line and use <span class="button"><i class="fas fa-cut"></i> <span>Split here</span></span> to split the trace at a chosen location.</li>
</ul>
</div></div>
<div class="guide-item"><a name="change-start-loop" href="#change-start-loop" class="my-anchor"><div class="guide-title" onclick="toggle('change-start')">Change the starting point of a loop</div></a>
<div id="change-start" class="guide-content">
Enter the edition mode by clicking on <i class="fas fa-pencil-alt button"></i>. Then, click on an anchor point or on the line and use <span class="button"><i class="fas fa-undo"></i> <span>Start loop here</span></span> to make the loop start at a chosen location.</li>
</div></div>
<div class="guide-item"><a name="add-timestamps" href="#add-timestamps" class="my-anchor"><div class="guide-title" onclick="toggle('timestamps')">Add timestamps to a GPX file</div></a>
<div id="timestamps" class="guide-content">
<ol>
<li>Click on <i class="fas fa-stopwatch button"></i>.</li>
<li>Enter the average speed.</li>
<li>Select the start time.</li>
<li>Click on <span class="button">Ok</span>.</li>
</ol>
If the GPX file has no timestamps, a constant speed is applied to the whole GPX file by default. You can check the box <i class="far fa-check-square"></i> Experimental to generate timestamps which make the speed vary depending on the slope.<br>
If the GPX file already has timestamps, they will be shifted and compressed to match the chosen speed and start time.
</div></div>
<div class="guide-item"><a name="change-date" href="#change-date" class="my-anchor"><div class="guide-title" onclick="toggle('date')">Change the date of a GPX file</div></a>
<div id="date" class="guide-content">
<ol>
<li>Click on <i class="fas fa-stopwatch button"></i>.</li>
<li>Change the start time.</li>
<li>Click on <span class="button">Ok</span>.</li>
</ol>
</div></div>
<div class="guide-item"><a name="change-speed" href="#change-speed" class="my-anchor"><div class="guide-title" onclick="toggle('speed')">Change the speed of a GPX file</div></a>
<div id="speed" class="guide-content">
<ol>
<li>Click on <i class="fas fa-stopwatch button"></i>.</li>
<li>Change the average speed.</li>
<li>Click on <span class="button">Ok</span>.</li>
</ol>
If the GPX file has no timestamps, a constant speed is applied to the whole GPX file by default. You can check the box <i class="far fa-check-square"></i> Experimental to generate timestamps which make the speed vary depending on the slope.<br>
If the GPX file already has timestamps, they will be shifted and compressed to match the chosen speed and start time.
</div></div>
<div class="guide-item"><a name="merge-files" href="#merge-files" class="my-anchor"><div class="guide-title" onclick="toggle('merge')">Merge multiple GPX files</div></a>
<div id="merge" class="guide-content">
To merge two GPX files:
<ol>
<li>Below the bottom panel, select the tab of the first GPX file you want to merge.</li>
<li>Click on <i class="fas fa-plus-circle button"></i> (available only when more than two files are open).</li>
<li>Click on the tab of the second GPX file to merge or on the trace itself. The track points of the second GPX file will come after those of the first GPX file.</li>
</ol>
You can also use the file structure tool:
<ol>
<li>Below the bottom panel, select the tab of the first GPX file you want to merge.</li>
<li>Click on <i class="fas fa-folder-tree button"></i>.</li>
<li>Drag the tab of the file you wish to merge into the first one and drop it in the file structure.</li>
</ol>
If you want to merge all open GPX files at once:
<ol>
<li>Below the bottom panel, put the tabs in the order you want them to appear in the merged GPX file.</li>
<li>Click on <span class="button">Export</span>.</li>
<li>Check the box <i class="far fa-check-square"></i> Merge all traces.</li>
<li>Click on <span class="button">Download <i class="fas fa-download"></i></span> to download the files on your computer or on <span class="button">Save to Google Drive</span> to save it in the cloud.</li>
</ol>
When merging multiple GPX files: missing time, temperature, heartrate, cadence or power data will be automatically extended with the average value across merged files.
If some GPX files contains timestamps, it is ensured that the timestamps of the merged file are strictly increasing (the timestamps of some files are shifted if necessary).
</div></div>
<div class="guide-item"><a name="extract-segments" href="#extract-segments" class="my-anchor"><div class="guide-title" onclick="toggle('extract')">Extract tracks or tracks segments of a GPX file</div></a>
<div id="extract" class="guide-content">
To extract all tracks or tracks segments from a trace, click on <i class="fas fa-list-ul button"></i> (available only if the file has more than one track or track segment).
If the GPX file contains waypoints (points of interest), they are kept in the files for which the traces pass closest.<br><br>
To extract a specific track or track segment:
<ol>
<li>Click on <i class="fas fa-folder-tree button"></i>.</li>
<li>Drag the track or track segment you wish to extract from the file structure to the tabs above the elevation profile.</li>
</ol>
</div></div>
<div class="guide-item"><a name="change-structure" href="#change-structure" class="my-anchor"><div class="guide-title" onclick="toggle('structure')">Change the structure of a GPX file</div></a>
<div id="structure" class="guide-content">
Click on <i class="fas fa-folder-tree button"></i> and then you can:
<ul>
<li>Drag and drop tracks and track segments to rearrange them, or drop them in the tabs above the elevation profile to extract them.</li>
<li>Drag and drop traces from the tabs above the elevation profile to merge them with the current trace.</li>
<li>Assign a different color to each track.</li>
<li>Rename each track.</li>
<li>Select a set of tracks or track segments to delete or merge them.</li>
</ul>
</div></div>
<div class="guide-item"><a name="copy-file" href="#copy-file" class="my-anchor"><div class="guide-title" onclick="toggle('copy')">Copy a GPX file</div></a>
<div id="copy" class="guide-content">Click on <i class="fas fa-copy button"></i> to duplicate a GPX file.</div></div>
<div class="guide-item"><a name="change-color" href="#change-color" class="my-anchor"><div class="guide-title" onclick="toggle('color')">Change the color, opacity and width of a GPX file</div></a>
<div id="color" class="guide-content">
<ol>
<li>Click on <i class="fas fa-palette button"></i>.</li>
<li>Click on the color to open the color picker.</li>
<li>Move the opacity slider to change the opacity.</li>
<li>Move the width slider to change the width.</li>
<li>Click on <span class="button">Ok</span>.</li>
</ol>
You can optionally apply the chosen color, opacity and width to all traces by using the checkboxes.<br>
For traces with multiple tracks, the file structure tool <i class="fas fa-folder-tree button"></i> can be used to assign a different color to each of them.
</div></div>
<div class="guide-item"><a name="add-waypoint" href="#add-waypoint" class="my-anchor"><div class="guide-title" onclick="toggle('add-wpt')">Add waypoints (points of interest) to a GPX file</div></a>
<div id="add-wpt" class="guide-content">
<ol>
<li>Click on <i class="fas fa-map-marker-alt button"></i>.</li>
<li>Click on the map at the location you want to place it.</li>
<li>Fill in some data about the waypoint (you can use HTML to format information, or even link images).</li>
<li>Click on <span class="button">Ok</span>.</li>
</ol>
If you want to reuse a waypoint at another location or for another trace, click on the waypoint and press <i class="fas fa-copy button"></i> inside the popup. Then, click on the map to add a copy of the waypoint at the chosen location.
</div></div>
<div class="guide-item"><a name="edit-waypoint" href="#edit-waypoint" class="my-anchor"><div class="guide-title" onclick="toggle('edit-wpt')">Edit a waypoint of a GPX file</div></a>
<div id="edit-wpt" class="guide-content">To change the location of a waypoint, you can simply drag it to a new location. When dragging a waypoint close to the trace, it is automatically attracted so that you can place the waypoint perfectly on the trace. Zoom in or out to change the distance at which the waypoints are attracted.<br>
To edit the data of a waypoint, click on it and press <i class="fas fa-pencil-alt button"></i> inside the popup. Change the information and then click <span class="button">Ok</span>.
</div></div>
<div class="guide-item"><a name="remove-waypoint" href="#remove-waypoint" class="my-anchor"><div class="guide-title" onclick="toggle('rmv-wpt')">Remove waypoints of a GPX file</div></a>
<div id="rmv-wpt" class="guide-content">To remove a single waypoint, click on it and press <i class="fas fa-trash-alt button"></i> inside the popup, or simply Shift+click on it.<br>
To remove all waypoints inside or outside an area, click on <i class="fas fa-vector-square button"></i> and select an area containing the waypoints you want to keep or delete. Uncheck the box <i class="far fa-check-square"></i> Track points if you do not want to remove track points at the same time. Then, choose whether you want to delete waypoints inside or outside of the selection. Finally, click on <span class="button">Proceed</span>.
</div></div>
<div class="guide-item"><a name="reduce-points" href="#reduce-points" class="my-anchor"><div class="guide-title" onclick="toggle('reduce')">Reduce the number of track points of a GPX file</div></a>
<div id="reduce" class="guide-content">
<ol>
<li>Click on <i class="fas fa-compress-alt button"></i>.</li>
<li>Use the slider to choose the number of track points to keep. You can see a live preview of the GPX file with the reduced number of points.</li>
<li>Click on <span class="button">Ok</span>.</li>
</ol>
</div></div>
<div class="guide-item"><a name="delete-points-in-zone" href="#delete-points-in-zone" class="my-anchor"><div class="guide-title" onclick="toggle('delete-zone')">Remove all track points and/or waypoints inside/outside an area</div></a>
<div id="delete-zone" class="guide-content">
<ol>
<li>Click on <i class="fas fa-vector-square button"></i>.
<li>Select an area containing the track points and/or waypoints you want to keep or delete.</li>
<li>Choose whether you want to delete track points and/or waypoints, inside or outside of the selection.</li>
<li>Finally, click on <span class="button">Proceed</span>.</li>
</ol>
</div></div>
<div class="guide-item"><a name="delete-file" href="#delete-file" class="my-anchor"><div class="guide-title" onclick="toggle('delete')">Remove GPX files</div></a>
<div id="delete" class="guide-content">Below the bottom panel, select the tab of the file you want to delete and click on <i class="fas fa-trash-alt button"></i>.<br>
To remove all GPX files at once, click on <span class="button">Clear all</span> in the top toolbar.</div></div>
<div class="guide-item"><a name="open-street-view" href="#open-street-view" class="my-anchor"><div class="guide-title" onclick="toggle('street-view')">Open Street View</div></a>
<div id="street-view" class="guide-content">In the top-right corner, click on <i class="fas fa-street-view button"></i> and then click on the map to open Street View at that location.</div></div>
<div class="guide-item"><a name="search-location" href="#search-location" class="my-anchor"><div class="guide-title" onclick="toggle('search')">Center the map on a location</div></a>
<div id="search" class="guide-content">In the top-right corner, click on <i class="fas fa-search button"></i> and then type an address. Choose one of the suggested locations to center the map on it.</div></div>
<div class="guide-item"><a name="hide-trace" href="#hide-trace" class="my-anchor"><div class="guide-title" onclick="toggle('hide-gpx')">Hide a GPX file</div></a>
<div id="hide-gpx" class="guide-content">To hide a GPX file, click on <i class="fas fa-eye-slash button"></i>. To unhide it, click on <i class="fas fa-eye button"></i>.<br>
A hidden trace will also unhide when adding a point in edition mode or when using most of the tools.</div></div>
<div class="guide-item"><a name="hide-elevation" href="#hide-elevation" class="my-anchor"><div class="guide-title" onclick="toggle('profile')">Hide the elevation profile</div></a>
<div id="profile" class="guide-content">To hide the elevation profile, simply click on <i class="fas fa-chart-area button"></i>.</div></div>
<div class="guide-item"><a name="direction-markers" href="#direction-markers" class="my-anchor"><div class="guide-title" onclick="toggle('show-direction-markers')">Show direction markers</div></a>
<div id="show-direction-markers" class="guide-content">To show direction markers, go in the map layers <i class="fas fa-layer-group button"></i> and check the box <i class="far fa-check-square"></i> Direction markers.</div></div>
<div class="guide-item"><a name="distance-markers" href="#distance-markers" class="my-anchor"><div class="guide-title" onclick="toggle('show-distance-markers')">Show distance markers</div></a>
<div id="show-distance-markers" class="guide-content">To show distance markers, go in the map layers <i class="fas fa-layer-group button"></i> and check the box <i class="far fa-check-square"></i> Distance markers.</div></div>
<div class="guide-item"><a name="toggle-layer" href="#toggle-layer" class="my-anchor"><div class="guide-title" onclick="toggle('layer')">Show or hide map layers</div></a>
<div id="layer" class="guide-content">
<ol>
<li>Hover over <i class="fas fa-layer-group button"></i> in the top-right corner.</li>
<li>Click on <i class="fas fa-gear button"></i>.</li>
<li>Select the layers you want to appear in the interface.</li>
</ol>
</div></div>
<div class="guide-item"><a name="custom-layer" href="#custom-layer" class="my-anchor"><div class="guide-title" onclick="toggle('custom')">Add custom map layers</div></a>
<div id="custom" class="guide-content">
<ol>
<li>Hover over <i class="fas fa-layer-group button"></i> in the top-right corner.</li>
<li>Click on <i class="fas fa-gear button"></i>.</li>
<li>Fill out the form to add or replace a map layer.</li>
</ol>
</div></div>
<div class="guide-item"><a name="map-legends" href="#map-legends" class="my-anchor"><div class="guide-title" onclick="toggle('legend')">Map legends</div></a>
<div id="legend" class="guide-content">
<ul>
<li><a href="https://footpathapp.com/user-guide/maps/mapbox-outdoors/" target="_blank">Mapbox Outdoors</a></li>
<li><a href="https://wiki.openstreetmap.org/wiki/LinesTab" target="_blank">OpenStreetMap</a></li>
<li><a href="https://opentopomap.org/about" target="_blank">OpenTopoMap</a></li>
<li>OpenHikingMap: same than OpenTopoMap but with hiking trails.</li>
<li><a href="https://www.cyclosm.org/legend.html" target="_blank">CyclOSM</a></li>
</ul>
</div></div>
</div>
</div>
<div class="block">
<a name="embed"></a><h1>Embedding 🗺</h1>
<div>
You are very welcome to display traces on your website with <b>gpx.studio</b>. There are two ways to do it: the first one with files stored on a server and the second one with Google Drive.
<ul>
<li><b>File URL:</b> Add the link to the file in the <code>urls</code> attribute of the <code>state</code> parameter of the query string. Make sure to use <code>https</code>, to encode any special characters and that <b>gpx.studio</b> is allowed to request the files, otherwise the requests will be blocked by the <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/CORS" target="_blank">CORS policy</a>, i.e. you should set the following header in your server response:
<p style="text-align: center"><code>Access-Control-Allow-Origin: *</code> or <code>https://gpx.studio</code></p></li>
<li><b>Google Drive:</b> Just save the files to your Google Drive when exporting and copy the code provided! If you want to display files that you already have on your Google Drive, add the ID of the file in the <code>ids</code> attribute of the <code>state</code> parameter of the query string and make sure they are available to all users with the link.</li>
</ul>
<p>Choose the map shown by default with the parameter <code>source</code> among the following values:</p>
<ul>
<li><code>outdoors</code>: Mapbox Outdoors</li>
<li><code>satellite</code>: Mapbox Satellite</li>
<li><code>osm</code>: OpenStreetMap</li>
<li><code>otm</code>: OpenTopoMap</li>
<li><code>ohm</code>: OpenHikingMap</li>
</ul>
<p>To use Mapbox maps, you need to specify the <code>token</code> parameter with a valid <a href="https://account.mapbox.com/access-tokens/" target="_blank">Mapbox token</a>. You can also use a custom Mapbox style by directly specifying its URL with <code>mapbox-style=<STYLE_URL></code>.</p>
<p>You can optionally add parameters to the source URL: <code>imperial</code> to get data in miles and feet, <code>running</code> to display the pace in minutes by unit of distance, <code>distance</code> to show distance markers, <code>direction</code> to show direction markers and <code>slope</code> to show the slope view of the elevation profile. Below is a playground to play with the parameters, see a preview and get the HTML code.</p>
<div class="guide-item">
<h3 style="margin-block-start: 0em;">Parameters</h3>
<p>File URLs (separated by commas)<br>
<input id="file-urls" type="text" oninput="showPreview()" value="" style="width: 96%; margin: 5px;"></p>
<p>Google Drive file IDs (separated by commas)<br>
<input id="file-ids" type="text" oninput="showPreview()" value="10IbXh7W7QDO7ZKmapJYdcgN3vhdN2Q-e" style="width: 96%; margin: 5px;"></p>
<div style="display: flex; justify-content: space-between">
<span>Running <input id="running" type="checkbox" oninput="showPreview()"></span>
<span>Imperial <input id="imperial" type="checkbox" oninput="showPreview()"></span>
<span>Distance markers <input id="distance" type="checkbox" oninput="showPreview()" checked></span>
<span>Direction markers <input id="direction" type="checkbox" oninput="showPreview()"></span>
<span>Slope <input id="slope" type="checkbox" oninput="showPreview()"></span>
</div>
<p>Default map <select id="sources" oninput="showPreview()">
<option value="outdoors">Mapbox Outdoors</option>
<option value="satellite">Mapbox Satellite</option>
<option value="osm" selected="selected">OpenStreetMap</option>
<option value="otm">OpenTopoMap</option>
<option value="ohm">OpenHikingMap</option>
</select></p>
<p>Mapbox token<br>
<input id="mapbox-token" type="text" oninput="showPreview()" value="" style="width: 96%; margin: 5px;"></p>
<p>Mapbox custom style URL<br>
<input id="mapbox-style" type="text" oninput="showPreview()" value="" style="width: 96%; margin: 5px;"></p>
<h3>HTML code</h3>
<div style="text-align: left; overflow-wrap: break-word; padding:10px; border: 1px solid #ccc; background: #f5f5f5;">
<code id="embedding-code"></code>
</div>
<h3>Preview</h3>
<iframe id="preview" width="100%" height="500" frameborder="0" allowfullscreen></iframe>
</div>
</div>
</div>
<div class="block">
<a name="terms"></a><h1>Terms of Services 📖</h1>
<p>Thank you for using <b>gpx.studio</b>. These terms of service (Terms) cover your use and access of our website and related software (our Services).</p>
<p>By accessing this website, you are agreeing to be bound by this website Terms of Services and to review our Privacy Policy. If you do not agree with any of these terms, you are prohibited from using or accessing this site.</p>
<h2>Changes to the Services</h2>
<p>We may change the features of our Services, withdraw or add new features from time to time.</p>
<h2>Warranties</h2>
<p>The services on the website are provided "as is". To the fullest extent permitted by law, we make no warranties either implied or expressed about the Services. We do not make any promise about the accuracy of specific functions of the services, their reliability or availability.</p>
<h2>Changes to Terms</h2>
<div>We reserve the right to modify these Terms at any time. We will notice you on the website so you can agree to the revised Terms.</div>
</div>
<div class="block">
<a name="privacy"></a><h1>Privacy Policy 🕵️</h1>
<p><b>gpx.studio</b> is an online GPX file editor which allows users to create, view and edit files.
We respect the privacy of our users and do not collect any personal information.</p>
<p>The files created, visualized or edited on the website are only read once and never stored on a server.
We only access the data contained in the files and handle all computations from your local browser (it is a pure client-side application).</p>
<h2>Google Drive</h2>
<p>The website offers the possibility to log in with Google Drive to upload and save files in order to facilitate the storage, versioning and sharing of GPX files.
That service authenticates you directly with your Google account, and an authentication token identifying you as the file owner is stored in your local browser session profile.
This information is used to browse GPX files in your Google Drive and to open only those you choose to open.
Furthermore, it is used to automatically authenticate users visiting the website again but it is never stored on our side.</p>
<p>We use standard Google Drive sharing functionality when you decide to share the file, and standard Google Drive authentication, authorization mechanisms for access control.
No other files than those you create with the tool or decide to open with it (either by opening from Google Drive or visiting its associated URL on the tool) will be accessed, and none will ever be stored.</p>
<p><b>gpx.studio</b>'s use of information received from Google APIs will adhere to the <a href="https://developers.google.com/terms/api-services-user-data-policy#additional_requirements_for_specific_api_scopes">Google API Services User Data Policy</a>, including the Limited Use requirements.</p>
<p>Last updated July 26, 2021.</p>
<br><br><br>
</div>
</div>
<script>
var language = getLanguage();
const navigation = document.getElementById("nav-container");
navigation.addEventListener('click', function (e) {
if (navigation.classList.contains('maximized')) {
navigation.classList.remove('maximized');
} else {
navigation.classList.add('maximized');
}
e.stopPropagation();
});
document.addEventListener('click', function () {
if (navigation.classList.contains('maximized')) {
navigation.classList.remove('maximized');
}
});
function showPreview() {
const file_urls = document.getElementById("file-urls").value;
const file_ids = document.getElementById("file-ids").value;
const running = document.getElementById("running").checked;
const imperial = document.getElementById("imperial").checked;
const distance = document.getElementById("distance").checked;
const direction = document.getElementById("direction").checked;
const slope = document.getElementById("slope").checked;
const mapbox_token = document.getElementById("mapbox-token").value;
const mapbox_style = document.getElementById("mapbox-style").value;
const source = document.getElementById("sources").value;
var query = '?state=%7B';
if (file_ids.length) {
query += '%22ids%22:%5B';
const files = file_ids.split(',');
for (var i=0; i<files.length; i++) {
if (i) query += ',';
query += '%22' + encodeURIComponent(files[i]) + '%22';
}
query += '%5D';
if (file_urls.length) query += ',';
}
if (file_urls.length) {
query += '%22urls%22:%5B';
const files = file_urls.split(',');
for (var i=0; i<files.length; i++) {
if (i) query += ',';
query += '%22' + encodeURIComponent(files[i]) + '%22';
}
query += '%5D';
}
query += '%7D';
const preview = document.getElementById("preview");
preview.src = './'
+ query
+ '&embed'
+ (mapbox_token ? '&token='+mapbox_token : '')
+ (mapbox_style ? '&mapbox-style='+mapbox_style : '')
+ (source != "osm" ? '&source='+source : '')
+ (running ? '&running' : '')
+ (imperial ? '&imperial' : '')
+ (distance ? '&distance' : '')
+ (direction ? '&direction' : '')
+ (slope ? '&slope' : '');
const code = document.getElementById("embedding-code");
code.innerHTML = '<iframe src="https://gpx.studio'
+ window.location.pathname.replace('about.html','')
+ query
+ '&embed'
+ (mapbox_token ? '&token='+mapbox_token : '')
+ (mapbox_style ? '&mapbox-style='+mapbox_style : '')
+ (source != "osm" ? '&source='+source : '')
+ (running ? '&running' : '')
+ (imperial ? '&imperial' : '')
+ (distance ? '&distance' : '')
+ (direction ? '&direction' : '')
+ (slope ? '&slope' : '')
+ '" width="100%" height="500" frameborder="0" allowfullscreen><p><a href="https://gpx.studio'
+ window.location.pathname.replace('about.html','')
+ query
+ '"></a></p></iframe>';
}
var toggledElement = null;
function toggle(id) {
const element = document.getElementById(id);
if (toggledElement) toggledElement.hidden = 'until-found';
if (element == toggledElement) toggledElement = null;
else {
element.hidden = false;
toggledElement = element;
}
}
const guideItems = document.getElementsByClassName('guide-item');
for (var i=0; i<guideItems.length; i++) {
const anchor = guideItems[i].children[0];
anchor.addEventListener('click', function (e) {
e.preventDefault();
history.replaceState({}, '', this.href);
});
}
const guideContents = document.getElementsByClassName('guide-content');
for (var i=0; i<guideContents.length; i++) {
const content = guideContents[i];
content.hidden = 'until-found';
content.addEventListener('beforematch', function () {
toggle(content.id);
});
}
if (window.location.hash) {
const anchors = document.getElementsByName(window.location.hash.substring(1));
if (anchors.length == 1 && anchors[0].children.length > 0) {
anchors[0].children[0].click();
}
}
showPreview();
const languageInput = document.getElementById("language-input");
languageInput.value = language;
languageInput.addEventListener('change', function () {
window.location.href = '/' + (languageInput.value == 'en' ? '' : 'l/'+languageInput.value+'/')+'about.html'+window.location.hash;
});
languageInput.addEventListener('click', function (e) {
e.stopPropagation();
});
</script>
</body>
</html>