Tutorial: Bouw een Geospatiale App met TopoLab API | Developer Guide

Introductie

In deze tutorial bouwen we een eenvoudige webapplicatie die Nederlandse gebouwdata weergeeft op een interactieve kaart. U leert hoe u authenticeert met de TopoLab API, geodata opvraagt en de resultaten visualiseert met Leaflet.

Vereisten

Een TopoLab-account (gratis tier is voldoende)
Basiskennis van JavaScript en HTML
Node.js geïnstalleerd (voor het optionele backend voorbeeld)

Stap 1: Verkrijg Uw API-sleutel

Log eerst in op uw TopoLab-dashboard en navigeer naar API-sleutels. Maak een nieuwe sleutel met een beschrijvende naam zoals "Tutorial App". Kopieer de sleutel en bewaar deze veilig—u heeft deze nodig voor alle API-verzoeken.

Stap 2: Project Opzetten

Maak een nieuwe map voor uw project en voeg een index.html bestand toe:

<!DOCTYPE html>
<html>
<head>
  <title>TopoLab Kaart Demo</title>
  <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
  <style>
    #map { height: 100vh; width: 100%; }
  </style>
</head>
<body>
  <div id="map"></div>
  <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
  <script src="app.js"></script>
</body>
</html>

Stap 3: Initialiseer de Kaart

Maak app.js en initialiseer een Leaflet-kaart gecentreerd op Amsterdam:

const map = L.map('map').setView([52.37, 4.89], 14);

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '© OpenStreetMap contributors'
}).addTo(map);

Stap 4: Data Ophalen van TopoLab

Voeg een functie toe om gebouwdata binnen de kaartgrenzen op te vragen:

async function fetchBuildings(bounds) {
  const bbox = [bounds.getWest(), bounds.getSouth(),
                bounds.getEast(), bounds.getNorth()].join(',');

  const response = await fetch(
    `https://api.topolab.nl/v1/buildings?bbox=${bbox}&limit=100`,
    { headers: { 'Authorization': 'Bearer UW_API_SLEUTEL' }}
  );

  return response.json();
}

Stap 5: Data Weergeven

Voeg de GeoJSON-data toe aan de kaart met styling:

let buildingLayer = null;

async function updateBuildings() {
  const data = await fetchBuildings(map.getBounds());

  if (buildingLayer) map.removeLayer(buildingLayer);

  buildingLayer = L.geoJSON(data, {
    style: { color: '#3388ff', weight: 1, fillOpacity: 0.3 },
    onEachFeature: (feature, layer) => {
      layer.bindPopup(`Gebouw: ${feature.properties.id}`);
    }
  }).addTo(map);
}

map.on('moveend', updateBuildings);
updateBuildings();

Volgende Stappen

Gefeliciteerd! U heeft uw eerste geospatiale applicatie gebouwd met TopoLab. Van hieruit kunt u extra datasets verkennen, zoekfunctionaliteit toevoegen of meer geavanceerde analyses integreren met onze volledige API-suite.

Uw Eerste Geospatiale Applicatie Bouwen met TopoLab API