make intro dialog better displayable on small displays, hide it when …

…entering VR mode, and add a first version of preset selection
KaiRo-at · Jun 13, 2018 · 439beeb · 439beeb
1 parent 17794da
commit 439beeb
Show file tree

Hide file tree

Showing 3 changed files with 96 additions and 3 deletions.
diff --git a/index.html b/index.html
@@ -25,6 +25,7 @@
   <body>
     <div id="introDialog">
       <h1>VR Map - OpenStreetMap goes WebVR</h1>
+      <div id="generalinfo">
       <p>This experimental app displays OpenStreetMap data (ground tiles, trees,
         and buildings) in a web-based Virtual Reality environment.
       </p>
@@ -35,6 +36,14 @@ <h1>VR Map - OpenStreetMap goes WebVR</h1>
       <p>One of the limitations is that currently only a small area gets loaded
         and no additional scenery will get added when moving around.
       </p>
+      </div>
+      <div id="locationSettings">
+      <select id="locationPresets"></select><br>
+      <input type="number" class="coords" id="locLatitude" placeholder="latitude" step="0.00001" min="-90" max="90"> /
+      <input type="number" class="coords" id="locLongitude" placeholder="longitude" step="0.00001" min="-180" max="180"><br>
+      <button id="locationLoadButton">Load location</button>
+      </div>
+      <div id="legalinfo">
       <p>The source code can be found as
         <a href="https://github.com/KaiRo-at/vrmap">KaiRo-at/vrmap at GitHub</a>.
       </p>
@@ -43,6 +52,7 @@ <h1>VR Map - OpenStreetMap goes WebVR</h1>
         contributors, under <a href="http://www.openstreetmap.org/copyright"
         target="_blank">ODbL/CC-BY-SA</a> licenses.
       </p>
+      </div>
       <p class="dialogButtonLine">
         <button id="introDialogCloseButton">Start</button>
       </p>

diff --git a/map.js b/map.js
@@ -65,7 +65,8 @@ var locationPresets = [
     longitude: 139.69481,
   },
 ]
-var centerPos = locationPresets[0];
+var centerPos = { latitude: locationPresets[0].latitude,
+                  longitude: locationPresets[0].longitude };
 var map, tiles, items;
 var baseTileID, baseTileSize, centerOffset;
 var tilesFromCenter = 3;
@@ -78,12 +79,61 @@ var tileServer = "https://tilecache.kairo.at/mapnik/";
 var overpassURL = "https://overpass-api.de/api/interpreter";
 
 window.onload = function() {
-  document.querySelector("#introDialogCloseButton").onclick = function(event) {
-    event.target.parentElement.parentElement.classList.add("hidden")
+  // Close intro dialog on clicking its button.
+  document.querySelector("#introDialogCloseButton").onclick = event => {
+    event.target.parentElement.parentElement.classList.add("hidden");
   };
+  // Close intro dialog when entering VR mode.
+  document.querySelector('a-scene').addEventListener('enter-vr', event => {
+    document.querySelector("#introDialogCloseButton").click();
+  });
+  // Load location presets and subdialog.
+  let presetSel = document.querySelector("#locationPresets");
+  let locLatInput = document.querySelector("#locLatitude");
+  let locLonInput = document.querySelector("#locLongitude");
+  presetSel.onchange = function(event) {
+    if (event.target.selectedIndex >= 0 && event.target.value >= 0) {
+      let preset = locationPresets[event.target.value];
+      locLatInput.value = preset.latitude;
+      locLonInput.value = preset.longitude;
+    }
+    else {
+      locLatInput.value = "";
+      locLonInput.value = "";
+      if (event.target.value == -2) {
+        navigator.geolocation.getCurrentPosition(pos => {
+          locLatInput.value = pos.coords.latitude;
+          locLonInput.value = pos.coords.longitude;
+        });
+      }
+    }
+  };
+  for (let i = -2; i < locationPresets.length; i++) {
+    var opt = document.createElement("option");
+    opt.value = i;
+    if (i == -2) { opt.text = "Get Your Location"; }
+    else if (i == -1) { opt.text = "Set Custom Location"; }
+    else { opt.text = locationPresets[i].title; }
+    presetSel.add(opt, null);
+  }
+  presetSel.value = 0;
+  locLatInput.value = centerPos.latitude;
+  locLonInput.value = centerPos.longitude;
+  document.querySelector("#locationLoadButton").onclick = event => {
+    centerPos.latitude = locLatInput.valueAsNumber;
+    centerPos.longitude = locLonInput.valueAsNumber;
+    loadScene();
+  };
+  // Load objects into scene.
   map = document.querySelector("#map");
   tiles = document.querySelector("#tiles");
   items = document.querySelector("#items");
+  loadScene();
+}
+
+function loadScene() {
+  while (tiles.firstChild) { tiles.removeChild(tiles.firstChild); }
+  while (items.firstChild) { items.removeChild(items.firstChild); }
   loadGroundTiles();
   loadTrees();
   loadBuildings();

diff --git a/vrmap.css b/vrmap.css
@@ -18,6 +18,8 @@ body {
   left: 0;
   width: 50ch;
   max-width: 92%;
+  max-height: 96%;
+  overflow: auto;
   z-index: 10;
   background-color: rgba(255, 255, 255, .8);
   border: 0;
@@ -26,6 +28,12 @@ body {
   border-radius: 5px;
 }
 
+@media all and (max-height: 800px) {
+  #introDialog {
+    top: 2%;
+  }
+}
+
 #introDialog.hidden {
   top: -1000%;
   display: block;
@@ -37,7 +45,32 @@ h1 {
   font-size: 1.5em;
 }
 
+#locationSettings select,
+#locationSettings input,
+#locationSettings button {
+  font-size: inherit;
+}
+
+.coords {
+  width: 15ch;
+}
+
+#legalinfo {
+  font-size: 0.75em;
+}
+
 .dialogButtonLine {
   text-align: center;
 }
 
+@media all and (max-width: 450px) {
+  body {
+    font-size: 0.85em;
+  }
+  h1 {
+    font-size: 1.3em;
+  }
+  #legalinfo {
+    font-size: 0.85em;
+  }
+}