feat: improve mapping functionality with markers, path, CORS

Co-authored-by: aider (ollama/qwen2.5-coder:32b) <aider@aider.chat>

js/map.js

@@ -10,12 +10,12 @@ window.createMarker = function(lngLat, content = {}) {
 
     // Create popup with marker content
     const popup = new maplibregl.Popup({ offset: 25 })
-    .setHTML(`<strong>${content.title || 'Untitled'}</strong>`);
+        .setHTML(`<strong>${content.title || 'Untitled'}</strong>${content.description ? `<br>${content.description}` : ''}`);
     
     marker.setPopup(popup);
 
     // When the marker is clicked, open the editor
-  marker.getElement().addEventListener('click', () => {
+    marker.on('click', () => {
         openMarkerEditor(marker);
     });
 
@@ -23,11 +23,13 @@ window.createMarker = function(lngLat, content = {}) {
     const markerData = {
         id: Date.now(),
         lngLat: lngLat.toArray(),
-    content: content
+        content: content,
+        coordinates: [lngLat.lat, lngLat.lng]
     };
 
-  // Add marker to current journey
+    if (!currentJourney.markers) currentJourney.markers = [];
     currentJourney.markers.push(marker);
+    
     updateJourneyPath();
     
     // Add marker to the markers list
@@ -41,16 +43,17 @@ window.createMarker = function(lngLat, content = {}) {
     
     // Add click event to marker item
     markerElement.addEventListener('click', function() {
-    // Center map on marker
         map.flyTo({
-      center: lngLat,
+            center: [lngLat.lng, lngLat.lat],
             zoom: 10
         });
-    
-    // Open marker editor
         openMarkerEditor(marker);
     });
     
+    if (markersContainer.children.length === 1 && 
+        markersContainer.firstElementChild.id === 'empty-markers') {
+        markersContainer.removeChild(markersContainer.firstElementChild);
+    }
     markersContainer.appendChild(markerElement);
     
     return marker;
@@ -58,8 +61,35 @@ window.createMarker = function(lngLat, content = {}) {
 
 // Update the updateJourneyPath function to handle cases where markers array is empty
 function updateJourneyPath() {
-  if (!currentJourney.markers || currentJourney.markers.length === 0) {
+    if (!map.getSource('journey-path')) {
-    // If no markers, clear the path
+        map.addSource('journey-path', {
+            type: 'geojson',
+            data: {
+                type: 'Feature',
+                properties: {},
+                geometry: {
+                    type: 'LineString',
+                    coordinates: []
+                }
+            }
+        });
+        
+        map.addLayer({
+            id: 'journey-path',
+            type: 'line',
+            source: 'journey-path',
+            layout: {
+                'line-join': 'round',
+                'line-cap': 'round'
+            },
+            paint: {
+                'line-color': '#3887be',
+                'line-width': 4
+            }
+        });
+    }
+
+    if (currentJourney.markers.length === 0) {
         map.getSource('journey-path').setData({
             type: 'Feature',
             properties: {},
@@ -71,7 +101,10 @@ function updateJourneyPath() {
         return;
     }
     
-  const coordinates = currentJourney.markers.map(marker => marker.getLngLat().toArray());
+    const coordinates = currentJourney.markers.map(marker => [
+        marker.getLngLat().lng,
+        marker.getLngLat().lat
+    ]);
     
     map.getSource('journey-path').setData({
         type: 'Feature',