111 lines
4.0 KiB
JavaScript
111 lines
4.0 KiB
JavaScript
// Map initialization and marker management
|
|
|
|
function initMap() {
|
|
AppState.map = L.map('map').setView([51.1657, 10.4515], 6);
|
|
|
|
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
|
|
attribution: '© OpenStreetMap contributors',
|
|
maxZoom: 19,
|
|
}).addTo(AppState.map);
|
|
|
|
// Try to get user's location
|
|
if (navigator.geolocation) {
|
|
navigator.geolocation.getCurrentPosition(
|
|
(position) => {
|
|
const lat = position.coords.latitude;
|
|
const lon = position.coords.longitude;
|
|
|
|
// Add user location marker
|
|
const userIcon = L.divIcon({
|
|
html: '<div style="width: 16px; height: 16px; background: #0ea5e9; border: 3px solid white; border-radius: 50%; box-shadow: 0 0 10px rgba(14, 165, 233, 0.6);"></div>',
|
|
className: '',
|
|
iconSize: [16, 16],
|
|
iconAnchor: [8, 8]
|
|
});
|
|
|
|
L.marker([lat, lon], { icon: userIcon })
|
|
.addTo(AppState.map)
|
|
.bindPopup('<div style="background: #1a1a1a; color: #e0e0e0; padding: 8px;"><strong>Dein Standort</strong></div>');
|
|
|
|
console.log('User location:', lat, lon);
|
|
},
|
|
(error) => {
|
|
console.log('Geolocation error:', error.message);
|
|
}
|
|
);
|
|
}
|
|
}
|
|
|
|
function clearMarkers() {
|
|
AppState.markers.forEach(marker => AppState.map.removeLayer(marker));
|
|
AppState.markers = [];
|
|
}
|
|
|
|
function addMarker(listing) {
|
|
if (!listing.lat || !listing.lon) return;
|
|
|
|
const marker = L.marker([listing.lat, listing.lon]).addTo(AppState.map);
|
|
|
|
// Check if mobile
|
|
const isMobile = window.innerWidth < 768;
|
|
|
|
if (isMobile) {
|
|
// On mobile: open fullscreen popup
|
|
marker.on('click', () => {
|
|
showMobilePopup(listing);
|
|
});
|
|
} else {
|
|
// On desktop: use regular leaflet popup
|
|
const imageHtml = listing.image
|
|
? `<img src="${listing.image}" style="width: 100%; max-height: 150px; object-fit: cover; margin: 8px 0;" alt="${listing.title}">`
|
|
: '';
|
|
|
|
const popupContent = `
|
|
<div style="min-width: 200px; 8px;">
|
|
<strong style="font-size: 14px;">${listing.title}</strong><br>
|
|
${imageHtml}
|
|
<span style="color: #0066cc; font-weight: bold; font-size: 16px;">${listing.price} €</span><br>
|
|
<span style="color: #666; font-size: 12px;">${listing.address}</span><br>
|
|
<a href="${listing.url}" target="_blank" style="color: #0066cc; text-decoration: none; font-weight: 600;">Link öffnen →</a>
|
|
</div>
|
|
`;
|
|
marker.bindPopup(popupContent);
|
|
|
|
marker.on('click', () => {
|
|
AppState.selectedListingId = listing.id;
|
|
highlightSelectedListing();
|
|
});
|
|
}
|
|
|
|
AppState.markers.push(marker);
|
|
}
|
|
|
|
function showMobilePopup(listing) {
|
|
const popup = document.getElementById('mobilePopup');
|
|
const content = document.getElementById('mobilePopupContent');
|
|
|
|
const imageHtml = listing.image
|
|
? `<img src="${listing.image}" class="popup-image" alt="${listing.title}">`
|
|
: '';
|
|
|
|
const dateStr = listing.date_added ? new Date(listing.date_added).toLocaleDateString('de-DE') : 'Unbekannt';
|
|
|
|
content.innerHTML = `
|
|
${imageHtml}
|
|
<div class="popup-title">${listing.title}</div>
|
|
<div class="popup-price">${listing.price} €</div>
|
|
<div class="popup-meta">
|
|
<div class="popup-meta-item">
|
|
<span class="popup-meta-icon">📍</span>
|
|
<span>${listing.address || listing.zip_code}</span>
|
|
</div>
|
|
<div class="popup-meta-item">
|
|
<span class="popup-meta-icon">📅</span>
|
|
<span>${dateStr}</span>
|
|
</div>
|
|
</div>
|
|
<a href="${listing.url}" target="_blank" class="popup-link">Inserat auf Kleinanzeigen.de öffnen</a>
|
|
`;
|
|
|
|
popup.classList.add('show');
|
|
} |