Kadaster info op kaart met sectienummer

Maar laat ik me eerst even voorstellen Ik ben Peter en wij zijn bezig op verzoek om een applicatie te bouwen waar we data vanuit het kadaster kunnen ophalen. Nu is bij kadaster alles geregeld, contract, api key ed. Maar nu was de vraag van de klant of het mogelijk was om de basis info die ze nodig hebben voor kadaster om informatie op te vragen via zoeken op postcode of klikken op een kaart mogelijk is? volgens mij is minimaal benodigd voor kadaster api het woonplaats, objectnummer en sectie nummer benodigd. Ik ben echt een NoNo op gebied van gebruik kaarten etc. het is me wel gelukt om een kaart op scherm te krijgen met zoeken op postcode en krij enkel objectnummers te zien.

ik heb zover:

Kadastrale Kaart met PDOK en Leaflet
Zoek
<script>
    // Initialiseer de kaart
    var map = L.map('map').setView([52.0907374, 5.1214201], 17);  // Centraal in Nederland

    // Voeg een basislaag toe (bijvoorbeeld OpenStreetMap)
    L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
        maxZoom: 19,
        attribution: '&copy; <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors'
    }).addTo(map);

    // Voeg de kadastrale kaartlaag toe via de PDOK WMS service, met beperkingen op zoomniveaus
    L.tileLayer.wms('https://service.pdok.nl/kadaster/kadastralekaart/wms/v5_0?request=GetCapabilities&service=WMS', {
        layers: 'kadastralekaart',
        format: 'image/png',
        transparent: true,
        attribution: 'Kadaster & PDOK',
        minZoom: 17,  // Kadastrale kaart is alleen zichtbaar vanaf zoomniveau 14
        maxZoom: 19   // Kadastrale kaart is zichtbaar tot en met zoomniveau 19
    }).addTo(map);

    // Functie om een postcode te zoeken
    function searchPostalCode() {
        var postalCode = document.getElementById('postalCode').value;
        if (postalCode) {
            var url = `https://nominatim.openstreetmap.org/search?format=json&postalcode=${postalCode}&countrycodes=nl&limit=1`;

            fetch(url)
                .then(response => response.json())
                .then(data => {
                    if (data && data.length > 0) {
                        var lat = data[0].lat;
                        var lon = data[0].lon;
                        map.setView([lat, lon], 15);  // Zoom in op de locatie
                        L.marker([lat, lon]).addTo(map);
                    } else {
                        alert('Geen resultaten gevonden voor deze postcode.');
                    }
                })
                .catch(error => {
                    console.error('Fout bij het ophalen van locatiegegevens:', error);
                });
        } else {
            alert('Voer een geldige postcode in.');
        }
    }
</script>

ik hoop dat iemand mij op juiste pad kan helpen

groet,
Peter

Hoi @Peterdem,

Ik heb eerder wat dingen in elkaar geknutseld met die andere bibliotheek, namelijk OpenLayers ("A high-performance, feature-packed library for all your mapping needs.")

Broncode staat op GitHub, en de gebouwde applicaties staan op mijn website (en doen het geloof ik ook nog steeds :slight_smile: ):

Nog 2 opmerkingen: in de ‘Limburgse kaart’ moet je op het perceel klikken voordat de kadastrale informatie wordt getoond. Hier blijft de popup staan (totdat je opnieuw klikt), en dat is wel zo handig want dan kun je de info uit de popup kopiëren (bij het WMS voorbeeld met hover lukt dat niet, omdat de popup constant meebeweegt… :rofl:).
Als je bij de Locatieserver/suggest de filter op * zet (fq=*), dan kun je ook direct op kadastrale gemeente en perceelnummer zoeken… Handig!

Nogmaals, het is geen Leaflet maar ol, maar misschien kun je er iets mee?

Groet,

Egge-Jan

1 like

Hoi @Peterdem,

Dank voor je snelle reactie. (Privé, maar ik trek de discussie even terug naar het forum :slight_smile: )
De vraag is dus: hoe krijg je het aan de praat, dat OpenLayers?

Met Node.js en npm. Kijk eens naar deze OpenLayers - Quick Start en OpenLayers - Basic Concepts.

