mapsmaps

tif-calin · Aug 29, 2023 · 4dcff1a · 4dcff1a
1 parent 673e2b1
commit 4dcff1a
Show file tree

Hide file tree

Showing 3 changed files with 82 additions and 5 deletions.
diff --git a/maps/app.js b/maps/app.js
@@ -5,7 +5,7 @@ const leaflet = ({ latitude, longitude }) => {
 
   L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
     maxZoom: 19,
-    attribution: 'OSM'
+    attribution: '🄯 OSM'
   }).addTo(map);
 
   L.marker([latitude, longitude]).addTo(map);
@@ -21,6 +21,8 @@ const refuge = async ({ latitude, longitude }) => {
 };
 
 const main = async () => {
+  const LISTINGS_CONTAINER = document.querySelector('#table > tbody');
+
   const successCallback = async (position) => {
     const { timestamp, coords } = position;
 
@@ -36,10 +38,35 @@ const main = async () => {
 
     leaflet(data);
     const jsonRefuge = await refuge(data);
-    console.log(jsonRefuge)
-    jsonRefuge.forEach(({ latitude, longitude }) => {
-      L.marker([latitude, longitude]).addTo(map);
-    })
+    console.log(jsonRefuge);
+
+    LISTINGS_CONTAINER.innerHTML = '';
+    jsonRefuge.forEach(({ latitude, longitude, comment, updated_at, distance, name, street, city, state }) => {
+      const fillOpacity = 1 / (distance || 1);
+      const radius = 4 + fillOpacity;
+      const address = `${street.trim()}, ${city.trim()}, ${state.trim()}`;
+
+      const marker = L.circleMarker([latitude, longitude], { radius, color: 'white', fillColor: 'black', fillOpacity, weight: 1.5 }).addTo(map);
+      marker.bindPopup(`
+        <div class="map-popup">
+          <p class="name">${name}</p>
+          <p class="address">${address}</p>
+          <p class="comment">${comment}</p>
+          <p class="distance">${Math.round(distance * 1_000) / 1_000} miles away</p>
+          <p class="timestamp">${new Date(updated_at).toLocaleString()}</p>
+          <div class="go"><a href='maps://?address="${address}"&near="${latitude},${longitude}"&q="${name}"'>GO</a></div>
+        </div>
+      `);
+
+      const listing = document.createElement('tr');
+      listing.innerHTML = `
+        <td>${name}</td>
+        <td>${address}</td>
+        <td>${Math.round(distance * 1_000) / 1_000} miles</td>
+      `;
+      LISTINGS_CONTAINER.appendChild(listing);
+
+    });
 
     return { timestamp, coords };
   };

diff --git a/maps/index.html b/maps/index.html
@@ -27,6 +27,16 @@ <h1 class="title">
 
     <main>
       <div id="map"></div>
+      <table id="table">
+        <thead>
+          <tr>
+            <td>info</td> <!-- name, 3 icons, upvotes -->
+            <td>address</td>
+            <td>distance</td>
+          </tr>
+        </thead>
+        <tbody></tbody>
+      </table>
     </main>
 
     <footer></footer>

diff --git a/maps/style.css b/maps/style.css
@@ -30,3 +30,43 @@
   min-width: 500px;
   background: var(--clr-fg);
 }
+
+#map .map-popup {
+  position: relative;
+
+  & *:last-of-type,
+  & *:first-of-type {
+    margin-top: 0;
+    margin-bottom: 0;
+  }
+
+  & .name {
+    font-size: 1.5rem;
+    font-weight: 800;
+  }
+
+  & .address {
+    margin-top: 0;
+  }
+
+  & .comment {
+    border-left: 3px solid var(--clr-text-sub);
+    padding-left: 0.5rem;
+  }
+
+  & .timestamp {
+    opacity: 0.8;
+    font-style: italic;
+    text-align: right;
+  }
+
+  & .go {
+    position: absolute;
+    bottom: 0;
+  }
+}
+
+#table thead td {
+  font-weight: 700;
+  text-align: center;
+}