<!-- Kaartvakje -->
<div id="vergetenkilometers-kaart" style="height: 450px;"></div>

<!-- Leaflet CSS (kaartenbibliotheek) -->
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
/>

<!-- Leaflet JS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"></script>

<script>
// 1. Kaart maken (midden op Sittard)
var kaart = L.map('vergetenkilometers-kaart').setView([51.0, 5.85], 12);

// 2. OpenStreetMap als achtergrond
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
maxZoom: 19,
attribution: '© OpenStreetMap-bijdragers'
}).addTo(kaart);

// 3. Markers toevoegen
var locaties = [
{
naam: "Schwienswei",
coords: [51.0009, 5.8453],
link: "https://www.vergetenkilometers.nl/schwienswei"
},
{
naam: "Parkbos Millen",
coords: [50.9953, 5.8252],
link: "https://www.vergetenkilometers.nl/parkbos-millen"
},
{
naam: "Millenerberg",
coords: [50.9890, 5.8155],
link: "https://www.vergetenkilometers.nl/millenerberg"
}
];

// 4. Markers plaatsen
locaties.forEach(function(punt) {
L.marker(punt.coords)
.addTo(kaart)
.bindPopup("<b>" + punt.naam + "</b><br><a href='" + punt.link + "'>Bekijk route</a>");
});
</script>