Hou er rekening mee dat jouw data in RD (Nederlandse projectie) zijn, en dat de kaart dus bij voorkeur ook in deze projectie moet zijn. (Zie hiervoor mijn voorbeelden.)

OpenLayers maakt gebruik van Vite. Ik zie dat Esri bij haar ArcGIS Maps SDK voor JavaScript tegenwoordig ook gebruik maakt van Vite (dus dan moet het wel goed zijn, toch…)

Vite komt overigens gewoon mee met je OpenLayers project, dus daar hoef je - na het installeren van de relevante node modules - niets extra’s voor te doen.

Je kunt mijn voorbeelden downloaden en dan starten met
npm install # install dependencies
npm start

Ik hoor graag hoe ver je komt met deze aanwijzingen.

Succes,

E-J

Thanx voor tips ik ben eerst een in npm en node.js gedoken. Wat ik ervan begrijp is dat ik node.js op mijn windows server moet installeren om java serverside scripting te kunnen draaien en npm moet installeren om bepaalde libraries te dowloaden en te installeren? Kan je die library die benodigd is niet gewoon in map zetten? Ipv omslachting met npm dat te moeten doen
Grt,
Peter

Ja dat kan zeker. Je hebt Node/NPM, Vite etc niet in eerste instantie nodig. Misschien later als je een echte webapp maakt met deployment. Volgens mij staat dat ook in documentatie (Hosted build). In principe hoef je maar twee regels in de head sectie toe te voegen:

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/ol@v8.2.0/ol.css">
<script src="https://cdn.jsdelivr.net/npm/ol@v8.2.0/dist/ol.js"></script>

(versies kunnen recenter zijn).

1 like

Goedemorgen @Peterdem,

De tools die ik noemde (Node.js en npm) kun je gebruiken voor het bouwen van de applicatie, en deze moeten dus geïnstalleerd worden op de machine waarop je de app ontwikkelt.

Als je een versie hebt die je aan gebruikers wilt aanbieden (poc, mvp of al een echte applicatie), dan kun je deze met mpn/vite bouwen, met npm run buildThis will create a dist directory with a new index.html and assets that make up your application. These dist files can be deployed with your production website. (Zie op deze pagina onder Deploying your app.)

Het resultaat van het bouwproces is dus een html bestandje plus assets, d.w.z. een js en een css bestand. En dat plaats je op de server. Dus: op de server hoef je geen additionele software te installeren!

@Just_OSGeo heeft gelijk dat je de applicatie ook eenvoudiger kunt opzetten, met een link naar de OpenLayers bibliotheek, een beetje zoals je jouw eerste Leaflet versie hebt opgezet. Maar OpenLayers zelf zegt dat deze werkwijze is not recommended for production, en het lijkt er op dat je wel een echte applicatie aan het bouwen bent (voor een klant).

Maar uiteindelijk moet je zelf bepalen of het voor dit project (en/of mogelijke andere projecten) de moeite waard is om over te stappen op Node.js/npm…

Als je het eenmaal hebt staan, en weet te gebruiken, dan werkt het als een tierelier. Maar goed, je moet het dus wel even leren.

Zelf heb ik jarenlang tegen Node.js aangehikt. (Ik dacht dat dat alleen iets was voor echte ontwikkelaars…) Maar op een goed moment ben ik er toch maar even voor gaan zitten, een jaar of 4 geleden (hé, coronatijd!), en sindsdien heb ik wel veel meer plezier in het bouwen van web map appjes dan daarvoor :slight_smile:

Groet,

Egge-Jan

Onze klant gebruikt inderdaad een applicatie van ons die we jaren geleden voor ze hebben ontwikkeld (nog van de oude doos :slight_smile: ) omdat ze nu veel handmatig werk hebben aan het invoeren van gegevens van eigenaren, mandeligheid ed. was een wens om dit via kadaster informatie op te vragen en automatisch in het systeem te zetten. We zijn nu gedoken in de api’s van kadaster. Maar tijdens gesprek kwam vraag kunnen we object niet gewoon op kaart aanklikken en de info van object ophalen ipv van overal op te zoeken.

ga volgende week in mijn vakantie s’avonds eens in materi duiken van de kaart. :slight_smile:

1 like