113 lines
3.9 KiB
JavaScript
113 lines
3.9 KiB
JavaScript
// Map initialization and management
|
|
import { CONFIG } from './config.js';
|
|
import { showStatus } from './utils.js';
|
|
import { currentUser } from './auth.js';
|
|
|
|
export let map = null;
|
|
export let startLocationMarker = null;
|
|
export let isStartLocationVisible = true;
|
|
|
|
// Function to get the map instance
|
|
export function getMap() {
|
|
return map;
|
|
}
|
|
|
|
export async function initializeMap() {
|
|
try {
|
|
// Get start location from PUBLIC endpoint (not admin endpoint)
|
|
const response = await fetch('/api/settings/start-location'); // Changed from /api/config/start-location
|
|
const data = await response.json();
|
|
|
|
let startLat = CONFIG.DEFAULT_LAT;
|
|
let startLng = CONFIG.DEFAULT_LNG;
|
|
let startZoom = CONFIG.DEFAULT_ZOOM;
|
|
|
|
if (data.success && data.location) {
|
|
startLat = data.location.latitude;
|
|
startLng = data.location.longitude;
|
|
startZoom = data.location.zoom;
|
|
}
|
|
|
|
// Initialize map
|
|
map = L.map('map').setView([startLat, startLng], startZoom);
|
|
|
|
// Add tile layer
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors',
|
|
maxZoom: CONFIG.MAX_ZOOM,
|
|
minZoom: CONFIG.MIN_ZOOM
|
|
}).addTo(map);
|
|
|
|
// Add start location marker
|
|
addStartLocationMarker(startLat, startLng);
|
|
|
|
console.log('Map initialized successfully');
|
|
|
|
} catch (error) {
|
|
console.error('Failed to initialize map:', error);
|
|
showStatus('Failed to initialize map', 'error');
|
|
}
|
|
}
|
|
|
|
function addStartLocationMarker(lat, lng) {
|
|
console.log(`Adding start location marker at: ${lat}, ${lng}`);
|
|
|
|
// Remove existing start location marker if it exists
|
|
if (startLocationMarker) {
|
|
map.removeLayer(startLocationMarker);
|
|
}
|
|
|
|
// Create a very distinctive custom icon
|
|
const startIcon = L.divIcon({
|
|
html: `
|
|
<div class="start-location-marker-wrapper">
|
|
<div class="start-location-marker-pin">
|
|
<div class="start-location-marker-inner">
|
|
<svg width="24" height="24" viewBox="0 0 24 24" fill="white">
|
|
<path d="M12 2L2 7v10c0 5.55 3.84 10.74 9 12 5.16-1.26 9-6.45 9-12V7l-10-5z"/>
|
|
</svg>
|
|
</div>
|
|
</div>
|
|
<div class="start-location-marker-pulse"></div>
|
|
</div>
|
|
`,
|
|
className: 'start-location-custom-marker',
|
|
iconSize: [48, 48],
|
|
iconAnchor: [24, 48],
|
|
popupAnchor: [0, -48]
|
|
});
|
|
|
|
// Create the marker
|
|
startLocationMarker = L.marker([lat, lng], {
|
|
icon: startIcon,
|
|
zIndexOffset: 1000
|
|
}).addTo(map);
|
|
|
|
// Add popup
|
|
startLocationMarker.bindPopup(`
|
|
<div class="popup-content start-location-popup-enhanced">
|
|
<h3>📍 Map Start Location</h3>
|
|
<p>This is todays starting location!</p>
|
|
${currentUser?.isAdmin ? '<p><a href="/admin.html">Edit in Admin Panel</a></p>' : ''}
|
|
</div>
|
|
`);
|
|
}
|
|
|
|
export function toggleStartLocationVisibility() {
|
|
if (!startLocationMarker) return;
|
|
|
|
isStartLocationVisible = !isStartLocationVisible;
|
|
|
|
if (isStartLocationVisible) {
|
|
map.addLayer(startLocationMarker);
|
|
// Update both desktop and mobile button text
|
|
const desktopBtn = document.querySelector('#toggle-start-location-btn .btn-text');
|
|
if (desktopBtn) desktopBtn.textContent = 'Hide Start Location';
|
|
} else {
|
|
map.removeLayer(startLocationMarker);
|
|
// Update both desktop and mobile button text
|
|
const desktopBtn = document.querySelector('#toggle-start-location-btn .btn-text');
|
|
if (desktopBtn) desktopBtn.textContent = 'Show Start Location';
|
|
}
|
|
}
|