160 lines
5.7 KiB
HTML
160 lines
5.7 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>
|
||
<!-- Leaflet CSS from alternative CDN -->
|
||
<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">Loading map library...</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>
|
||
// DEBUG: Check if Leaflet loaded immediately after script tag
|
||
console.log("Leaflet immediate check:", typeof L !== 'undefined');
|
||
|
||
const locations = [
|
||
{
|
||
lat: 52.36861,
|
||
long: 5.2375,
|
||
numberofauctions: 2,
|
||
auctions: [
|
||
{
|
||
city: "Almere",
|
||
countrycode: "NL",
|
||
name: "Verzamelveiling van verschillende goederen",
|
||
starttime: "2025-11-14 14:00:00",
|
||
closingtime: "2025-11-27 14:00:00",
|
||
url: "/a/verzamelveiling-van-verschillende-goederen-A1-34291",
|
||
imageurl: "https://media.tbauctions.com/image-media/d4d302ab-513d-4f6a-8cdf-e8259612dc9e/file",
|
||
numberoflots: 198,
|
||
brand: "TWK",
|
||
},
|
||
{
|
||
city: "Almere",
|
||
countrycode: "NL",
|
||
name: "Veiling bedrijfsovertrekking",
|
||
starttime: "2025-11-21 14:00:00",
|
||
closingtime: "2025-12-04 14:00:00",
|
||
url: "/a/veiling-bedrijfsovertrekking-A1-34292",
|
||
imageurl: "https://media.tbauctions.com/image-media/c5bbc716-3de8-4860-a29d-6e1587f7d42e/file",
|
||
numberoflots: 247,
|
||
brand: "TWK",
|
||
},
|
||
],
|
||
},
|
||
{
|
||
lat: 51.92442,
|
||
long: 4.47773,
|
||
numberofauctions: 1,
|
||
auctions: [
|
||
{
|
||
city: "Rotterdam",
|
||
countrycode: "NL",
|
||
name: "Rotterdam Havenveiling",
|
||
starttime: "2025-11-20 10:00:00",
|
||
closingtime: "2025-12-03 18:00:00",
|
||
url: "/a/rotterdam-havenveiling-A1-34293",
|
||
imageurl: "https://media.tbauctions.com/image-media/placeholder/placeholder/file",
|
||
numberoflots: 156,
|
||
brand: "RHA",
|
||
},
|
||
],
|
||
},
|
||
];
|
||
|
||
// Use window.load to ensure ALL resources are loaded
|
||
window.addEventListener("load", 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;
|
||
}
|
||
|
||
// 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> |