add arcgis world imagery
[lantea.git] / index.html
CommitLineData
a7393a71
RK
1<!-- This Source Code Form is subject to the terms of the Mozilla Public
2 - License, v. 2.0. If a copy of the MPL was not distributed with this file,
3 - You can obtain one at http://mozilla.org/MPL/2.0/. -->
23cd2dcc 4
8383f143
RK
5<!DOCTYPE html>
6<html manifest="manifest.appcache">
7<head>
8 <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
628ba778 9 <!-- try to force a 1:1 scaling and disable pinch-zoom on mobile, see
6b1e7340 10 https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
628ba778 11 <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
753078ce 12 <title>Lantea Maps</title>
0fc5e7f4
RK
13 <script src="js/map.js"></script>
14 <script src="js/ui.js"></script>
15 <script src="js/library.js"></script>
213947ef 16 <script src="js/piwik.js" async="" defer=""></script>
23cd2dcc 17 <link rel="stylesheet" href="style/lantea.css">
18af21fd 18 <link rel="manifest" href="/pwa.manifest">
b395419b 19 <link rel="shortcut icon" href="style/lanteaIcon16.png" type="image/png">
8383f143 20</head>
c5378747 21<body id="body">
da8fd4b6 22<noscript><p><img src="https://matomo.kairo.at/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
b47b4a65
RK
23<h1>Lantea Map</h1>
24
6d5072d8 25<div id="trackArea" class="menuDrawer secondaryUI hidden">
123b3142 26<h2 onclick="toggleTrackArea();">
db2008ca
RK
27<image src="style/track.svg" alt=""> Track
28</h2>
026c4f46
RK
29<p id="trackData"><span id="trackLength"><span id="trackLengthNum">0</span> km</span>,
30<span id="trackDuration"><span id="trackDurationH"><span id="trackDurationHNum">0</span> h</span>
31<span id="trackDurationM"><span id="trackDurationMNum">0</span> min</span></span>
db2008ca
RK
32</p>
33<p>
993fd081
RK
34<input type="button" id="saveTrackButton" value="Save"
35 onclick="saveTrack();">
4b12da3a 36<input type="button" id="dumpTrackButton" value="Dump"
b91b74a7 37 onclick="saveTrackDump();" class="debugHide">
8389557a 38<input type="button" id="uploadTrackButton" value="Upload" disabled="true"
43255174 39 onclick="showUploadDialog();">
993fd081 40<input type="button" id="clearTrackButton" value="Clear"
db2008ca
RK
41 onclick="clearTrack();">
42</p>
867ee0af
RK
43<p id="libraryShowLine" class="hidden">
44<input type="button" id="libraryShowButton" value="View uploaded tracks"
45 onclick="showLibrary();">
46</p>
6201b112
RK
47<div id="trackDialogArea" class="hidden">
48<div id="uploadDialog">
e180feb4 49<p class="subTitle">Upload Track to Lantea Maps Server:</p>
6201b112
RK
50<label for="uploadPublic">Visibility:</label>
51<select id="uploadPublic">
52<option value="true">Public Domain</option>
53<option value="false">Private</option>
54</select>
55<p class="dialogHelp">Public Domain tracks can be forwarded by the server
56operator to any other services, e.g. OpenStreetMap.</p>
e180feb4 57<p>
65946832 58<label for="uploadDesc">Comment:</label>
6201b112
RK
59<input type="text" id="uploadDesc" maxlength="255" size="25"
60 value="Lantea Maps">
e180feb4
RK
61</p>
62<p>
6201b112
RK
63<input type="button" id="uploadDialogUploadButton" value="Upload Track"
64 onclick="uploadTrack();">
65<input type="button" id="uploadDialogCancelButton" value="Cancel"
66 onclick="cancelTrackDialog();">
e180feb4 67</p>
6201b112
RK
68</div>
69<div id="uploadStatus">
e1c3d337 70<p class="subTitle">Track Upload to Lantea Maps Server</p>
6201b112
RK
71<p id="uploadInProgress"><img id="actionimg" src="style/loading_action.png">
72 Upload in progress&hellip;</p>
73<p id="uploadSuccess" style="display:none;">Track upload successful!</p>
74<p id="uploadFailed" style="display:none;">Track upload failed.</p>
75<p id="uploadError" style="display:none;">Error:<br>
76 <span id="uploadErrorMsg"></span></p>
77<input type="button" id="uploadStatusCloseButton" value="Close"
78 onclick="cancelTrackDialog();" disabled="true">
79</div>
80</div>
8f9306c5
RK
81<p class="loginbox">
82<button type="button" id="loginbtn" class="hidden">Sign in</button>
662078d1 83<span id="loginerror" class="hidden">!</span>
8f9306c5
RK
84<span id="logindesc" class="hidden">to enable uploads</span>
85<span id="username" class="hidden"></span>
86<button type="button" id="logoutbtn" class="hidden">Log out</button>
87</p>
db2008ca 88<p>
3610c22d
RK
89<input type="checkbox" id="trackCheckbox"
90 onchange="setTracking(this);">
91<label for="trackCheckbox">Enable tracking</label><br/>
db2008ca
RK
92</p>
93<p>
3610c22d
RK
94<input type="checkbox" id="centerCheckbox"
95 onchange="setCentering(this);">
96<label for="centerCheckbox">Center Map</label><br/>
db2008ca 97</p>
123b3142
RK
98</div>
99
6d5072d8 100<div id="settingsArea" class="menuDrawer secondaryUI hidden">
123b3142 101<h2 onclick="toggleSettings();">
db2008ca
RK
102<image src="style/settings.svg" alt=""> Settings
103</h2>
104<p>
43255174 105<label for="mapSelector">Map style:</label>
3610c22d 106<select id="mapSelector" onchange="setMapStyle();">
b47b4a65 107<!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
8389557a 108</select>
db2008ca
RK
109</p>
110<p>
3431f496
RK
111<input type="button" id="clearCacheButton" value="Clear Cached Maps"
112 onclick="gTileService.clearDB();">
db2008ca 113</p>
65946832 114<div id="uploadSettingsArea">
e180feb4
RK
115<p class="subTitle">Track Upload:</p>
116<p>
65946832
RK
117<label for="uploadDevName">Device name:</label>
118<input type="text" id="uploadDevName" maxlength="255" placeholder="My Device"
8389557a 119 onchange="setUploadField(this);">
e180feb4 120</p>
65946832
RK
121<p class="dialogHelp">The device name enables you to tell apart tracks you may
122upload from multiple devices.</p>
c4d0569c 123</div>
123b3142
RK
124</div>
125
6d5072d8
RK
126<div id="menuArea" class="autoFade overlayArea">
127<image src="style/track.svg" class="controlButton" id="trackButton" value="Track"
123b3142 128 onclick="toggleTrackArea();"><br/>
6d5072d8 129<image src="style/settings.svg" class="controlButton" id="settingsButton" alt="Settings"
123b3142 130 onclick="toggleSettings();"><br/>
b47b4a65 131</div>
8383f143 132
6d5072d8 133<div id="zoomArea" class="autoFade overlayArea">
aa45a91b 134<input type="button" id="zoomInButton" value="+">
ac45368e 135<p id="zoomLevel">Z</p>
aa45a91b 136<input type="button" id="zoomOutButton" value="&minus;">
336097e2
RK
137</div>
138
6d5072d8 139<div id="fullscreenArea" class="autoFade overlayArea">
c5378747
RK
140<!-- other possible characters: &#x25F0; -->
141<input type="button" id="fullscreenButton" value="&#x25A3;"
142 onclick="toggleFullscreen();">
143</div>
144
6d5072d8 145<div id="dialogArea" class="overlayArea hidden">
ecde0af2
RK
146<div id="noGLwarning">
147 Unable to initialize WebGL. You need a browser that supports it.
148</div>
0713fd6a
RK
149<div id="DBError">
150 Unable to open indexedDB database in your browser. Please make sure you have
151 not disabled access to in-browser storage.
152</div>
e1c3d337
RK
153<div id="firstRunIntro">
154<p class="dialogTitle">Welcome to Lantea Maps!</p>
155<p>This web app lets you record GPS tracks of your journeys, which you can
156 upload to our backend servers and download as GPX files.</p>
157<p>You can find track details, upload, etc. in the "track" drawer that you can
158 access via the <image src="style/track.svg"> icon at the left top of the
159 window.</p>
160<p>Right underneath that icon, you find <image src="style/settings.svg">
161 settings.</p>
162<p>Both track and settings "drawers" can be closed by clicking/tapping on their
163 title line.</p>
164<p>From the track "drawer", you can also access a library of uploaded tracks,
165 their name/comment links to the GPX download of the specific track.</p>
166<p class="dialogButtonLine">
167 <button id="firstRunDialogCloseButton"
168 onclick="closeDialog();">Close</button>
169</p>
170</div>
171<div id="infoDialog">
f86d778e 172<p class="dialogTitle">Recent Changes in Lantea Maps</p>
e1c3d337 173<p>Lantea Maps has been updated with a few significant changes.</p>
5fa27c77
RK
174<p>Most importantly, the upload functionality for tracks has been improved and
175 switched to use our own Lantea Maps server. For accessing it, you need to
176 log in with KaiRo.at via a "sign in" button now in the track "drawer".</p>
e1c3d337
RK
177<p>From there, you can also access a library of uploaded tracks, their
178 name/comment links to the GPX download of the specific track.</p>
179<p>If you set a device name in the settings, you can even distinguish tracks
180 uploaded to the same account by different devices you're using.</p>
181<p class="dialogButtonLine">
182 <button id="firstRunDialogCloseButton"
183 onclick="closeDialog();">Close</button>
184</p>
185</div>
43255174
RK
186</div>
187
6d5072d8 188<div id="libraryArea" class="overlayArea fullScreenOverlay secondaryUI hidden">
34402ca5 189<p>The following tracks are saved on the Lantea Maps Server:</p>
867ee0af
RK
190<ul id="libTrackList">
191</ul>
192<p id="libTrackPages" class="hidden"></p>
6d5072d8 193<p class="closeButtonContainer"><button id="libCloseButton" class="closeButton">X</button></p>
867ee0af
RK
194</div>
195
68afcd96
RK
196<p id="action">
197 <img id="actionimg" src="style/loading_action.png">
198 <span id="actionlabel">Loading</span>&hellip;
199</p>
6d5072d8 200<p id="copyright" class="autoFade overlayArea"></p>
6b1e7340 201
23cd2dcc
RK
202<canvas id="map" width="500" height="500">
203 Please use a browser that supports &lt;canvas&gt; elements.
204</canvas>
4b1d0915
RK
205<canvas id="track" width="500" height="500">
206</canvas>
23cd2dcc 207
23cd2dcc 208</body>
da6dad24 209</html>