Implemented section maps with OSM and OpenLayers

common/js/treknav.js

@@ -2,13 +2,29 @@
 const navSection = document.querySelector('#navSection');
 const trekYouTube = document.querySelector('#trekYouTube');
 
+// OpenLayers components
+const GeoJSON = ol.format.GeoJSON;
+const vectorSource = new ol.source.Vector({});
+const vectorLayer = new ol.layer.Vector({ source: vectorSource });
+
 let sections;
 
 // Retrieve the trek sections for navigation
 fetch(document.location.href + 'treknav.json')
     .then((response) => response.json())
     .then((json) => createNav(json));
 
+// Create the OpenStreetMap map with GeoJSON-friendly projection
+const map = new ol.Map({
+  layers: [
+    new ol.layer.Tile({
+      source: new ol.source.OSM(),
+    }),
+    vectorLayer
+  ],
+  target: 'map'
+});
+
 // Create the nav elements
 function createNav(items) {
   if(!Array.isArray(items) || (items.length === 0)) {
@@ -25,6 +41,7 @@ function createNav(items) {
 
   sections = items;
   trekYouTube.setAttribute('src', sections[0].youtube || '');
+  updateSection(0);
 }
 
 // Update the selected section/nav
@@ -34,4 +51,30 @@ function handleNavClick(index) {
   });
 
   trekYouTube.setAttribute('src', sections[index].youtube || '');
+  updateSection(index);
+}
+
+// Update the section
+function updateSection(index) {
+  fetch(document.location.href + '/geojson/' + sections[index].geojson)
+    .then((response) => response.json())
+    .then((json) => { updateMap(json); });
+}
+
+// Update the map to fit the current features
+function updateMap(json) {
+  vectorSource.clear();
+  vectorSource.addFeatures(new GeoJSON().readFeatures(json));
+
+  let extent = vectorSource.getExtent();
+  let center = ol.extent.getCenter(extent);
+  let view = new ol.View({
+      projection: 'EPSG:4326',
+      showFullExtent: true,
+      extent: extent,
+      center: center,
+      zoom: 6
+  });
+
+  map.setView(view);
 }

denvegaser/index.html

@@ -4,6 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <title> denvegaser </title>
+    <link rel="stylesheet" href="../common/style/ol.css">
     <link rel="stylesheet" href="../common/style/bootstrap.min.css">
     <link rel="stylesheet" href="../common/style/bootstrap-icons.min.css">
   </head>
@@ -91,12 +92,14 @@ <h1 class="text-center mt-5"> Denver to Las Vegas roundtrip on scenic byways </h
                         referrerpolicy="strict-origin-when-cross-origin"
                         allowfullscreen></iframe>
               </div>
+              <div id="map" class="map w-100" style="height:480px"></div>
             </div>
           </div>
         </div>
       </div>
     </div>
     <script src="../common/js/bootstrap.bundle.min.js"></script>
+    <script src="../common/js/ol.js"></script>
     <script type="module" src="../common/js/treknav.js"></script>
   </body>
 </html>

denvegaser/treknav.json

