[lantea.git] / index.html

<!-- This Source Code Form is subject to the terms of the Mozilla Public
   - License, v. 2.0. If a copy of the MPL was not distributed with this file,
   - You can obtain one at http://mozilla.org/MPL/2.0/.  -->

<!DOCTYPE html>
<html manifest="manifest.appcache">
<head>
  <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
  <!-- try to force a 1:1 scaling and disable pinch-zoom on mobile, see
       https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
  <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
  <title>Lantea Maps</title>
  <script src="js/map.js" type="application/javascript;version=1.8"></script>
  <script src="js/ui.js" type="application/javascript;version=1.8"></script>
  <script src="js/library.js" type="application/javascript;version=1.8"></script>
  <script src="js/piwik.js" async="" defer=""></script>
  <link rel="stylesheet" href="style/lantea.css">
  <link rel="manifest" href="/pwa.manifest">
  <link rel="shortcut icon" href="style/lanteaIcon16.png" type="image/png">
</head>
<body id="body">
<noscript><p><img src="https://piwik.kairo.at/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
<h1>Lantea Map</h1>

<div id="trackArea" class="menuDrawer secondaryUI hidden">
<h2 onclick="toggleTrackArea();">
<image src="style/track.svg" alt=""> Track
</h2>
<p id="trackData"><span id="trackLength"><span id="trackLengthNum">0</span> km</span>,
<span id="trackDuration"><span id="trackDurationH"><span id="trackDurationHNum">0</span> h</span>
<span id="trackDurationM"><span id="trackDurationMNum">0</span> min</span></span>
</p>
<p>
<input type="button" id="saveTrackButton" value="Save"
       onclick="saveTrack();">
<input type="button" id="dumpTrackButton" value="Dump"
       onclick="saveTrackDump();" class="debugHide">
<input type="button" id="uploadTrackButton" value="Upload" disabled="true"
       onclick="showUploadDialog();">
<input type="button" id="clearTrackButton" value="Clear"
       onclick="clearTrack();">
</p>
<p id="libraryShowLine" class="hidden">
<input type="button" id="libraryShowButton" value="View uploaded tracks"
       onclick="showLibrary();">
</p>
<div id="trackDialogArea" class="hidden">
<div id="uploadDialog">
<p class="subTitle">Upload Track to Lantea Maps Server:</p>
<label for="uploadPublic">Visibility:</label>
<select id="uploadPublic">
<option value="true">Public Domain</option>
<option value="false">Private</option>
</select>
<p class="dialogHelp">Public Domain tracks can be forwarded by the server
operator to any other services, e.g. OpenStreetMap.</p>
<p>
<label for="uploadDesc">Comment:</label>
<input type="text" id="uploadDesc" maxlength="255" size="25"
       value="Lantea Maps">
</p>
<p>
<input type="button" id="uploadDialogUploadButton" value="Upload Track"
       onclick="uploadTrack();">
<input type="button" id="uploadDialogCancelButton" value="Cancel"
       onclick="cancelTrackDialog();">
</p>
</div>
<div id="uploadStatus">
<p class="subTitle">Track Upload to Lantea Maps Server</p>
<p id="uploadInProgress"><img id="actionimg" src="style/loading_action.png">
  Upload in progress&hellip;</p>
<p id="uploadSuccess" style="display:none;">Track upload successful!</p>
<p id="uploadFailed" style="display:none;">Track upload failed.</p>
<p id="uploadError" style="display:none;">Error:<br>
  <span id="uploadErrorMsg"></span></p>
<input type="button" id="uploadStatusCloseButton" value="Close"
       onclick="cancelTrackDialog();" disabled="true">
</div>
</div>
<p class="loginbox">
<button type="button" id="loginbtn" class="hidden">Sign in</button>
<span id="logindesc" class="hidden">to enable uploads</span>
<span id="username" class="hidden"></span>
<button type="button" id="logoutbtn" class="hidden">Log out</button>
</p>
<p>
<input type="checkbox" id="trackCheckbox"
       onchange="setTracking(this);">
