Ingediend door Arnout op

Blog • API’s • Geo • Data & Dashboards

API’s gebruiken in webapps: van geocoding tot realtime dashboards

API’s maken het mogelijk om gegevens automatisch op te vragen (meestal als JSON) en die data te tonen in tabellen, grafieken en kaarten. Hieronder lees je meer over het gebruik van publieke API’s (zoals geolocation) en hoe je zelf API’s bouwt om je eigen databank te visualiseren.

screenshot
Bootstrap Drupal 11 JSON Node.js React Geocoding

Een API (Application Programming Interface) is een afgesproken “interface” voor het uitwisselen van data.

  • Je stuurt een request (bijv. GET of POST) naar een endpoint.
  • De server stuurt een response terug, vaak als JSON.
  • De opgevraagde data kan je dan gaan gebruiken in een tabel, grafiek, kaart, dashboard, …
Waarom JSON?

JSON is licht, leesbaar en past perfect bij JavaScript/Node.js/React. Daarom is het de standaard voor webapps.

API = de brug

Een API is de brug tussen data en je interface. Zonder API geen vlotte, veilige en herbruikbare datastroom naar je UI.

Publieke API’s zijn ideaal wanneer je snel betrouwbare data nodig hebt zonder zelf alles te moeten samenstellen en onderhouden. Denk aan geocoding, open data of andere geo-informatie.

Voorbeeld: geocoding met Geo API Vlaanderen

Op deze site kan je een toolpagina geocoderen bezoeken waarmee je CSV-bestanden kan verrijken: adressen → coördinaten (forward geocoding) en coördinaten → adresinfo (reverse geocoding). De resultaten verschijnen op de kaart én in een tabel, en je kan de verrijkte CSV opnieuw downloaden.

Voorbeeld-requests

Forward geocoding (adressen verrijken met coördinaten)

https://geo.api.vlaanderen.be/geolocation/v4/Location?q=Trambergstraat%201,%203520%20Zonhoven&c=nl

Reverse geocoding (coördinaten → adresinfo)

https://geo.api.vlaanderen.be/geolocation/v4/Location?xy=219009.14,187317.72&c=nl
Screenshot placeholder
Geocoderen-pagina (kaart + tabel)
Andere voorbeelden
  • Geopunt – geo-ecosysteem met diensten en datasets.
  • MAGDA – integratieplatform (meestal met toegangsvoorwaarden).

Wanneer je zelf een API-laag bouwt om data te ontsluiten (SQL-queries uitvoeren en resultaten als JSON teruggeven), is een veelgebruikte stack Node.js (backend) + React (frontend).

1. Databank
PostgreSQL / PostGIS / MySQL

Hier zit je ruwe data: klanten, verkopen, locaties, …

2. API (Node.js)
Express / NestJS

Hier maak je routes aan die data filtert, combineert, beveiligt data (vaak via SQL).

3. UI (React - HTML - Javascript ...)
Charts, kaarten, dashboards

Toont data: grafieken, heatmaps, tabellen, kaartlagen.


Voorbeeld: data voor grafieken via een API-endpoint

Stel dat je een endpoint maakt dat het aantal verkopen per vestiging teruggeeft. Via een API kan je de databank 'gefiltert' bevragen. Het JSON-resultaat van een bevraging kunnen we in de frontend vervolgens in een allerlei componenten, zoals een grafiek stoppen.

// Node.js (Express) - voorbeeld endpoint
app.get("/api/sales/verkooppunt", async (req, res) => {
  const { from, to } = req.query;

  const sql = `
    SELECT verkooppunt_id, COUNT(*) AS aantal_verkopen
    FROM verkopen
    WHERE verkoopprijs >= €19 AND verkoopprijs < €99
    GROUP BY verkooppunt_id
    ORDER BY aantal_verkopen DESC
  `;

  const result = await db.query(sql, [from, to]);
  res.json(result.rows);
});

Een winkelketen met meerdere vestigingen kan één centrale databank hebben met klantgegevens, productinformatie en verkoopdata. Als klanten werken met een klantenkaart, kan je verkopen koppelen aan klanten en locaties.

Wat kan je visueel maken?

  • Verkopen per vestiging (bar chart)
  • Evolutie in de tijd (line chart)
  • Heatmaps van klantendichtheid of omzet
  • Blinde vlekken: regio’s met veel klanten maar lage omzet of dekking
  • Overlap tussen vestigingen (zelfde klantenbestand)
Waarom dit werkt
De API levert telkens “hapklare” JSON aan het dashboard. Zo kan je bijna realtime monitoren en sneller beslissingen nemen.
Dashboard placeholder
Grafieken / heatmap / KPI-cards
Kaart placeholder
Vestigingen + klantenclusters

Performance
  • Beperk requests (rate limiting + limieten)
  • Cache herhaalbare resultaten (bv. geocoding)
  • Vraag enkel velden op die je nodig hebt
Security & privacy
  • Gebruik auth/rollen voor interne data
  • Log niet te veel (zeker niet persoonsdata)
  • Beperk data-exposure (GDPR-by-design)

Bekijk het voorbeeld op deze site

Op de geocoderen-pagina kan je een CSV uploaden en die verrijken via geolocation: adressen naar coördinaten of omgekeerd, inclusief kaartweergave en download.