refresh maps

tif-calin · Feb 13, 2024 · 3c1ddf1 · 3c1ddf1
1 parent 479174a
commit 3c1ddf1
Show file tree

Hide file tree

Showing 6 changed files with 119 additions and 15 deletions.
diff --git a/maps/app.js b/maps/app.js
@@ -1,13 +1,13 @@
+import './app/tabs.js';
+
 // Containers
 const OTHER_MAPS_CONTAINER = document.querySelector('#other > ul');
 const TABLE_CONTAINER = document.querySelector('#other > ul');
 
 // Data
 let MAP;
 const TILES = {
-  positron: {
-    url: 'http://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png'
-  },
+  positron: { url: 'https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png' },
   stadiaOutdoors: {
     url: 'https://tiles.stadiamaps.com/tiles/outdoors/{z}/{x}/{y}{r}.{ext}',
     options: {
@@ -18,6 +18,7 @@ const TILES = {
     }
   },
 };
+
 const OTHER_MAPS = [
   { label: 'GasBuddy gas price heatmap', url: 'https://www.gasbuddy.com/gaspricemap?lat=%LAT%&lng=%LNG%&z=7' },
   { label: 'REFUGE restrooms', url: 'https://www.refugerestrooms.org/restrooms?utf8=%E2%9C%93&lat=%LAT%&long=%LNG%' },
@@ -41,6 +42,9 @@ const OTHER_MAPS = [
     { label: 'couchsurfing.com', url: 'https://www.couchsurfing.com/', comment: 'couchsurfing, social network' },
     { label: 'vanly.app', url: 'https://vanly.app/', comment: 'airbnb for driveways basically, very expensive' },
     { label: 'boondockersbible.com', url: 'https://www.boondockersbible.com/list-of-places-for-boondocking/', comment: 'a small map of boondocking sites' },
+    { label: 'allstays.com', url: 'https://www.allstays.com/', comment: 'ugly UI free to browse, pay to get no ads, Walamrt parking info, truck stops, dump sites, etc' },
+    { label: 'ioverlander.com', url: 'https://www.ioverlander.com/', comment: 'nonprofit, aggregator of many different overlays incl. campsites, wifi, showers, etc' },
+    { label: 'sekr.com', url: 'https://sekr.com/', comment: 'van life social network and maps' },
   ] },
   { label: 'OneEarth bioregions', url: 'https://www.oneearth.org/navigator/' },
   { label: 'LocalHarvest', url: 'https://www.localharvest.org/search.jsp?jmp&scale=8&lat=%LAT%&lon=%LNG%' }
@@ -79,7 +83,9 @@ const populateOtherMaps = (lat = '', lng = '') => {
 
     const urls = link.list || [link];
 
-    urls.forEach(({ label, url, comment }, i) => {
+    urls.forEach(({ label, url }, i) => {
+      const comment = link.comment;
+
       const a = document.createElement('a');
 
       a.href = url.replace('%LAT%', lat).replace('%LNG%', lng);
@@ -114,12 +120,12 @@ const main = async () => {
 
     const data = { latitude, longitude, speed, heading, accuracy, altitude, altitudeAccuracy };
 
+    populateOtherMaps(latitude, longitude);
+
     const map = leaflet(data);
     const jsonRefuge = await refuge(data);
     console.log(jsonRefuge);
 
-    populateOtherMaps(latitude, longitude);
-
     if (LISTINGS_CONTAINER) LISTINGS_CONTAINER.innerHTML = '';
     jsonRefuge.forEach(({
       id, latitude, longitude,

diff --git a/maps/app/tabs.js b/maps/app/tabs.js
@@ -12,20 +12,23 @@ const SERVICES = [
   // need: transportation
   {
     category: 'vehicle', label: 'GasBuddy', sublabel: 'gas price heatmap', url: 'https://www.gasbuddy.com/gaspricemap',
-    params: { lat: '%LAT%', lng: '%LNG%', z: 7 }
+    params: { lat: '%LAT%', lng: '%LNG%', z: 8, }
   },
   { category: 'vehicle', label: 'free air pumps', url: 'https://www.freeairpump.com/map/' },
+
   // need: toilet
   {
     category: 'restrooms', label: 'REFUGE', sublabel: 'restrooms', url: 'https://www.refugerestrooms.org/restrooms',
     params: { urf8: '%E2%9C%93', lat: '%LAT%', long: '%LNG%' }
   },
+  //   https://americanrestroom.org/restroom-locations/
+
   // need: local info
   { category: 'indigeneity', label: 'Native Lands', url: 'https://native-land.ca/' },
   {
     category: 'nature', label: 'iNaturalist', sublabel: 'species observations',
     url: 'https://www.inaturalist.org/observations',
-    params: { lat: '%LAT%', lng: '%LNG%', place_id: 'any', radius: 7, view: 'species' }
+    params: { lat: '%LAT%', lng: '%LNG%', place_id: 'any', radius: 7, view: 'species', quality_grade: 'research' }
   },
   { category: 'nature', label: 'OneEarth', sublabel: 'bioregions', url: 'https://www.oneearth.org/navigator/' },
   {
@@ -45,6 +48,7 @@ const SERVICES = [
   },
   { category: 'shops & rec', label: 'FindMeCoffee', sublabel: 'coffee', url: 'https://www.findmecoffee.com/' },
   { category: 'drugs', label: 'weed legality by state', url: 'https://disa.com/marijuana-legality-by-state' },
+
   // need: sleep
   { category: 'boondocking', label: 'boondockerswelcome.com', url: 'https://www.boondockerswelcome.com/', comment: 'boondocking, $80/year for stays, $180/year to also stay at wineries, farms, breweries, etc' },
   { category: 'boondocking', label: 'boondocking.org', url: 'https://boondocking.org/', comment: 'boondocking, community-submitted tips' },
@@ -58,6 +62,7 @@ const SERVICES = [
   { category: 'boondocking', label: 'couchsurfing.com', url: 'https://www.couchsurfing.com/', comment: 'couchsurfing, social network' },
   { category: 'boondocking', label: 'vanly.app', url: 'https://vanly.app/', comment: 'airbnb for driveways basically, very expensive' },
   { category: 'boondocking', label: 'boondockersbible.com', url: 'https://www.boondockersbible.com/list-of-places-for-boondocking/', comment: 'a small map of boondocking sites' },
+
   // need: weather
   { category: 'weather', label: 'Windy', sublabel: 'rain map', url: 'https://www.windy.com/-Rain-thunder-rain?rain,%LAT%,%LNG%,9,i:pressure' },
 ];
@@ -84,3 +89,5 @@ const CATEGORIES = [
   { id: 'shop', label: 'Shops & Groceries' },
   { id: 'nature', label: 'Nature' },
 ];
+
+console.log('SERVICES', SERVICES);
diff --git a/maps/app/tabs/nature.js b/maps/app/tabs/nature.js
diff --git a/maps/app/tabs/restrooms.js b/maps/app/tabs/restrooms.js
diff --git a/maps/index.html b/maps/index.html
@@ -26,8 +26,14 @@ <h1 class="title">
     </header>
 
     <main>
-      <div class="grouping">
-        <h2 class="island">Restrooms</h2>
+      <div id="restrooms" class="grouping">
+        <div class="island title">
+          <h2>Restrooms</h2>
+          <div class="meta">
+            <p>Services</p>
+            <p><span>REFUGE</span></p>
+          </div>
+        </div>
         <div class="island">
           <div id="map"></div>
         </div>
@@ -45,8 +51,28 @@ <h2 class="island">Restrooms</h2>
         </section>
       </div>
 
-      <div class="grouping">
-        <h2 class="island">Other Maps</h2>
+      <div id="nature" class="grouping">
+        <div class="island title">
+          <h2>Nature</h2>
+          <div class="meta">
+            <p>Services</p>
+            <p>
+              <span>iNaturalist</span>
+              <span>GlobalTreeSearch</span>
+              <span>OneEarth</span>
+            </p>
+          </div>
+        </div>
+        <section class="island">
+          <noscript>please enable javascript to see results</noscript>
+          not yet implemented
+        </section>
+      </div>
+
+      <div id="other" class="grouping">
+        <div class="island title">
+          <h2>Other Maps</h2>
+        </div>
         <div class="island" id="other">
           <ul></ul>
         </div>

diff --git a/maps/style.css b/maps/style.css
@@ -1,6 +1,10 @@
 :root {
   --color-oc-cyan-0: #e3fafc;
   --color-oc-cyan-9: #0b7285;
+  --color-oc-grape-0: #f8f0fc;
+  --color-oc-grape-9: #862e9c;
+  --color-oc-indigo-0: #edf2ff;
+  --color-oc-indigo-9: #364fc7;
   --color-oc-gray-0: #f8f9fa;
   --color-oc-gray-1: #f1f3f5;
   --color-oc-gray-2: #e9ecef;
@@ -16,6 +20,12 @@
   --color-oc-orange-0: #fff4e6;
   --color-oc-orange-4: #ffa94d;
   --color-oc-orange-9: #d9480f;
+  --color-oc-pink-0: #fff0f6;
+  --color-oc-pink-9: #a61e4d;
+  --color-oc-red-0: #fff5f5;
+  --color-oc-red-9: #c92a2a;
+  --color-oc-violet-0: #f3f0ff;
+  --color-oc-violet-9: #5f3dc4;
   --dimensions-gap: 1rem;
   --font-didone: Didot, 'Bodoni MT', 'Noto Serif Display', 'URW Palladio L', P052, Sylfaen, serif;
   --font-geometric-humanist: Avenir, Montserrat, Corbel, 'URW Gothic', source-sans-pro, sans-serif;
@@ -120,6 +130,39 @@ main {
   }
 }
 
+main .title {
+  position: relative;
+
+  & .meta {
+    color: var(--clr-txt);
+    color: var(--clr-brnd-bg);
+    display: flex;
+      flex-direction: column;
+      gap: 0.1rem;
+    height: 100%;
+    padding: 0.5rem;
+    position: absolute;
+      left: calc(100% + 0.25rem);
+      top: 0;
+
+    & > * { margin: 0; }
+    & > p:first-child {
+      font-size: 0.6rem;
+      text-transform: uppercase;
+      font-weight: 850;
+    }
+    & > p:last-of-type {
+      display: flex;
+        flex-direction: row;
+        gap: 0.25rem;
+      font-size: 0.95rem;
+      font-weight: 300;
+
+      & > span:not(:last-of-type)::after { content: ","; }
+    }
+  }
+}
+
 #map {
   min-height: 500px;
   min-width: 500px;
@@ -182,12 +225,20 @@ main {
 }
 
 #table {
-  & thead td {
-    font-weight: 700;
-    text-align: center;
+  min-height: 652px;
+
+  & thead {
+    max-height: 24px;
+    vertical-align: top;
+
+    & td {
+      font-weight: 700;
+      text-align: center;
+    }
   }
 
   & tbody {
+    min-height: 622px;
     & tr > td:last-of-type { font-family: var(--fnt-mono); }
     & tr:nth-of-type(odd) { backdrop-filter: brightness(0.9); }
   }