<label for="trackCheckbox">Enable tracking</label><br/>
</p>
<p>
<input type="checkbox" id="centerCheckbox"
       onchange="setCentering(this);">
<label for="centerCheckbox">Center Map</label><br/>
</p>
</div>

<div id="settingsArea" class="menuDrawer secondaryUI hidden">
<h2 onclick="toggleSettings();">
<image src="style/settings.svg" alt=""> Settings
</h2>
<p>
<label for="mapSelector">Map style:</label>
<select id="mapSelector" onchange="setMapStyle();">
<!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
</select>
</p>
<p>
<input type="button" id="clearCacheButton" value="Clear Cached Maps"
       onclick="gTileService.clearDB();">
</p>
<div id="uploadSettingsArea">
<p class="subTitle">Track Upload:</p>
<p>
<label for="uploadDevName">Device name:</label>
<input type="text" id="uploadDevName" maxlength="255" placeholder="My Device"
       onchange="setUploadField(this);">
</p>
<p class="dialogHelp">The device name enables you to tell apart tracks you may
upload from multiple devices.</p>
</div>
</div>

<div id="menuArea" class="autoFade overlayArea">
<image src="style/track.svg" class="controlButton" id="trackButton" value="Track"
       onclick="toggleTrackArea();"><br/>
<image src="style/settings.svg" class="controlButton" id="settingsButton" alt="Settings"
       onclick="toggleSettings();"><br/>
</div>

<div id="zoomArea" class="autoFade overlayArea">
<input type="button" id="zoomInButton" value="+"
       onclick="zoomIn();">
<p id="zoomLevel">Z</p>
<input type="button" id="zoomOutButton" value="&minus;"
       onclick="zoomOut();">
</div>

<div id="fullscreenArea" class="autoFade overlayArea">
<!-- other possible characters: &#x25F0; -->
<input type="button" id="fullscreenButton" value="&#x25A3;"
       onclick="toggleFullscreen();">
</div>

<div id="dialogArea" class="overlayArea hidden">
<div id="noGLwarning">
  Unable to initialize WebGL. You need a browser that supports it.
</div>
<div id="firstRunIntro">
<p class="dialogTitle">Welcome to Lantea Maps!</p>
<p>This web app lets you record GPS tracks of your journeys, which you can
   upload to our backend servers and download as GPX files.</p>
<p>You can find track details, upload, etc. in the "track" drawer that you can
   access via the <image src="style/track.svg"> icon at the left top of the
   window.</p>
<p>Right underneath that icon, you find <image src="style/settings.svg">
   settings.</p>
<p>Both track and settings "drawers" can be closed by clicking/tapping on their
   title line.</p>
<p>From the track "drawer", you can also access a library of uploaded tracks,
   their name/comment links to the GPX download of the specific track.</p>
<p class="dialogButtonLine">
  <button id="firstRunDialogCloseButton"
          onclick="closeDialog();">Close</button>
</p>
</div>
<div id="infoDialog">
<p class="dialogTitle">Lantea Maps has changed!</p>
<p>Lantea Maps has been updated with a few significant changes.</p>
<p>Most importantly, the previously broken upload functionality for tracks has
   been fixed and improved to use our own Lantea Maps server instead of
   OpenStreetMaps. For using it, you need to log in with KaiRo.at via their
   "sign in" button now in the track "drawer".</p>
<p>From there, you can also access a library of uploaded tracks, their
   name/comment links to the GPX download of the specific track.</p>
<p>If you set a device name in the settings, you can even distinguish tracks
   uploaded to the same account by different devices you're using.</p>
<p class="dialogButtonLine">
  <button id="firstRunDialogCloseButton"
          onclick="closeDialog();">Close</button>
</p>
</div>
</div>

<div id="libraryArea" class="overlayArea fullScreenOverlay secondaryUI hidden">
<p>The following tracks are saved on the Lantea Maps Server:</p>
<ul id="libTrackList">
</ul>
<p id="libTrackPages" class="hidden"></p>
<p class="closeButtonContainer"><button id="libCloseButton" class="closeButton">X</button></p>
</div>

