From 99c22987e3dd09654709fabb1e41dff7b048f57c Mon Sep 17 00:00:00 2001 From: Josh-Dev-Quest Date: Fri, 27 Feb 2026 07:10:06 +0100 Subject: [PATCH] Map is displayed and interactive --- js/main.js | 31 +++++++++++++++++++-- js/map.js | 69 ++++++++++++++++++++++++++++++++++------------- map-page.html | 74 ++++++++++++++++++++------------------------------- 3 files changed, 109 insertions(+), 65 deletions(-) diff --git a/js/main.js b/js/main.js index dbe0ff7..3e51915 100644 --- a/js/main.js +++ b/js/main.js @@ -9,11 +9,11 @@ document.addEventListener('DOMContentLoaded', function() { function switchMode(mode) { if (mode === 'create') { -倉-> modeCreateBtn.classList.add('active'); + modeCreateBtn.classList.add('active'); modeViewBtn.classList.remove('active'); createPanel.classList.add('active-panel'); viewPanel.classList.remove('active-panel'); - //ҧ Enable marker adding + // Enable marker adding window.isCreatingJourney = true; } else { // view mode modeCreateBtn.classList.remove('active'); @@ -40,6 +40,33 @@ document.addEventListener('DOMContentLoaded', function() { window.currentJourney.name = title; window.currentJourney.description = description; + + // Add the current journey to the journeys array if not already added + const existingJourneyIndex = window.journeys.findIndex(j => j.id === window.currentJourney.id); + if (existingJourneyIndex === -1) { + window.journeys.push({ + id: window.currentJourney.id, + name: window.currentJourney.name, + description: window.currentJourney.description, + markers: window.currentJourney.markers.map(marker => ({ + id: marker.id, + lngLat: marker.getLngLat(), + content: marker.content + })) + }); + } else { + window.journeys[existingJourneyIndex] = { + ...window.journeys[existingJourneyIndex], + name: window.currentJourney.name, + description: window.currentJourney.description, + markers: window.currentJourney.markers.map(marker => ({ + id: marker.id, + lngLat: marker.getLngLat(), + content: marker.content + })) + }; + } + window.saveJourneyToLocalStorage(); // Show notification diff --git a/js/map.js b/js/map.js index 08d66f4..7badb91 100644 --- a/js/map.js +++ b/js/map.js @@ -11,21 +11,11 @@ let currentMarkerBeingEdited = null; let isCreatingJourney = true; function saveJourneyToLocalStorage() { - journeys.push({ - id: currentJourney.id, - name: currentJourney.name, - description: currentJourney.description, - markers: currentJourney.markers.map(marker => ({ - id: marker.id, - lngLat: marker.getLngLat(), - content: marker.content - })) - }); localStorage.setItem('journeys', JSON.stringify(journeys)); } function loadJourneysFromLocalStorage() { - const stored = localStorage.getItem('journeyMapper_journeys'); + const stored = localStorage.getItem('journeys'); if (stored) { journeys = JSON.parse(stored); } @@ -60,6 +50,8 @@ function createMarker(lngLat) { openMarkerEditor(marker); }); + currentJourney.markers.push(marker); + updateJourneyPath(); return marker; } @@ -72,10 +64,10 @@ function openMarkerEditor(marker) { document.getElementById('marker-coords').textContent = `${marker.getLngLat().lng.toFixed(4)}, ${marker.getLngLat().lat.toFixed(4)}`; - // Update imagine review + // Update image review const imagePreview = document.getElementById('image-preview'); imagePreview.innerHTML = ''; - 学生学习 if (marker.content.images && marker.content.images.length > 0) { + if (marker.content.images && marker.content.images.length > 0) { marker.content.images.forEach(img => { const imgEl = document.createElement('img'); imgEl.src = img; @@ -91,6 +83,20 @@ function closeMarkerEditor() { currentMarkerBeingEdited = null; } +// Function to update the journey path +function updateJourneyPath() { + const coordinates = currentJourney.markers.map(marker => marker.getLngLat().toArray()); + + map.getSource('journey-path').setData({ + type: 'Feature', + properties: {}, + geometry: { + type: 'LineString', + coordinates: coordinates + } + }); +} + document.addEventListener('DOMContentLoaded', function() { map = new maplibregl.Map({ container: 'map', @@ -163,22 +169,49 @@ document.addEventListener('DOMContentLoaded', function() { currentJourney.markers.splice(index, 1); } + updateJourneyPath(); // Update path after marker deletion + closeMarkerEditor(); }); // Add marker on map click map.on('click', (e) => { if (isCreatingJourney) { - const marker = createMarker(e.lngLat); - currentJourney.markers.push(marker); - updateJourneyPath(); + createMarker(e.lngLat); } }); // Save journey button - document.getElementById('save-journey-btn').addEventListener('click', function() { - currentJourney.name = document.getElementById('journey-name').value; + document.getElementById('save-journey').addEventListener('click', function() { + currentJourney.name = document.getElementById('journey-title').value; currentJourney.description = document.getElementById('journey-description').value; + + // Add the current journey to the journeys array if not already added + const existingJourneyIndex = journeys.findIndex(j => j.id === currentJourney.id); + if (existingJourneyIndex === -1) { + journeys.push({ + id: currentJourney.id, + name: currentJourney.name, + description: currentJourney.description, + markers: currentJourney.markers.map(marker => ({ + id: marker.id, + lngLat: marker.getLngLat(), + content: marker.content + })) + }); + } else { + journeys[existingJourneyIndex] = { + ...journeys[existingJourneyIndex], + name: currentJourney.name, + description: currentJourney.description, + markers: currentJourney.markers.map(marker => ({ + id: marker.id, + lngLat: marker.getLngLat(), + content: marker.content + })) + }; + } + saveJourneyToLocalStorage(); alert('Journey saved!'); }); diff --git a/map-page.html b/map-page.html index 5fb8c6c..dbcb1bb 100644 --- a/map-page.html +++ b/map-page.html @@ -5,8 +5,13 @@ Journey Mapper - Interactive Map - - + + + + @@ -191,73 +196,52 @@
- - + +
- +
- - -
- -
- -
-
- -
-
- - - -
-
+ +
- - Paste a YouTube or Vimeo video link +
-
-

Coordinates: 0, 0

+
+ +
+
+ +
+ +
- - - + + +
- +
-
- Journey saved successfully! -
+

- - + - + +