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
// 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);
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);
// Create popup with marker content
const popup = new maplibregl.Popup({ offset: 25 })
.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', () => {
openMarkerEditor(marker);
});
// 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.toArray(),
content: content
};
// Add marker to current journey
const markerData = {
id: Date.now(),
lngLat: lngLat.toArray(),
content: content,
coordinates: [lngLat.lat, lngLat.lng]
};
// 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
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.lng.toFixed(4)}, ${lngLat.lat.toFixed(4)}</div>
`;
// Add click event to marker item
markerElement.addEventListener('click', function() {
map.flyTo({
center: [lngLat.lng, lngLat.lat],
zoom: 10
});
openMarkerEditor(marker);
});
// Open marker editor
openMarkerEditor(marker);
});
markersContainer.appendChild(markerElement);
return marker;
if (markersContainer.children.length === 1 &&
markersContainer.firstElementChild.id === 'empty-markers') {
markersContainer.removeChild(markersContainer.firstElementChild);
}
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
if (!map.getSource('journey-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: {},
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
}
});
}