<p id="action">
  <img id="actionimg" src="style/loading_action.png">
  <span id="actionlabel">Loading</span>&hellip;
</p>
<p id="copyright" class="autoFade overlayArea"></p>

<canvas id="map" width="500" height="500">
  Please use a browser that supports &lt;canvas&gt; elements.
</canvas>
<canvas id="track" width="500" height="500">
</canvas>

</body>
</html>
Commit	Line	Data
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>
b5e49b95 RK	13	<script src="js/map.js" type="application/javascript;version=1.8"></script>
b5e49b95 RK	14	<script src="js/ui.js" type="application/javascript;version=1.8"></script>
867ee0af	15	<script src="js/library.js" type="application/javascript;version=1.8"></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">
213947ef	22	<noscript><p><img src="https://piwik.kairo.at/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
b47b4a65 RK	23	<h1>Lantea Map</h1>
b47b4a65 RK	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
db2008ca RK	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>
db2008ca RK	33	<p>
993fd081 RK	34	<input type="button" id="saveTrackButton" value="Save"
993fd081 RK	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();">
db2008ca RK	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">
6201b112 RK	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
	56	operator 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"
6201b112 RK	60	value="Lantea Maps">
e180feb4 RK	61	</p>
e180feb4 RK	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>
6201b112 RK	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…</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>
	83	<span id="logindesc" class="hidden">to enable uploads</span>
	84	<span id="username" class="hidden"></span>
	85	<button type="button" id="logoutbtn" class="hidden">Log out</button>
	86	</p>
db2008ca	87	<p>
3610c22d RK	88	<input type="checkbox" id="trackCheckbox"
	89	onchange="setTracking(this);">
	90	<label for="trackCheckbox">Enable tracking</label><br/>
db2008ca RK	91	</p>
db2008ca RK	92	<p>
3610c22d RK	93	<input type="checkbox" id="centerCheckbox"
	94	onchange="setCentering(this);">
	95	<label for="centerCheckbox">Center Map</label><br/>
db2008ca	96	</p>
123b3142 RK	97	</div>
123b3142 RK	98
6d5072d8	99	<div id="settingsArea" class="menuDrawer secondaryUI hidden">
123b3142	100	<h2 onclick="toggleSettings();">
db2008ca RK	101	<image src="style/settings.svg" alt=""> Settings
	102	</h2>
	103	<p>
43255174	104	<label for="mapSelector">Map style:</label>
3610c22d	105	<select id="mapSelector" onchange="setMapStyle();">
b47b4a65	106	<!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
8389557a	107	</select>
db2008ca RK	108	</p>
db2008ca RK	109	<p>
3431f496 RK	110	<input type="button" id="clearCacheButton" value="Clear Cached Maps"
3431f496 RK	111	onclick="gTileService.clearDB();">
db2008ca	112	</p>
65946832	113	<div id="uploadSettingsArea">
e180feb4 RK	114	<p class="subTitle">Track Upload:</p>
e180feb4 RK	115	<p>
65946832 RK	116	<label for="uploadDevName">Device name:</label>
65946832 RK	117	<input type="text" id="uploadDevName" maxlength="255" placeholder="My Device"
8389557a	118	onchange="setUploadField(this);">
e180feb4	119	</p>
65946832 RK	120	<p class="dialogHelp">The device name enables you to tell apart tracks you may
65946832 RK	121	upload from multiple devices.</p>
c4d0569c	122	</div>
123b3142 RK	123	</div>
123b3142 RK	124
6d5072d8 RK	125	<div id="menuArea" class="autoFade overlayArea">
6d5072d8 RK	126	<image src="style/track.svg" class="controlButton" id="trackButton" value="Track"
123b3142	127	onclick="toggleTrackArea();"><br/>
6d5072d8	128	<image src="style/settings.svg" class="controlButton" id="settingsButton" alt="Settings"
123b3142	129	onclick="toggleSettings();"><br/>
b47b4a65	130	</div>
8383f143	131
6d5072d8	132	<div id="zoomArea" class="autoFade overlayArea">
336097e2	133	<input type="button" id="zoomInButton" value="+"
ac45368e RK	134	onclick="zoomIn();">
	135	<p id="zoomLevel">Z</p>
	136	<input type="button" id="zoomOutButton" value="−"