@@ -1,54 +1,67 @@
 [
   {
     "title": "Colorado Rockies",
-    "youtube": "https://www.youtube.com/embed/C0JDjaaZDPM?si=qLHDCyaMpRucTU7q"
+    "youtube": "https://www.youtube.com/embed/C0JDjaaZDPM?si=qLHDCyaMpRucTU7q",
+    "geojson": "us6-i70.geojson"
   },
   {
     "title": "Colorado National Monument",
-    "youtube": "https://www.youtube.com/embed/kGw4kEPwkQM?si=lTw_BmrkrCWDOgCS"
+    "youtube": "https://www.youtube.com/embed/kGw4kEPwkQM?si=lTw_BmrkrCWDOgCS",
+    "geojson": "rimrockdrive.geojson"
   },
   {
     "title": "Colorado River (UT-128)",
-    "youtube": "https://www.youtube.com/embed/dXqKw5lKsdQ?si=0UNrST5FMpPrnbSG"
+    "youtube": "https://www.youtube.com/embed/dXqKw5lKsdQ?si=0UNrST5FMpPrnbSG",
+    "geojson": "cr175-ut128.geojson"
   },
   {
     "title": "Arches National Park",
-    "youtube": "https://www.youtube.com/embed/wEaj0fMoUOg?si=QN_oYSSmhAQhO-RC"
+    "youtube": "https://www.youtube.com/embed/wEaj0fMoUOg?si=QN_oYSSmhAQhO-RC",
+    "geojson": "archesnp.geojson"
   },
   {
     "title": "Utah Scenic Byway 24",
-    "youtube": "https://www.youtube.com/embed/mck-YCIXEu8?si=JnyykopqbU8xeP23"
+    "youtube": "https://www.youtube.com/embed/mck-YCIXEu8?si=JnyykopqbU8xeP23",
+    "geojson": "i70-ut24.geojson"
   },
   {
     "title": "Capitol Reef National Park",
-    "youtube": "https://www.youtube.com/embed/1IRXq54QY8Y?si=HiceSg1jkiFI7trA"
+    "youtube": "https://www.youtube.com/embed/1IRXq54QY8Y?si=HiceSg1jkiFI7trA",
+    "geojson": "capitolreefnp.geojson"
   },
   {
     "title": "Utah Scenic Byway 12",
-    "youtube": "https://www.youtube.com/embed/0UcUtnM-s5M?si=Vq_seYViBwCLC6so"
+    "youtube": "https://www.youtube.com/embed/0UcUtnM-s5M?si=Vq_seYViBwCLC6so",
+    "geojson": "ut12.geojson"
   },
   {
     "title": "Zion National Park",
-    "youtube": "https://www.youtube.com/embed/vl5yFmxryQY?si=zmDY7EFaYySa2CTb"
+    "youtube": "https://www.youtube.com/embed/vl5yFmxryQY?si=zmDY7EFaYySa2CTb",
+    "geojson": "zionnp.geojson"
   },
   {
     "title": "Hoover Dam",
-    "youtube": "https://www.youtube.com/embed/px5Avuye_IE?si=aPIdCu0ka-FJKkXC"
+    "youtube": "https://www.youtube.com/embed/px5Avuye_IE?si=aPIdCu0ka-FJKkXC",
+    "geojson": "hooverdam.geojson"
   },
   {
     "title": "Historic Route 66",
-    "youtube": "https://www.youtube.com/embed/AfT1L20GJ2g?si=FfQZrN3SdD3TZlq2"
+    "youtube": "https://www.youtube.com/embed/AfT1L20GJ2g?si=FfQZrN3SdD3TZlq2",
+    "geojson": "us66.geojson"
   },
   {
     "title": "Grand Canyon National Park",
-    "youtube": "https://www.youtube.com/embed/NZADtE7_z2Y?si=urrxpgLuFcreYjZg"
+    "youtube": "https://www.youtube.com/embed/NZADtE7_z2Y?si=urrxpgLuFcreYjZg",
+    "geojson": "az64.geojson"
   },
   {
     "title": "GC to VotG",
-    "youtube": "https://www.youtube.com/embed/j9CuPNTUHxI?si=u5kNQOpkxFwPc6F6"
+    "youtube": "https://www.youtube.com/embed/j9CuPNTUHxI?si=u5kNQOpkxFwPc6F6",
+    "geojson": "az64-us89-us160-us163.geojson"
   },
   {
     "title": "VotG & Moki Dugway",
-    "youtube": "https://www.youtube.com/embed/yp2mrequgi8?si=pzC1i9HlnWCd61yR"
+    "youtube": "https://www.youtube.com/embed/yp2mrequgi8?si=pzC1i9HlnWCd61yR",
+    "geojson": "valleyofthegods-mokidugway.geojson"
   }
 ]