129 lines
4.3 KiB
HTML
129 lines
4.3 KiB
HTML
<!doctype html>
|
||
<html lang="en">
|
||
<head>
|
||
<meta charset="utf-8" />
|
||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||
<title>Auctionviewer – Map</title>
|
||
<link
|
||
rel="stylesheet"
|
||
href="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.css"
|
||
/>
|
||
<style>
|
||
html, body { height: 100%; margin: 0; padding: 0; }
|
||
#map { height: 100%; width: 100%; }
|
||
.auction-marker {
|
||
background: #2563eb;
|
||
color: #fff;
|
||
font-weight: bold;
|
||
border: 2px solid #fff;
|
||
border-radius: 50%;
|
||
text-align: center;
|
||
line-height: 30px;
|
||
width: 30px;
|
||
height: 30px;
|
||
}
|
||
#loading {
|
||
position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
|
||
z-index: 1000; background: white; padding: 20px; border-radius: 8px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,0.2);
|
||
}
|
||
#error {
|
||
position: absolute; top: 10px; left: 10px; right: 10px;
|
||
z-index: 1000; background: #fee; color: #c00; padding: 15px;
|
||
border-radius: 4px; display: none;
|
||
}
|
||
</style>
|
||
</head>
|
||
<body>
|
||
<div id="loading">Initializing...</div>
|
||
<div id="error"></div>
|
||
<div id="map"></div>
|
||
|
||
<!-- Leaflet JS from alternative CDN -->
|
||
<script src="https://cdn.jsdelivr.net/npm/leaflet@1.9.4/dist/leaflet.js"></script>
|
||
|
||
<script>
|
||
|
||
// Use window.load to ensure ALL resources are loaded
|
||
window.addEventListener("load", async function () {
|
||
console.log("Window loaded, L is:", typeof L);
|
||
|
||
// CRITICAL: Check if Leaflet is actually available
|
||
if (typeof L === 'undefined') {
|
||
const errorMsg = "ERROR: Leaflet library failed to load. Check:<br>1. Internet connection<br>2. Browser console (F12)<br>3. Try clearing browser cache<br>4. Ensure not blocking CDN with ad-blocker";
|
||
document.getElementById('error').innerHTML = errorMsg;
|
||
document.getElementById('error').style.display = 'block';
|
||
document.getElementById('loading').style.display = 'none';
|
||
console.error("Leaflet not loaded. Check network tab in developer tools.");
|
||
return;
|
||
}
|
||
|
||
// Update loading message
|
||
document.getElementById('loading').innerText = 'Loading auction data...';
|
||
|
||
// Fetch auction data from API
|
||
let locations;
|
||
try {
|
||
const response = await fetch('https://aupi.appmodel.nl/v2/auction/NL');
|
||
if (!response.ok) {
|
||
throw new Error(`HTTP error! status: ${response.status}`);
|
||
}
|
||
locations = await response.json();
|
||
console.log('Fetched auction data:', locations);
|
||
} catch (error) {
|
||
const errorMsg = `ERROR: Failed to load auction data from /v2/refreshauction/NL<br>Error: ${error.message}<br>Please check your internet connection and try again.`;
|
||
document.getElementById('error').innerHTML = errorMsg;
|
||
document.getElementById('error').style.display = 'block';
|
||
document.getElementById('loading').style.display = 'none';
|
||
console.error("Failed to fetch auction data:", error);
|
||
return;
|
||
}
|
||
|
||
// Hide loading indicator
|
||
document.getElementById('loading').style.display = 'none';
|
||
|
||
// Initialize map
|
||
const map = L.map("map").setView([52.1326, 5.2913], 8);
|
||
|
||
// 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: 18,
|
||
}).addTo(map);
|
||
|
||
// Add markers
|
||
locations.forEach((location) => {
|
||
const { lat, long, numberofauctions, auctions } = location;
|
||
|
||
const icon = L.divIcon({
|
||
className: "auction-marker",
|
||
html: numberofauctions.toString(),
|
||
iconSize: [30, 30],
|
||
iconAnchor: [15, 15],
|
||
});
|
||
|
||
const marker = L.marker([lat, long], { icon });
|
||
|
||
let popupHtml = `<strong>${numberofauctions} veiling(en) in ${auctions[0].city}</strong>`;
|
||
popupHtml += "<ul style='padding-left: 1em;'>";
|
||
auctions.forEach((a) => {
|
||
popupHtml += `<li style='margin-bottom: 0.5em;'>`;
|
||
popupHtml += `<span style='font-weight: bold;'>${a.name}</span><br />`;
|
||
popupHtml += `Start: ${a.starttime}<br />`;
|
||
popupHtml += `Sluiting: ${a.closingtime}<br />`;
|
||
popupHtml += `Lots: ${a.numberoflots}<br />`;
|
||
popupHtml += `<a href="${a.url}" target="_blank" rel="noopener">Bekijk veiling</a>`;
|
||
popupHtml += `</li>`;
|
||
});
|
||
popupHtml += "</ul>";
|
||
|
||
marker.bindPopup(popupHtml);
|
||
marker.addTo(map);
|
||
});
|
||
|
||
console.log("Map initialized successfully with", locations.length, "locations");
|
||
});
|
||
</script>
|
||
</body>
|
||
</html>
|