Tutorial: Build a Geospatial App with TopoLab API | Developer Guide

Introduction

In this tutorial, we'll build a simple web application that displays Dutch building data on an interactive map. You'll learn how to authenticate with the TopoLab API, query geospatial data, and visualize the results using Leaflet.

Prerequisites

A TopoLab account (free tier is sufficient)
Basic knowledge of JavaScript and HTML
Node.js installed (for the optional backend example)

Step 1: Get Your API Key

First, log into your TopoLab dashboard and navigate to API Keys. Create a new key with a descriptive name like "Tutorial App". Copy the key and store it securely—you'll need it for all API requests.

Step 2: Set Up the Project

Create a new directory for your project and add an index.html file:

<!DOCTYPE html>
<html>
<head>
  <title>TopoLab Map 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>

Step 3: Initialize the Map

Create app.js and initialize a Leaflet map centered on 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);

Step 4: Fetch Data from TopoLab

Add a function to query building data within the map bounds:

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 YOUR_API_KEY' }}
  );

  return response.json();
}

Step 5: Display the Data

Add the GeoJSON data to the map with 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(`Building: ${feature.properties.id}`);
    }
  }).addTo(map);
}

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

Next Steps

Congratulations! You've built your first geospatial application with TopoLab. From here, you can explore additional datasets, add search functionality, or integrate more sophisticated analysis using our full API suite.

Building Your First Geospatial Application with TopoLab API