kohlerjoshua/FHGR_Frontend_Group_3_Project
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: improve mapping functionality with markers, path, CORS

Browse Source 
Co-authored-by: aider (ollama/qwen2.5-coder:32b) <aider@aider.chat>
This commit is contained in:
Josh-Dev-Quest 2026-03-01 16:12:00 +01:00
parent 42cb05367c
commit a20036e67c
No known key found for this signature in database
1 changed files with 102 additions and 69 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

171
js/map.js
View File

@ -1,84 +1,117 @@
// /Volumes/Data/Code/FHGR/Frontend/js/map.js // /Volumes/Data/Code/FHGR/Frontend/js/map.js
// Add the createMarker function to the window object // Add the createMarker function to the window object
window.createMarker = function(lngLat, content = {}) { window.createMarker = function(lngLat, content = {}) {
const marker = new maplibregl.Marker({ const marker = new maplibregl.Marker({
color: '#3887be', color: '#3887be',
draggable: true draggable: true
}) })
.setLngLat(lngLat) .setLngLat(lngLat)
.addTo(map); .addTo(map);
// Create popup with marker content // Create popup with marker content
const popup = new maplibregl.Popup({ offset: 25 }) 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); marker.setPopup(popup);
// When the marker is clicked, open the editor // When the marker is clicked, open the editor
marker.getElement().addEventListener('click', () => { marker.on('click', () => {
openMarkerEditor(marker); openMarkerEditor(marker);
}); });
// Add marker to current journey // Add marker to current journey
const markerData = { const markerData = {
id: Date.now(), id: Date.now(),
lngLat: lngLat.toArray(), 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); currentJourney.markers.push(marker);
updateJourneyPath();
updateJourneyPath();
// Add marker to the markers list
const markersContainer = document.getElementById('markers-container'); // Add marker to the markers list
const markerElement = document.createElement('div'); const markersContainer = document.getElementById('markers-container');
markerElement.className = 'marker-item'; const markerElement = document.createElement('div');
markerElement.innerHTML = ` markerElement.className = 'marker-item';
<div class="marker-title">${content.title || 'Untitled'}</div> markerElement.innerHTML = `
<div class="marker-coords">${lngLat.lng.toFixed(4)}, ${lngLat.lat.toFixed(4)}</div> <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() { // Add click event to marker item
// Center map on marker markerElement.addEventListener('click', function() {
map.flyTo({ map.flyTo({
center: lngLat, center: [lngLat.lng, lngLat.lat],
zoom: 10 zoom: 10
});
openMarkerEditor(marker);
}); });
// Open marker editor if (markersContainer.children.length === 1 &&
openMarkerEditor(marker); markersContainer.firstElementChild.id === 'empty-markers') {
}); markersContainer.removeChild(markersContainer.firstElementChild);
}
markersContainer.appendChild(markerElement); markersContainer.appendChild(markerElement);
return marker; return marker;
}; };
// Update the updateJourneyPath function to handle cases where markers array is empty // Update the updateJourneyPath function to handle cases where markers array is empty
function updateJourneyPath() { function updateJourneyPath() {
if (!currentJourney.markers || currentJourney.markers.length === 0) { if (!map.getSource('journey-path')) {
// If no markers, clear the path map.addSource('journey-path', {
map.getSource('journey-path').setData({ type: 'geojson',
type: 'Feature', data: {
properties: {}, type: 'Feature',
geometry: { properties: {},
type: 'LineString', geometry: {
coordinates: [] type: 'LineString',
} coordinates: []
}); }
return; }
} });
const coordinates = currentJourney.markers.map(marker => marker.getLngLat().toArray()); map.addLayer({
id: 'journey-path',
map.getSource('journey-path').setData({ type: 'line',
type: 'Feature', source: 'journey-path',
properties: {}, layout: {
geometry: { 'line-join': 'round',
type: 'LineString', 'line-cap': 'round'
coordinates: coordinates },
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.getLngLat().lat
]);
map.getSource('journey-path').setData({
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: coordinates
}
});
} }