Plattegrond laden...
Geen object gevonden
';
suggestions.hidden = false;
}
async function renderPdf() {
if (!window.pdfjsLib) throw new Error("PDF.js niet geladen");
pdfjsLib.GlobalWorkerOptions.workerSrc = "https://cdnjs.cloudflare.com/ajax/libs/pdf.js/3.11.174/pdf.worker.min.js";
var pdf = await pdfjsLib.getDocument(PDF_URL).promise;
var page = await pdf.getPage(1);
var viewportBase = page.getViewport({ scale: 1 });
var renderWidth = Math.min(1600, Math.max(1000, stage.clientWidth * 1.6));
var scale = renderWidth / viewportBase.width;
var viewport = page.getViewport({ scale: scale });
var dpr = Math.min(window.devicePixelRatio || 1, 2);
baseWidth = Math.round(viewport.width);
baseHeight = Math.round(viewport.height);
canvas.width = Math.round(baseWidth * dpr);
canvas.height = Math.round(baseHeight * dpr);
canvas.style.width = baseWidth + "px";
canvas.style.height = baseHeight + "px";
viewportEl.style.width = baseWidth + "px";
viewportEl.style.height = baseHeight + "px";
markers.style.width = baseWidth + "px";
markers.style.height = baseHeight + "px";
var ctx = canvas.getContext("2d", { alpha: false });
ctx.setTransform(dpr, 0, 0, dpr, 0, 0);
await page.render({ canvasContext: ctx, viewport: viewport }).promise;
loader.style.display = "none";
resetView();
}
search.addEventListener("input", filterMarkers);
reset.addEventListener("click", function () {
search.value = "";
suggestions.hidden = true;
filterMarkers();
resetView();
});
suggestions.addEventListener("click", function (event) {
var button = event.target.closest(".hh-map__suggestion[data-number]");
if (!button) return;
search.value = button.dataset.number;
suggestions.hidden = true;
filterMarkers();
});
if (zoomIn) zoomIn.addEventListener("click", function () { zoomAt(zoom * 1.25); });
if (zoomOut) zoomOut.addEventListener("click", function () { zoomAt(zoom / 1.25); });
stage.addEventListener("wheel", function (event) {
event.preventDefault();
zoomAt(zoom * (event.deltaY > 0 ? 0.9 : 1.1), event.clientX, event.clientY);
}, { passive: false });
stage.addEventListener("pointerdown", function (event) {
if (event.target.closest(".hh-map__marker")) return;
pointers[event.pointerId] = { x: event.clientX, y: event.clientY };
stage.setPointerCapture(event.pointerId);
var ids = Object.keys(pointers);
if (ids.length === 1) {
isDragging = true;
stage.classList.add("is-dragging");
startX = event.clientX;
startY = event.clientY;
startPanX = panX;
startPanY = panY;
}
if (ids.length === 2) {
var a = pointers[ids[0]];
var b = pointers[ids[1]];
pinchStartDistance = Math.hypot(a.x - b.x, a.y - b.y);
pinchStartZoom = zoom;
}
});
stage.addEventListener("pointermove", function (event) {
if (!pointers[event.pointerId]) return;
pointers[event.pointerId] = { x: event.clientX, y: event.clientY };
var ids = Object.keys(pointers);
if (ids.length === 2) {
var a = pointers[ids[0]];
var b = pointers[ids[1]];
var dist = Math.hypot(a.x - b.x, a.y - b.y);
var centerX = (a.x + b.x) / 2;
var centerY = (a.y + b.y) / 2;
if (pinchStartDistance) zoomAt(pinchStartZoom * (dist / pinchStartDistance), centerX, centerY);
return;
}
if (isDragging && ids.length === 1) {
panX = startPanX + event.clientX - startX;
panY = startPanY + event.clientY - startY;
scheduleTransform();
}
});
function endPointer(event) {
delete pointers[event.pointerId];
if (Object.keys(pointers).length === 0) {
isDragging = false;
stage.classList.remove("is-dragging");
}
}
stage.addEventListener("pointerup", endPointer);
stage.addEventListener("pointercancel", endPointer);
window.addEventListener("resize", function () {
clearTimeout(window.hhMapResizeTimer);
window.hhMapResizeTimer = setTimeout(resetView, 150);
});
renderMarkers();
renderPdf().catch(function (error) {
console.error(error);
loader.textContent = "Plattegrond kon niet worden geladen.";
});
})();
Plattegrond laden...