mantelzorgwoning.info/layouts/shortcodes/maps.html

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v10.3.1/ol.css">

<style>
    .bouwplanner-wrapper { height: 700px; }
    @media (max-width: 768px) { .bouwplanner-wrapper { height: auto; min-height: 800px; } }
    #map { background: #f8f9fa; cursor: crosshair; }
    #sidebar::-webkit-scrollbar { width: 5px; }
    #sidebar::-webkit-scrollbar-thumb { background: #dee2e6; border-radius: 10px; }
    .u-label { font-size: 0.65rem; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: #6c757d; }
</style>

<div class="row g-0 shadow rounded border overflow-hidden bg-white bouwplanner-wrapper">
    <div id="sidebar" class="col-md-4 col-lg-3 border-end d-flex flex-column h-100 bg-white p-3">
        <div class="mb-3 border-bottom pb-2">
            <h3 class="h5 mb-0 d-flex align-items-center"><span class="me-2">🏠</span> Bouwplanner</h3>
        </div>
        <div id="feature-details" class="flex-grow-1 overflow-auto">
            <div class="alert alert-light border shadow-sm small italic">Zoom in en klik op een gebouw voor de kavelanalyse.</div>
        </div>
        <div id="actions" class="mt-3 pt-3 border-top" style="display:none;">
            <a id="link-omgevingswet" class="btn btn-outline-primary btn-sm w-100 mb-2 shadow-sm fw-bold" target="_blank">Check Omgevingswet</a>
        </div>
        <div class="mt-3 p-2 bg-light rounded-3 border">
            <span class="u-label d-block mb-2">Kaartlagen</span>
            <div class="form-check form-switch small mb-1">
                <input class="form-check-input" type="checkbox" id="toggle-panden" checked>
                <label class="form-check-label" for="toggle-panden">Gebouwen & Percelen</label>
            </div>
        </div>
    </div>
    <div class="col-md-8 col-lg-9 h-100 position-relative">
        <div id="map" class="w-100 h-100"></div>
    </div>
</div>

<script src="https://cdn.jsdelivr.net/npm/ol@v10.3.1/dist/ol.js"></script>

<script>
    const TILESERVER_URL = "https://maps.start-it.nl"; 
    let selectedRef = null;

    const pandStyle = new ol.style.Style({
        fill: new ol.style.Fill({ color: 'rgba(33, 37, 41, 0.15)' }),
        stroke: new ol.style.Stroke({ color: '#212529', width: 0.8 })
    });
    const perceelStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({ color: '#dc3545', width: 1.5, lineDash: [4, 4] })
    });
    const highlightPandStyle = new ol.style.Style({
        fill: new ol.style.Fill({ color: 'rgba(13, 110, 253, 0.3)' }),
        stroke: new ol.style.Stroke({ color: '#0d6efd', width: 3 })
    });
    const highlightPerceelStyle = new ol.style.Style({
        stroke: new ol.style.Stroke({ color: '#dc3545', width: 4 }),
        fill: new ol.style.Fill({ color: 'rgba(220, 53, 69, 0.05)' })
    });

    const perceelLayer = new ol.layer.VectorTile({
        source: new ol.source.VectorTile({
            format: new ol.format.MVT(),
            url: TILESERVER_URL + '/public.brk_perceel_3857/{z}/{x}/{y}.pbf'
        }),
        style: f => (selectedRef && f.get('nationalcadastralreference') === selectedRef) ? highlightPerceelStyle : perceelStyle,
        minZoom: 14
    });

    const pandLayer = new ol.layer.VectorTile({
        source: new ol.source.VectorTile({
            format: new ol.format.MVT(),
            url: TILESERVER_URL + '/public.panden_gecalculeerd_final/{z}/{x}/{y}.pbf'
        }),
        style: f => (selectedRef && f.get('nationalcadastralreference') === selectedRef) ? highlightPandStyle : pandStyle,
        minZoom: 15
    });

    const map = new ol.Map({
        target: 'map',
        layers: [
            new ol.layer.Tile({ source: new ol.source.OSM() }),
            perceelLayer,
            pandLayer
        ],
        view: new ol.View({
            center: ol.proj.fromLonLat([5.594, 52.285]),
            zoom: 17,
            maxZoom: 20
        })
    });

    map.on('singleclick', function(evt) {
        const features = map.getFeaturesAtPixel(evt.pixel);
        const detailsContainer = document.getElementById('feature-details');
        const actionsContainer = document.getElementById('actions');

        if (!features || features.length === 0) {
            selectedRef = null;
            pandLayer.changed(); perceelLayer.changed();
            actionsContainer.style.display = 'none';
            detailsContainer.innerHTML = '<div class="alert alert-light border small italic">Klik op een gebouw voor details.</div>';
            return;
        }

        const p = features[0].getProperties();
        if (p.nationalcadastralreference) {
            selectedRef = p.nationalcadastralreference;
            pandLayer.changed(); perceelLayer.changed();

            const volledigNr = (p.huisnummer || '') + (p.huisletter || '') + (p.toevoeging || '');
            const straatHuis = (p.openbare_ruimte_naam || '') + ' ' + volledigNr;
            const pc = p.postcode || '';
            const woonplaats = p.woonplaats_naam || '';

            const percOpp = Math.round(p.perceel_oppervlakte || 0);
            const bebouwd = Math.round(p.totaal_bebouwd_oppervlakte || 0);
            const pct = percOpp > 0 ? Math.round((bebouwd / percOpp) * 100) : 0;

            detailsContainer.innerHTML = '<div class="mb-3 mt-1 text-dark">' +
                '<span class="u-label text-muted">Locatie</span>' +
                '<h5 class="mb-0 fw-bold">' + straatHuis + '</h5>' +
                '<div class="small text-muted">' + pc + ', ' + woonplaats + '</div></div>' +
                '<div class="card bg-light border-0 mb-3 shadow-sm text-dark"><div class="card-body p-3">' +
                '<div class="row g-0 text-center">' +
                '<div class="col-6 border-end"><small class="u-label d-block mb-1">Bebouwd</small><span class="h5 fw-bold">' + bebouwd + ' m²</span></div>' +
                '<div class="col-6"><small class="u-label d-block mb-1">Kavel</small><span class="h5 fw-bold">' + percOpp + ' m²</span></div>' +
                '</div>' +
                '<div class="text-center border-top mt-2 pt-2"><small class="u-label">Bezetting: ' + pct + '%</small></div>' +
                '</div></div>';

            actionsContainer.style.display = 'block';

            const locStr = straatHuis + ', ' + pc + ' ' + woonplaats;
            document.getElementById('link-omgevingswet').href = 'https://omgevingswet.overheid.nl/regels-op-de-kaart/documenten?locatie=' + encodeURIComponent(locStr);
        }
    });

    document.getElementById('toggle-panden').onchange = function(e) {
        pandLayer.setVisible(e.target.checked);
        perceelLayer.setVisible(e.target.checked);
    };
</script>