102 lines
3.4 KiB
JavaScript
102 lines
3.4 KiB
JavaScript
// /Volumes/Data/Code/FHGR/Frontend/js/map.js
|
|
// Add the createMarker function to the window object
|
|
window.createMarker = function(lngLat, content = {}) {
|
|
const marker = L.marker(lngLat, {
|
|
draggable: true,
|
|
title: content.title || 'Untitled'
|
|
}).addTo(map);
|
|
|
|
// Create popup with marker content
|
|
marker.bindPopup(`<strong>${content.title || 'Untitled'}</strong>${content.description ? `<br>${content.description}` : ''}`);
|
|
|
|
// When the marker is clicked, open the editor
|
|
marker.on('click', () => {
|
|
openMarkerEditor(marker);
|
|
});
|
|
|
|
// Add marker to current journey
|
|
const markerData = {
|
|
id: Date.now(),
|
|
lngLat: [lngLat.lat, lngLat.lng], // Leaflet uses [lat, lng]
|
|
content: content,
|
|
coordinates: [lngLat.lat, lngLat.lng]
|
|
};
|
|
|
|
if (!currentJourney.markers) currentJourney.markers = [];
|
|
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.lat.toFixed(4)}, ${lngLat.lng.toFixed(4)}</div>
|
|
`;
|
|
|
|
// Add click event to marker item
|
|
markerElement.addEventListener('click', function() {
|
|
map.flyTo({
|
|
center: [lngLat.lat, lngLat.lng],
|
|
zoom: 10
|
|
});
|
|
openMarkerEditor(marker);
|
|
});
|
|
|
|
if (markersContainer.children.length === 1 &&
|
|
markersContainer.firstElementChild.id === 'empty-markers') {
|
|
markersContainer.removeChild(markersContainer.firstElementChild);
|
|
}
|
|
markersContainer.appendChild(markerElement);
|
|
|
|
updateMarkersList(); // Call the new function to update the list
|
|
|
|
return marker;
|
|
};
|
|
|
|
// Update the updateJourneyPath function to handle cases where markers array is empty
|
|
function updateMarkersList() {
|
|
const markersContainer = document.getElementById('markers-container');
|
|
markersContainer.innerHTML = '';
|
|
|
|
if (currentJourney.markers.length === 0) {
|
|
markersContainer.innerHTML = '<p class="empty-message">No markers yet. Click on the map to add markers.</p>';
|
|
return;
|
|
}
|
|
|
|
currentJourney.markers.forEach((marker, index) => {
|
|
const markerElement = document.createElement('div');
|
|
markerElement.className = 'marker-item';
|
|
markerElement.innerHTML = `
|
|
<strong>${index + 1}</strong>
|
|
${marker.getLatLng().lat.toFixed(4)}, ${marker.getLngLat().lng.toFixed(4)}
|
|
`;
|
|
|
|
// Add click handler to zoom to marker
|
|
markerElement.addEventListener('click', () => {
|
|
map.flyTo({
|
|
center: [marker.getLatLng().lat, marker.getLatLng().lng],
|
|
zoom: 10
|
|
});
|
|
});
|
|
|
|
markersContainer.appendChild(markerElement);
|
|
});
|
|
}
|
|
|
|
function updateJourneyPath() {
|
|
if (!map.hasLayer(journeyPath)) {
|
|
journeyPath = L.polyline([], {color: '#3887be', weight: 4});
|
|
map.addLayer(journeyPath);
|
|
}
|
|
|
|
const coordinates = currentJourney.markers.map(marker => [
|
|
marker.getLatLng().lat,
|
|
marker.getLatLng().lng
|
|
]);
|
|
|
|
journeyPath.setLatLngs(coordinates);
|
|
}
|