Make all the default travel mode. Add text box label for focused ar…

…ea. Make sidebar collapsible. Add quick info map popup when sidebar is collapsed
osmus · Jul 30, 2024 · 2094eae · 2094eae
1 parent f5fad50
commit 2094eae
Show file tree

Hide file tree

Showing 7 changed files with 232 additions and 60 deletions.
diff --git a/css/main.css b/css/main.css
@@ -53,6 +53,26 @@ body {
 h1, h2, h3, h4, h5, h6 {
   font-weight: 700;
 }
+select {
+
+  font-family: inherit;
+  line-height: 1.4em;
+
+  background: white;
+  border: 1px solid #ddd;
+  border-radius: 5px;
+  padding: 4px;
+
+  appearance: none;
+  -webkit-appearance: none;
+  -moz-appearance:none;
+
+  background-image: url(/img/select-arrows.png) !important;
+  background-size: 11px;
+  background-repeat: no-repeat !important;
+  background-position-x: 100% !important;
+  background-position-y: 50% !important;
+}
 #header {
   width: 100%;
   color: #FFE2A8;
@@ -62,7 +82,7 @@ h1, h2, h3, h4, h5, h6 {
   align-items: center;
   height: 30px;
   background: #4f2e28;
-  padding: 0 10px 0 6px;
+  padding: 0 10px 0 8px;
   /*background: linear-gradient(90deg, #4A282A, #66373a);*/
   overflow-x: auto;
 }
@@ -86,14 +106,14 @@ h1, h2, h3, h4, h5, h6 {
   width: 20px;
   margin-right: 6px;
 }
-#header .main-title {
+#header .site-title {
   white-space: nowrap;
   display: flex;
   align-items: center;
   flex-direction: row;
   font-size: 15px;
 }
-#header .main-title a {
+#header .site-title a {
   display: inline-flex;
   margin-right: 3px;
 }
@@ -105,40 +125,81 @@ h1, h2, h3, h4, h5, h6 {
   bottom: 0;
   top: 30px;
 }
-#body p {
+#sidebar p {
   margin-bottom: 12px;
 }
 #map-wrap {
   z-index: 0;
   flex-basis: 100%;
-  padding: 10px 10px 10px 0;
+  padding: 10px;
   position: relative;
 }
+body.sidebar-open #map-wrap {
+  padding-right: 0;
+}
 #map {
-  border: 1px solid #ddd;
+  border: 1px solid #ccc;
   height: 100%;
   width: 100%;
 }
-#controls {
+#map .quickinfo {
+  font-family: "National Park", "Source Sans", "Helvetica", sans-serif;
+}
+#nameplate {
+  color: #000;/*#331d1a;*/
+  line-height: 1.4;
+  padding: 0 10px 10px 0;
+  border-right: 1px solid #ccc;
+  border-bottom: 1px solid #ccc;
+  background: #fff;
   position: absolute;
+  top: 10px;
   left: 10px;
+  z-index: 2;
+  text-align: left;
+  max-width: 100%;
+}
+#nameplate select {
+  font-size: 16px;
+  width: 100%;
+}
+#nameplate > *:not(:last-child) {
+  margin-bottom: 8px;
+}
+#nameplate .swatch {
+  width: 1em;
+  height: 1em;
+  display: inline-block;
+  vertical-align: text-bottom;
+  margin-right: 6px;
+  border: 1px solid #738C40;
+  background: #D8E8B7;
+}
+#nameplate a {
+  color: #aaa;
+  text-decoration: none;
+  vertical-align: text-bottom;
+  padding-left: 8px;
+  margin-top: -2px;
+}
+#nameplate a:hover {
+  text-decoration: underline;
+}
+#nameplate h1 {
+  font-size: 20px;
+}
+#controls {
+  position: absolute;
+  right: 50px;
   top: 20px;
+  width: 100%;
+  max-width: 200px;
   z-index: 2;
   border-radius: 5px;
 }
 #controls select {
   font-size: 15px;
-  font-family: inherit;
-  line-height: 1.4em;
-  max-width: 200px;
   width: 100%;
-  appearance: none;
-  -webkit-appearance: none;
-  -moz-appearance:none;
-  background: white;
-  border: 1px solid #ddd;
-  border-radius: 5px;
-  padding: 4px;
   box-shadow: 0 0 2px rgba(0, 0, 0, 0.2);
   margin-bottom: 8px;
 }
@@ -148,13 +209,16 @@ h1, h2, h3, h4, h5, h6 {
   z-index: 100;
 }
 #sidebar {
-  display: flex;
+  display: none;
   flex-direction: column;
   background: white;
   height: 100%;
   min-width: 250px;
   width: 33.3333vw;
 }
+body.sidebar-open #sidebar {
+  display: flex;
+}
 #sidebar .top,
 #sidebar .body {
   padding: 10px;
@@ -199,18 +263,26 @@ h1, h2, h3, h4, h5, h6 {
 
 @media only screen and (max-width: 600px) {
   #body {
-    flex-direction: column-reverse;
+    flex-direction: column;
+  }
+  #nameplate {
+    position: relative;
+    left: 0;
+    top: 0;
+    padding: 10px;
   }
   #header .tagline {
     display: none;
   }
   #sidebar {
     width: 100%;
-    height: 50%;
+    height: 30%;
     flex: 0 0 auto;
     min-width: 100%;
   }
   #map-wrap {
