FHGR_Frontend_Group_3_Project/js/map.js

// /Volumes/Data/Code/FHGR/Frontend/js/map.js
// Add the createMarker function to the window object
window.createMarker = function(lngLat, content = {}) {
  const marker = new maplibregl.Marker({
    color: '#3887be',
    draggable: true
  })
  .setLngLat(lngLat)
  .addTo(map);

  // Create popup with marker content
  const popup = new maplibregl.Popup({ offset: 25 })
    .setHTML(`<strong>${content.title || 'Untitled'}</strong>`);
  
  marker.setPopup(popup);

  // When the marker is clicked, open the editor
  marker.getElement().addEventListener('click', () => {
    openMarkerEditor(marker);
  });

  // Add marker to current journey
  const markerData = {
    id: Date.now(),
    lngLat: lngLat.toArray(),
    content: content
  };

  // Add marker to current journey
  currentJourney.markers.push(marker);
  updateJourneyPath();
  
  // Add marker to the markers list
  const markersContainer = document.getElementById('markers-container');
  const markerElement = document.createElement('div');
  markerElement.className = 'marker-item';
  markerElement.innerHTML = `
    <div class="marker-title">${content.title || 'Untitled'}</div>
    <div class="marker-coords">${lngLat.lng.toFixed(4)}, ${lngLat.lat.toFixed(4)}</div>
  `;
  
  // Add click event to marker item
  markerElement.addEventListener('click', function() {
    // Center map on marker
    map.flyTo({
      center: lngLat,
      zoom: 10
    });
    
    // Open marker editor
    openMarkerEditor(marker);
  });
  
  markersContainer.appendChild(markerElement);
  
  return marker;
};

// Update the updateJourneyPath function to handle cases where markers array is empty
function updateJourneyPath() {
  if (!currentJourney.markers || currentJourney.markers.length === 0) {
    // If no markers, clear the path
    map.getSource('journey-path').setData({
      type: 'Feature',
      properties: {},
      geometry: {
        type: 'LineString',
        coordinates: []
      }
    });
    return;
  }
  
  const coordinates = currentJourney.markers.map(marker => marker.getLngLat().toArray());
  
  map.getSource('journey-path').setData({
    type: 'Feature',
    properties: {},
    geometry: {
      type: 'LineString',
      coordinates: coordinates
    }
  });
}