refactor: switch from maplibregl to Leaflet

js/map.js

@@ -1,18 +1,13 @@
 // /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({
+    const marker = L.marker(lngLat, {
-        color: '#3887be',
+        draggable: true,
-        draggable: true
+        title: content.title || 'Untitled'
-    })
+    }).addTo(map);
-    .setLngLat(lngLat)
-    .addTo(map);
 
     // Create popup with marker content
-    const popup = new maplibregl.Popup({ offset: 25 })
+    marker.bindPopup(`<strong>${content.title || 'Untitled'}</strong>${content.description ? `<br>${content.description}` : ''}`);
-        .setHTML(`<strong>${content.title || 'Untitled'}</strong>${content.description ? `<br>${content.description}` : ''}`);
-    
-    marker.setPopup(popup);
     
     // When the marker is clicked, open the editor
     marker.on('click', () => {
@@ -22,7 +17,7 @@ window.createMarker = function(lngLat, content = {}) {
     // Add marker to current journey
     const markerData = {
         id: Date.now(),
-        lngLat: lngLat.toArray(),
+        lngLat: [lngLat.lat, lngLat.lng],  // Leaflet uses [lat, lng]
         content: content,
         coordinates: [lngLat.lat, lngLat.lng]
     };
@@ -38,13 +33,13 @@ window.createMarker = function(lngLat, content = {}) {
     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>
+        <div class="marker-coords">${lngLat.lat.toFixed(4)}, ${lngLat.lng.toFixed(4)}</div>
     `;
     
     // Add click event to marker item
     markerElement.addEventListener('click', function() {
         map.flyTo({
-            center: [lngLat.lng, lngLat.lat],
+            center: [lngLat.lat, lngLat.lng],
             zoom: 10
         });
         openMarkerEditor(marker);
@@ -61,57 +56,15 @@ window.createMarker = function(lngLat, content = {}) {
 
 // Update the updateJourneyPath function to handle cases where markers array is empty
 function updateJourneyPath() {
-    if (!map.getSource('journey-path')) {
+    if (!map.hasLayer(journeyPath)) {
-        map.addSource('journey-path', {
+        journeyPath = L.polyline([], {color: '#3887be', weight: 4});
-            type: 'geojson',
+        map.addLayer(journeyPath);
-            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: {},
-            geometry: {
-                type: 'LineString',
-                coordinates: []
-            }
-        });
-        return;
     }
 
     const coordinates = currentJourney.markers.map(marker => [
-        marker.getLngLat().lng,
+        marker.getLatLng().lat,
-        marker.getLngLat().lat
+        marker.getLatLng().lng
     ]);
     
-    map.getSource('journey-path').setData({
+    journeyPath.setLatLngs(coordinates);
-        type: 'Feature',
-        properties: {},
-        geometry: {
-            type: 'LineString',
-            coordinates: coordinates
-        }
-    });
 }