336097e2 RK	137	onclick="zoomOut();">
	138	</div>
	139
6d5072d8	140	<div id="fullscreenArea" class="autoFade overlayArea">
c5378747 RK	141	<!-- other possible characters: ◰ -->
	142	<input type="button" id="fullscreenButton" value="▣"
	143	onclick="toggleFullscreen();">
	144	</div>
	145
6d5072d8	146	<div id="dialogArea" class="overlayArea hidden">
ecde0af2 RK	147	<div id="noGLwarning">
	148	Unable to initialize WebGL. You need a browser that supports it.
	149	</div>
e1c3d337 RK	150	<div id="firstRunIntro">
	151	<p class="dialogTitle">Welcome to Lantea Maps!</p>
	152	<p>This web app lets you record GPS tracks of your journeys, which you can
	153	upload to our backend servers and download as GPX files.</p>
	154	<p>You can find track details, upload, etc. in the "track" drawer that you can
	155	access via the <image src="style/track.svg"> icon at the left top of the
	156	window.</p>
	157	<p>Right underneath that icon, you find <image src="style/settings.svg">
	158	settings.</p>
	159	<p>Both track and settings "drawers" can be closed by clicking/tapping on their
	160	title line.</p>
	161	<p>From the track "drawer", you can also access a library of uploaded tracks,
	162	their name/comment links to the GPX download of the specific track.</p>
	163	<p class="dialogButtonLine">
	164	<button id="firstRunDialogCloseButton"
	165	onclick="closeDialog();">Close</button>
	166	</p>
	167	</div>
	168	<div id="infoDialog">
	169	<p class="dialogTitle">Lantea Maps has changed!</p>
	170	<p>Lantea Maps has been updated with a few significant changes.</p>
	171	<p>Most importantly, the previously broken upload functionality for tracks has
	172	been fixed and improved to use our own Lantea Maps server instead of
	173	OpenStreetMaps. For using it, you need to log in with KaiRo.at via their
	174	"sign in" button now in the track "drawer".</p>
	175	<p>From there, you can also access a library of uploaded tracks, their
	176	name/comment links to the GPX download of the specific track.</p>
	177	<p>If you set a device name in the settings, you can even distinguish tracks
	178	uploaded to the same account by different devices you're using.</p>
	179	<p class="dialogButtonLine">
	180	<button id="firstRunDialogCloseButton"
	181	onclick="closeDialog();">Close</button>
	182	</p>
	183	</div>
43255174 RK	184	</div>
43255174 RK	185
6d5072d8	186	<div id="libraryArea" class="overlayArea fullScreenOverlay secondaryUI hidden">
34402ca5	187	<p>The following tracks are saved on the Lantea Maps Server:</p>
867ee0af RK	188	<ul id="libTrackList">
	189	</ul>
	190	<p id="libTrackPages" class="hidden"></p>
6d5072d8	191	<p class="closeButtonContainer"><button id="libCloseButton" class="closeButton">X</button></p>
867ee0af RK	192	</div>
867ee0af RK	193
68afcd96 RK	194	<p id="action">
	195	<img id="actionimg" src="style/loading_action.png">
	196	<span id="actionlabel">Loading</span>…
	197	</p>
6d5072d8	198	<p id="copyright" class="autoFade overlayArea"></p>
6b1e7340	199
23cd2dcc RK	200	<canvas id="map" width="500" height="500">
	201	Please use a browser that supports <canvas> elements.
	202	</canvas>
4b1d0915 RK	203	<canvas id="track" width="500" height="500">
4b1d0915 RK	204	</canvas>
23cd2dcc	205
23cd2dcc	206	</body>
da6dad24	207	</html>