+    display: flex;
+    flex-direction: column;
     padding: 0;
   }
   #map {

diff --git a/img/select-arrows.png b/img/select-arrows.png
diff --git a/index.html b/index.html
@@ -23,24 +23,25 @@
       })(window, document, 'dataLayer', '0245a355-96b9-47f5-997e-8cafd843c18a');
     </script>
     <div id="header">
-      <div class="main-title">
+      <div class="site-title">
         <a href="/"><img src="img/opentrailmap-logo.svg" alt="Stick figure hiker with walking stick and backpack above a dashed line surrounded by a map outline"/> <h1>OpenTrailMap</h1></a> <p class="tagline">by <a href="https://openstreetmap.us" target="_blank">OpenStreetMap US</a></p>
       </div>
       <ul class="main-menu">
         <li><a href="https://openstreetmap.us/our-work/trails/" target="_blank">About</a></li>
         <li><a href="https://github.com/osmus/OpenTrailMap" target="_blank">GitHub</a></li>
         <li><a href="https://openstreetmap.app.neoncrm.com/forms/trails-stewardship-initiative" target="_blank">Donate</a></li>
+        <li><a href="" id="inspect-toggle">Inspect</a></li>
       </ul>
     </div>
     <div id="body">
-      <div id="sidebar"></div>
       <div id="map-wrap">
-        <div id="map"></div>
-        <div id="controls">
+        <!--<div id="controls"></div>-->
+        <div id="nameplate">
+          <h1 id="focus-meta" style="display: none;"><span style="flex-basis: 100%;"><span class="swatch"></span><span id="map-title"></span></span><a href="" title="Clear focus area" id="clear-focus">⨯</a></h1>
           <select id="travel-mode">
             <optgroup label="Trails">
-              <option value="all">All Trails</option>
-              <option value="foot" selected>Hiking & Walking Trails</option>
+              <option value="all" selected>All Trails</option>
+              <option value="foot">Hiking & Walking Trails</option>
               <option value="wheelchair">Wheelchair Trails</option>
               <option value="bicycle">Biking Trails</option>
               <option value="horse">Horseback Riding Trails</option>
@@ -53,7 +54,9 @@
           </select>
           <select id="lens"></select>
         </div>
+        <div id="map"></div>
       </div>
+      <div id="sidebar"></div>
     </div>
     <script type="application/javascript" src="js/mapController.js"></script>
     <script type="application/javascript" src="js/sidebarController.js"></script>

diff --git a/js/hashController.js b/js/hashController.js
@@ -50,4 +50,5 @@ function updateForHash() {
   setLens(hashValue("lens"));
   selectEntity(selectedEntityInfoFromHash());
   focusEntity(focusedEntityInfoFromHash());
+  hashValue("inspect") ? openSidebar() : closeSidebar();
 }
diff --git a/js/index.js b/js/index.js
@@ -206,7 +206,7 @@ const waterwayOnlyLenses = [
   "rapids",
   "open_water",
 ];
-const defaultTravelMode = "foot";
+const defaultTravelMode = "all";
 const defaultLens= "";
 var travelMode = defaultTravelMode;
 var lens = defaultLens;
@@ -238,6 +238,19 @@ function focusEntity(entityInfo) {
   });
 
   updateMapForFocus();
+
+  document.getElementById("map-title").innerText = '';
+
+  if (focusedEntityInfo) {
+    document.getElementById("focus-meta").style.display = 'flex';
+    fetchOsmEntity(type, entityId).then(function(entity) {
+      if (entity?.tags?.name) {
+        document.getElementById("map-title").innerText = entity.tags.name;
+      }
+    });
+  } else  {
+    document.getElementById("focus-meta").style.display = 'none';
+  }
 }
 
 function selectEntity(entityInfo) {
@@ -258,26 +271,16 @@ function selectEntity(entityInfo) {
   updateMapForSelection();
   updateMapForHover();
 
-  updateSidebar(selectedEntityInfo);
+  if (isSidebarOpen()) updateSidebar();
 
   if (!selectedEntityInfo) return;
 
-  fetchOsmEntity(type, entityId).then(function(entity) {
-    if (entity) {
-      fetchOsmChangeset(entity.changeset).then(function(changeset) {
-        updateMetaTable(entity, changeset);
-      });
-    }
-    var tags = entity && entity.tags;
-    if (tags) updateTagsTable(tags);
-
-    // update map again in case we selected a relation and want to highlight members
-    updateMapForSelection();
-  });
-
-  fetchOsmEntityMemberships(type, entityId).then(function(memberships) {
-    updateMembershipsTable(memberships);
-  });
+  if (type === "relation") {
+    fetchOsmEntity(type, entityId).then(function(entity) {
+      // update map again to add highlighting to any relation members
+      updateMapForSelection();
+    });
+  }
 }
 function updateLensControl() {
   var html = "";
@@ -334,6 +337,14 @@ window.onload = function(event) {
   document.getElementById("lens").addEventListener('change', function(e) {
     setLens(e.target.value);
   });
+  document.getElementById("inspect-toggle").addEventListener('click', function(e) {
+    e.preventDefault();
+    toggleSidebar();
+  });
+  document.getElementById("clear-focus").addEventListener('click', function(e) {
+    e.preventDefault();
+    focusEntity();
+  });
 
   updateLensControl();
 
@@ -404,4 +415,4 @@ window.onload = function(event) {
 
   map
     .on('load', loadInitialMap);
-}
+}