diff --git a/common/js/treknav.js b/common/js/treknav.js index ef45fcd..0e8f593 100644 --- a/common/js/treknav.js +++ b/common/js/treknav.js @@ -2,6 +2,11 @@ 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 @@ -9,6 +14,17 @@ 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); } \ No newline at end of file diff --git a/denvegaser/index.html b/denvegaser/index.html index b9c6b89..d2bfaac 100644 --- a/denvegaser/index.html +++ b/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> \ No newline at end of file diff --git a/denvegaser/treknav.json b/denvegaser/treknav.json index 755194d..d38d1b0 100644 --- a/denvegaser/treknav.json +++ b/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" } ] \ No newline at end of file