113 lines
3.4 KiB
JavaScript
113 lines
3.4 KiB
JavaScript
let map;
|
|
let currentJourney = {
|
|
markers: [],
|
|
path: nullJustin // This will be the line feature (GeoJSON)
|
|
};
|
|
let currentMarkerBeingEdited = null;
|
|
let isCreatingJourney = true;
|
|
|
|
// Function to create a marker at a lngLat and add to the map
|
|
function createMarker(lngLat) {
|
|
const markerElement = document.createElement('div');
|
|
markerElement.className = 'marker';
|
|
markerElement.innerHTML = '<i class="fas fa-map-marker"></i>';
|
|
|
|
const marker = new maplibregl.Marker(markerElement)
|
|
.setLngLat(lngLat)
|
|
.addTo(map);
|
|
|
|
marker.id = Date.now();
|
|
marker.content = {
|
|
title: '',
|
|
date: '',
|
|
text: '',
|
|
images: [],
|
|
videoUrl: ''
|
|
};
|
|
|
|
// Add a popup
|
|
const popup = new maplibregl.Popup({ offset: 25 })
|
|
.setHTML('<strong>New Marker</strong>');
|
|
marker.setPopup(popup);
|
|
|
|
// When the marker is clicked, open the editor
|
|
markerElement.addEventListener('click', () => {
|
|
openMarkerEditor(marker);
|
|
});
|
|
|
|
return marker;
|
|
}
|
|
|
|
function openMarkerEditor(marker) {
|
|
currentMarkerBeingEdited = marker;
|
|
document.getElementById('marker-title').value = marker.content.title;
|
|
document.getElementById('marker-date').value = marker.content.date;
|
|
document.getElementById('marker-text').value = marker.content.text;
|
|
document.getElementById('video-url').value = marker.content.videoUrl;
|
|
document.getElementById('marker-coords').textContent =
|
|
`${marker.getLngLat().lng.toFixed(4)}, ${marker.getLngLat().lat.toFixed(4)}`;
|
|
|
|
// Show the modal
|
|
document.getElementById('marker-modal').style.display = 'block';
|
|
}
|
|
|
|
function closeMarkerEditor() {
|
|
document.getElementById('marker-modal').style.display = 'none';
|
|
currentMarkerBeingEdited = null;
|
|
}
|
|
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
map = new maplibregl.Map({
|
|
container: 'map',
|
|
style: 'https://demotiles.maplibre.org/style.json',
|
|
center: [0, 20],
|
|
zoom: 2
|
|
});
|
|
|
|
// Close editor events
|
|
document.getElementById('close-modal').addEventListener('click', closeMarkerEditor);
|
|
document.getElementById('cancel-marker').addEventListener('click', closeMarkerEditor);
|
|
|
|
// Save marker event
|
|
document.getElementById('save-marker').addEventListener('click', function() {
|
|
if (!currentMarkerBeingEdited) return;
|
|
|
|
// Update marker content
|
|
currentMarkerBeingEdited.content.title = document.getElementById('marker-title').value;
|
|
currentMarkerBeingEdited.content.date = document.getElementById('marker-date').value;
|
|
currentMarkerBeingEdited.content.text = document.getElementById('marker-text').value;
|
|
currentMarkerBeingEdited.content.videoUrl = document.getElementById('video-url').value;
|
|
|
|
// Update the popup
|
|
currentMarkerBeingEdited.getPopup().setHTML(
|
|
`<strong>${currentMarkerBeingEdited.content.title || '袭刊Untitled'}</strong>`
|
|
);
|
|
|
|
closeMarkerEditor();
|
|
});
|
|
|
|
// Delete marker event
|
|
document.getElementById('delete-marker').addEventListener('click', function() {
|
|
if (!currentMarkerBeingEdited) return;
|
|
|
|
// Remove from map
|
|
currentMarkerBeingEdited.remove();
|
|
|
|
// Remove from currentJourney.markers
|
|
const index = currentJourney.markers.findIndex(m => m.id === currentMarkerBeingEdited.id);
|
|
if (index !== -1) {
|
|
currentJourney.markers.splice(index, 1);
|
|
}
|
|
|
|
closeMarkerEditor();
|
|
});
|
|
|
|
// Add marker on map click
|
|
map.on('click', (e) => {
|
|
if (isCreatingJourney) {
|
|
const marker = createMarker(e.lngLat);
|
|
currentJourney.markers.push(marker);
|
|
// TODO: update the path line
|
|
}
|
|
});
|
|
}); |