index.html

   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/.  -->
   4
   5 <!DOCTYPE html>
   6 <html manifest="manifest.appcache">
   7 <head>
   8   <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
   9   <!-- try to force a 1:1 scaling and disable pinch-zoom on mobile, see
  10        https://developer.mozilla.org/en/Mobile/Viewport_meta_tag -->
  11   <meta name="viewport" content="width=device-width, height=device-height, initial-scale=1, maximum-scale=1, user-scalable=no">
  12   <title>Lantea Maps</title>
  13   <script src="js/map.js"></script>
  14   <script src="js/ui.js"></script>
  15   <script src="js/library.js"></script>
  16   <script src="js/piwik.js" async="" defer=""></script>
  17   <link rel="stylesheet" href="style/lantea.css">
  18   <link rel="manifest" href="/pwa.manifest">
  19   <link rel="shortcut icon" href="style/lanteaIcon16.png" type="image/png">
  20 </head>
  21 <body id="body">
  22 <noscript><p><img src="https://piwik.kairo.at/piwik.php?idsite=2" style="border:0;" alt="" /></p></noscript>
  23 <h1>Lantea Map</h1>
  24
  25 <div id="trackArea" class="menuDrawer secondaryUI hidden">
  26 <h2 onclick="toggleTrackArea();">
  27 <image src="style/track.svg" alt=""> Track
  28 </h2>
  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>
  32 </p>
  33 <p>
  34 <input type="button" id="saveTrackButton" value="Save"
  35        onclick="saveTrack();">
  36 <input type="button" id="dumpTrackButton" value="Dump"
  37        onclick="saveTrackDump();" class="debugHide">
  38 <input type="button" id="uploadTrackButton" value="Upload" disabled="true"
  39        onclick="showUploadDialog();">
  40 <input type="button" id="clearTrackButton" value="Clear"
  41        onclick="clearTrack();">
  42 </p>
  43 <p id="libraryShowLine" class="hidden">
  44 <input type="button" id="libraryShowButton" value="View uploaded tracks"
  45        onclick="showLibrary();">
  46 </p>
  47 <div id="trackDialogArea" class="hidden">
  48 <div id="uploadDialog">
  49 <p class="subTitle">Upload Track to Lantea Maps Server:</p>
  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>
  57 <p>
  58 <label for="uploadDesc">Comment:</label>
  59 <input type="text" id="uploadDesc" maxlength="255" size="25"
  60        value="Lantea Maps">
  61 </p>
  62 <p>
  63 <input type="button" id="uploadDialogUploadButton" value="Upload Track"
  64        onclick="uploadTrack();">
  65 <input type="button" id="uploadDialogCancelButton" value="Cancel"
  66        onclick="cancelTrackDialog();">
  67 </p>
  68 </div>
  69 <div id="uploadStatus">
  70 <p class="subTitle">Track Upload to Lantea Maps Server</p>
  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>
  81 <p class="loginbox">
  82 <button type="button" id="loginbtn" class="hidden">Sign in</button>
  83 <span id="loginerror" class="hidden">!</span>
  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>
  88 <p>
  89 <input type="checkbox" id="trackCheckbox"
  90        onchange="setTracking(this);">
  91 <label for="trackCheckbox">Enable tracking</label><br/>
  92 </p>
  93 <p>
  94 <input type="checkbox" id="centerCheckbox"
  95        onchange="setCentering(this);">
  96 <label for="centerCheckbox">Center Map</label><br/>
  97 </p>
  98 </div>
  99
 100 <div id="settingsArea" class="menuDrawer secondaryUI hidden">
 101 <h2 onclick="toggleSettings();">
 102 <image src="style/settings.svg" alt=""> Settings
 103 </h2>
 104 <p>
 105 <label for="mapSelector">Map style:</label>
 106 <select id="mapSelector" onchange="setMapStyle();">
 107 <!-- option value="osm_mapnik">OpenStreetMap (Mapnik)</option -->
 108 </select>
 109 </p>
 110 <p>
 111 <input type="button" id="clearCacheButton" value="Clear Cached Maps"
 112        onclick="gTileService.clearDB();">
 113 </p>
 114 <div id="uploadSettingsArea">
 115 <p class="subTitle">Track Upload:</p>
 116 <p>
 117 <label for="uploadDevName">Device name:</label>
 118 <input type="text" id="uploadDevName" maxlength="255" placeholder="My Device"
 119        onchange="setUploadField(this);">
 120 </p>
 121 <p class="dialogHelp">The device name enables you to tell apart tracks you may
 122 upload from multiple devices.</p>
 123 </div>
 124 </div>
 125
 126 <div id="menuArea" class="autoFade overlayArea">
 127 <image src="style/track.svg" class="controlButton" id="trackButton" value="Track"
 128        onclick="toggleTrackArea();"><br/>
 129 <image src="style/settings.svg" class="controlButton" id="settingsButton" alt="Settings"
 130        onclick="toggleSettings();"><br/>
 131 </div>
 132
 133 <div id="zoomArea" class="autoFade overlayArea">
 134 <input type="button" id="zoomInButton" value="+"
 135        onclick="zoomIn();">
 136 <p id="zoomLevel">Z</p>
 137 <input type="button" id="zoomOutButton" value="&minus;"
 138        onclick="zoomOut();">
 139 </div>
 140
 141 <div id="fullscreenArea" class="autoFade overlayArea">
 142 <!-- other possible characters: &#x25F0; -->
 143 <input type="button" id="fullscreenButton" value="&#x25A3;"
 144        onclick="toggleFullscreen();">
 145 </div>
 146
 147 <div id="dialogArea" class="overlayArea hidden">
 148 <div id="noGLwarning">
 149   Unable to initialize WebGL. You need a browser that supports it.
 150 </div>
 151 <div id="firstRunIntro">
 152 <p class="dialogTitle">Welcome to Lantea Maps!</p>
 153 <p>This web app lets you record GPS tracks of your journeys, which you can
 154    upload to our backend servers and download as GPX files.</p>
 155 <p>You can find track details, upload, etc. in the "track" drawer that you can
 156    access via the <image src="style/track.svg"> icon at the left top of the
 157    window.</p>
 158 <p>Right underneath that icon, you find <image src="style/settings.svg">
 159    settings.</p>
 160 <p>Both track and settings "drawers" can be closed by clicking/tapping on their
 161    title line.</p>
 162 <p>From the track "drawer", you can also access a library of uploaded tracks,
 163    their name/comment links to the GPX download of the specific track.</p>
 164 <p class="dialogButtonLine">
 165   <button id="firstRunDialogCloseButton"
 166           onclick="closeDialog();">Close</button>
 167 </p>
 168 </div>
 169 <div id="infoDialog">
 170 <p class="dialogTitle">Recent Changes in Lantea Maps</p>
 171 <p>Lantea Maps has been updated with a few significant changes.</p>
 172 <p>Most importantly, the previously broken upload functionality for tracks has
 173    been fixed and improved to use our own Lantea Maps server instead of
 174    OpenStreetMaps. For using it, you need to log in with KaiRo.at via a
 175    "sign in" button now in the track "drawer".</p>
 176 <p>From there, you can also access a library of uploaded tracks, their
 177    name/comment links to the GPX download of the specific track.</p>
 178 <p>If you set a device name in the settings, you can even distinguish tracks
 179    uploaded to the same account by different devices you're using.</p>
 180 <p class="dialogButtonLine">
 181   <button id="firstRunDialogCloseButton"
 182           onclick="closeDialog();">Close</button>
 183 </p>
 184 </div>
 185 </div>
 186
 187 <div id="libraryArea" class="overlayArea fullScreenOverlay secondaryUI hidden">
 188 <p>The following tracks are saved on the Lantea Maps Server:</p>
 189 <ul id="libTrackList">
 190 </ul>
 191 <p id="libTrackPages" class="hidden"></p>
 192 <p class="closeButtonContainer"><button id="libCloseButton" class="closeButton">X</button></p>
 193 </div>
 194
 195 <p id="action">
 196   <img id="actionimg" src="style/loading_action.png">
 197   <span id="actionlabel">Loading</span>&hellip;
 198 </p>
 199 <p id="copyright" class="autoFade overlayArea"></p>
 200
 201 <canvas id="map" width="500" height="500">
 202   Please use a browser that supports &lt;canvas&gt; elements.
 203 </canvas>
 204 <canvas id="track" width="500" height="500">
 205 </canvas>
 206
 207 </body>
 208 </html>