all
This commit is contained in:
160
web/auctionviewer (1).html
Normal file
160
web/auctionviewer (1).html
Normal file
@@ -0,0 +1,160 @@
|
||||
<!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>
|
||||
Reference in New Issue
Block a user