Add map to main view

soundscape-community · Dec 29, 2023 · f047252 · f047252
1 parent 7a71fe6
commit f047252
Show file tree

Hide file tree

Showing 5 changed files with 21 additions and 8 deletions.
diff --git a/app/main.js b/app/main.js
@@ -5,6 +5,7 @@ import { createSpatialPlayer } from './audio.js'
 import { clearFeatureCache, clearURLCache } from './cache.js'
 import { createCalloutAnnouncer } from './callout.js'
 import { getLocation, createLocationProvider } from "./geospatial.js";
+import { createMap } from './map.js';
 
 const proximityThresholdMeters = 500;
 
@@ -13,9 +14,15 @@ document.addEventListener('DOMContentLoaded', function () {
   const locationProvider = createLocationProvider();
   const audioQueue = createSpatialPlayer(locationProvider);
   const announcer = createCalloutAnnouncer(audioQueue, proximityThresholdMeters, true);
+  const map = createMap('map');
 
   // Register for updates to location
   locationProvider.subscribe(announcer.locationChanged);
+  locationProvider.subscribe((latitude, longitude, heading) => {
+    // Map should follow current point
+    map.setView([latitude, longitude], 15);
+    map.plotPoints([{ latitude: latitude, longitude: longitude, heading: heading }], proximityThresholdMeters);        
+  });
 
   // Hook up click event handlers
   var btnNearMe = document.getElementById('btn_near_me');

diff --git a/app/map.js b/app/map.js
@@ -28,7 +28,7 @@ export function createMap(id) {
       L.circle([point.latitude, point.longitude], {
         color: 'red',
         fillColor: '#f03',
-        fillOpacity: 0.5,
+        fillOpacity: 0.3,
         radius: radiusMeters  // drawn radius is based on proximity threshold for callouts
       }).addTo(markersLayer);
 

diff --git a/app/styles/main.css b/app/styles/main.css
@@ -11,4 +11,8 @@ button {
     border-right: 10px solid transparent;
     border-bottom: 40px solid red; /* You can change the color */
     transform-origin: bottom center;
-}
+}
+
+#map {
+    height: 400px;
+  }
diff --git a/index.html b/index.html
@@ -3,15 +3,18 @@
     <head>
         <!-- Render to a usable size on mobile -->
         <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
+        <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
         <link rel="stylesheet" href="app/styles/main.css" />
 
+        <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
         <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
         <script src="app/main.js" type="module"></script>
     </head>
     <body>
         <button id="btn_near_me">Places Near Me</button>
         <button id="btn_clear">Clear Cached Data</button>
 
-        <div id="log-container"></div>
+        <div id="map"></div>
     </body>
 </html>
diff --git a/replay_gpx.html b/replay_gpx.html
@@ -1,13 +1,12 @@
 <!DOCTYPE html>
 <html>
     <head>
+        <!-- Render to a usable size on mobile -->
+        <meta name="viewport" content="width=device-width, initial-scale=1.0" />
+
         <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
         <link rel="stylesheet" href="app/styles/main.css" />
-        <style>
-          #map {
-            height: 400px;
-          }
-        </style>
+
         <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
         <script src='https://unpkg.com/@turf/turf@6/turf.min.js'></script>
         <script src="app/gpx.js" type="module"></script>