Ein Radiuskreis auf einer Karte ist eine Lüge. Er sagt dir, dass jeder Punkt 10 km von deinem Lagerhaus in der gleichen Zeit erreichbar ist. In der Realität dauern 10 km auf einer Autobahn 8 Minuten und 10 km durch ein Stadtzentrum dauern 35. Der Kreis ist geografisch symmetrisch; Reisen nicht.
Isochronen-Karten sagen die Wahrheit. Eine Isochrone ist ein Polygon, das jeden Punkt umfasst, der von einem Ursprung innerhalb einer bestimmten Reisezeit erreichbar ist, wobei echter Straßennetzwerk und Geschwindigkeitsbegrenzungen beachtet werden. Wo Straßen schnell sind, wölbt sich das Polygon nach außen. Wo Straßen langsam oder abwesend sind, zieht es sich nach innen. Das Ergebnis ist eine unregelmäßige, genaue Darstellung der realen Erreichbarkeit.
Diese Art von Analyse wird seit Jahren von großen Einzelhandelsketten und Logistikunternehmen verwendet. IKEA nutzt Reisezeit-Einzugsgebiet-Analyse zur Größenbestimmung von Geschäften, Deliveroo nutzt Liefer-Isochrone zur Festlegung von Zonengrenzen, Immobilienplattformen zeigen Pendelzeit-Einzugsgebiete für aufgelistete Adressen. Die MapAtlas Routing API macht die gleiche Fähigkeit für jeden Entwickler mit einem API-Schlüssel verfügbar.
Dieses Tutorial erläutert, was Isochrone sind, behandelt die Hauptanwendungsfälle und zeigt eine vollständige JavaScript-Implementierung, die Multi-Zeiten-Isochrone (5, 10 und 15 Minuten) auf einer MapAtlas-Vektorkarte rendert. Gesamtcode: etwa 60 Zeilen.
How the Isochrone API Works
The MapAtlas isochrone endpoint accepts a starting point (longitude, latitude), one or more time limits (in seconds), and a travel mode. It returns a GeoJSON FeatureCollection with one polygon per time limit.
Endpoint:
POST https://api.mapatlas.eu/v1/isochrone
Request body:
{
"locations": [[4.9041, 52.3676]],
"range": [900, 600, 300],
"range_type": "time",
"profile": "driving-car"
}
locations, array of[longitude, latitude]origin pointsrange, array of time limits in seconds (900 = 15 min, 600 = 10 min, 300 = 5 min). List largest first so polygons nest correctly.range_type,"time"for travel-time analysis,"distance"for distance-based isochronesprofile, travel mode:"driving-car","cycling-regular","foot-walking","driving-hgv"(heavy goods vehicle)
Response:
{
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"geometry": {
"type": "Polygon",
"coordinates": [[ [4.87, 52.34], [4.92, 52.41], ... ]]
},
"properties": {
"value": 900,
"center": [4.9041, 52.3676],
"group_index": 0
}
},
{
"type": "Feature",
"geometry": { "type": "Polygon", "coordinates": [...] },
"properties": { "value": 600, ... }
},
{
"type": "Feature",
"geometry": { "type": "Polygon", "coordinates": [...] },
"properties": { "value": 300, ... }
}
]
}
Each feature's value property is the time limit in seconds. Use this to assign colors when rendering multiple nested polygons.
Echtanwendungsfälle
Lieferzonenabbildung. E-Commerce- und Lebensmittel-Lieferplattformen definieren Zonen basierend auf Reisezeit, nicht auf Entfernung. Eine 30-Minuten-Lieferzone von einer dunklen Küche deckt eine völlig andere Fläche ab, je nachdem, ob sie sich in einem dichten Stadtzentrum oder einem vorstädtischen Industriepark befindet. Isochrone spiegeln dies genau wider.
Einzelhandelsstandort-Einzugsgebiet-Analyse. Die Einzelhandelsstandortauswahl beginnt mit "wie viele Menschen leben innerhalb von 20 Minuten Fahrt von diesem Ort?" Isochrone geben das Polygon; Volkszählungsdaten geben die Population innerhalb davon. Die Kombination treib Standortauswahlentscheidungen für große Einzelhandelsketten.
Immobiliensuche nach Pendelzeit. Immobilienplattformen ermöglichen es Benutzern, Immobilien innerhalb von X Minuten von einem Arbeitsplatz zu suchen. Dies ist eine deutlich bessere UX als radiusbasierte Suche, da sie damit übereinstimmt, wie Menschen Orte tatsächlich bewerten.
Krankenhaus und Gesundheitsversorgung. Gesundheitsplaner nutzen Isochrone, um Populationen zu identifizieren, die eine Schwelle-Zeit von Notfalldiensten entfernt sind. Isochrone von mehreren Krankenhäusern können kombiniert werden, um Versorgungslücken zu zeigen.
Schuleinzugsgebiete. Lokale Behörden und Eltern nutzen Reisezeit-Isochrone (oft zu Fuß, nicht mit dem Auto), um tatsächliche Einzugsgebiete für Schulplätze zu verstehen.
Event-Marketing. Zeigen Sie Konferenzteilnehmern, welche Restaurants, Hotels und Attraktionen zu Fuß innerhalb von 10 Minuten des Veranstaltungsortes erreichbar sind.
Das Real Estate Property Map-Tutorial und das Route Optimization-Tutorial verwenden beide Isochrone-Analyse als Komponente ihrer jeweiligen Workflows.
Complete JavaScript Implementation
This implementation renders three nested isochrones (5, 10, 15 minutes) on a MapAtlas map. Click anywhere on the map to recalculate isochrones from that point.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Isochrone Map</title>
<link rel="stylesheet" href="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.css" />
<style>
body, html { margin: 0; padding: 0; height: 100%; }
#map { width: 100%; height: 100vh; }
#controls {
position: absolute; top: 12px; left: 12px; z-index: 10;
background: white; padding: 12px 16px; border-radius: 8px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-family: sans-serif; font-size: 14px;
}
#controls label { display: block; margin-bottom: 6px; }
#loading { color: #888; margin-top: 6px; display: none; }
</style>
</head>
<body>
<div id="controls">
<strong>Travel mode:</strong>
<label><input type="radio" name="mode" value="driving-car" checked> Driving</label>
<label><input type="radio" name="mode" value="foot-walking"> Walking</label>
<label><input type="radio" name="mode" value="cycling-regular"> Cycling</label>
<div id="loading">Calculating...</div>
<div style="margin-top:8px; color:#555;">Click the map to set origin.</div>
</div>
<div id="map"></div>
<script src="https://unpkg.com/@mapmetrics/mapmetrics-gl/dist/mapmetrics-gl.js"></script>
<script>
const API_KEY = 'YOUR_API_KEY';
const ISOCHRONE_URL = 'https://api.mapatlas.eu/v1/isochrone';
// Color palette for 5 / 10 / 15 minute zones
const ZONE_COLORS = {
900: { fill: '#e74c3c', opacity: 0.15, border: '#c0392b' }, // 15 min, red
600: { fill: '#f39c12', opacity: 0.20, border: '#d68910' }, // 10 min, orange
300: { fill: '#27ae60', opacity: 0.25, border: '#1e8449' }, // 5 min , green
};
// ── Initialize map ─────────────────────────────────────────────────────────────
const map = new mapmetricsgl.Map({
container: 'map',
style: `https://tiles.mapatlas.eu/styles/basic/style.json?key=${API_KEY}`,
center: [4.9041, 52.3676],
zoom: 11,
});
// ── Fetch isochrone from API ───────────────────────────────────────────────────
async function fetchIsochrone(lngLat, profile) {
const body = {
locations: [[lngLat.lng, lngLat.lat]],
range: [900, 600, 300], // 15, 10, 5 minutes in seconds
range_type: 'time',
profile,
};
const resp = await fetch(ISOCHRONE_URL, {
method: 'POST',
headers: { 'Content-Type': 'application/json', 'X-Api-Key': API_KEY },
body: JSON.stringify(body),
});
if (!resp.ok) throw new Error(`Isochrone API error: ${resp.status}`);
return resp.json();
}
// ── Render isochrones on map ───────────────────────────────────────────────────
function renderIsochrones(geojson) {
// Remove previous layers and source if they exist
['iso-fill-900', 'iso-fill-600', 'iso-fill-300',
'iso-line-900', 'iso-line-600', 'iso-line-300'].forEach(id => {
if (map.getLayer(id)) map.removeLayer(id);
});
if (map.getSource('isochrones')) map.removeSource('isochrones');
// Add GeoJSON source with all three polygons
map.addSource('isochrones', { type: 'geojson', data: geojson });
// Render each zone, largest first (so smaller zones appear on top)
[900, 600, 300].forEach(seconds => {
const colors = ZONE_COLORS[seconds];
// Fill layer
map.addLayer({
id: `iso-fill-${seconds}`,
type: 'fill',
source: 'isochrones',
filter: ['==', ['get', 'value'], seconds],
paint: {
'fill-color': colors.fill,
'fill-opacity': colors.opacity,
},
});
// Border layer
map.addLayer({
id: `iso-line-${seconds}`,
type: 'line',
source: 'isochrones',
filter: ['==', ['get', 'value'], seconds],
paint: {
'line-color': colors.border,
'line-width': 2,
'line-dasharray': seconds === 900 ? [1] : [4, 2],
},
});
});
}
// ── Add origin marker ─────────────────────────────────────────────────────────
let originMarker = null;
function setOriginMarker(lngLat) {
if (originMarker) originMarker.remove();
originMarker = new mapmetricsgl.Marker({ color: '#2c3e50' })
.setLngLat(lngLat)
.setPopup(new mapmetricsgl.Popup({ offset: 25 }).setHTML('<strong>Origin</strong>'))
.addTo(map);
}
// ── Click handler ─────────────────────────────────────────────────────────────
map.on('click', async (e) => {
const profile = document.querySelector('input[name="mode"]:checked').value;
const loading = document.getElementById('loading');
setOriginMarker(e.lngLat);
loading.style.display = 'block';
try {
const geojson = await fetchIsochrone(e.lngLat, profile);
renderIsochrones(geojson);
} catch (err) {
console.error('Isochrone error:', err);
alert('Could not calculate isochrone. Check the console for details.');
} finally {
loading.style.display = 'none';
}
});
// ── Load initial isochrone for Amsterdam Centraal ─────────────────────────────
map.on('load', async () => {
const defaultOrigin = { lng: 4.9001, lat: 52.3791 };
setOriginMarker(defaultOrigin);
try {
const geojson = await fetchIsochrone(defaultOrigin, 'driving-car');
renderIsochrones(geojson);
} catch (err) {
console.error('Initial isochrone error:', err);
}
});
</script>
</body>
</html>
Save this as index.html, replace YOUR_API_KEY, open it in a browser, and you'll see three colored zones around Amsterdam Centraal. Click anywhere on the map to recalculate from that point. Switch the radio buttons to compare driving, walking, and cycling isochrones for the same origin.
Vergleich Zu Fuß vs. Auto
Der Reisemodusparameter verändert die Isochronen-Form dramatisch. Vergleichen Sie 15-Minuten-Isochrone von der gleichen Quelle:
Fahren: Zieht sich 15-20 km entlang von Autobahnen, zieht sich auf 3-5 km in verstopften urbanen Gebieten. Das Polygon spiegelt die Hierarchie des Straßennetzwerks wider, schnelle Autobahnen erzeugen tentakelförmige Erweiterungen.
Zu Fuß: Fast kreisförmig, typischerweise 1-1,5 km Radius bei normaler Gehgeschwindigkeit (5 km/h). Stadtische Hindernisse (Flüsse, Eisenbahnen, begrenzte Übergänge) erzeugen Dellen in der ansonsten regelmäßigen Form.
Radfahren: Mittlerer Bereich, typischerweise 3-5 km Radius. Direktionaler als zu Fuß, aber folgt Fahrradwegnetzen anstelle von Straßen, was in gut vernetzten Städten wie Amsterdam oder Kopenhagen überraschend ausgedehnt sein kann.
Die API gibt genaue moduspezifische Isochrone zurück, weil sie aktuelle Straßennetzwerk-Daten mit modusgerechten Geschwindigkeiten verwendet, nicht eine einfache durchschnittliche Geschwindigkeit auf Luftlinie-Entfernung.
Multiple Origins
To show isochrones from multiple origins simultaneously, for example, coverage from two warehouse locations, merge the results into a single GeoJSON FeatureCollection and add properties to distinguish origins:
async function fetchMultiOriginIsochrones(origins, profile) {
const requests = origins.map(origin =>
fetchIsochrone({ lng: origin[0], lat: origin[1] }, profile)
);
const results = await Promise.all(requests);
// Merge all features, tagging each with its origin index
const merged = {
type: 'FeatureCollection',
features: results.flatMap((geojson, i) =>
geojson.features.map(f => ({
...f,
properties: { ...f.properties, origin_index: i },
}))
),
};
return merged;
}
// Example: Two Amsterdam warehouses
const origins = [
[4.8720, 52.3531], // Warehouse A, West Amsterdam
[4.9441, 52.3599], // Warehouse B, East Amsterdam
];
map.on('load', async () => {
const geojson = await fetchMultiOriginIsochrones(origins, 'driving-car');
// Use origin_index in filter expressions to color each origin differently
renderIsochrones(geojson);
});
The union of overlapping isochrones shows your combined service area. The non-overlapping portions reveal which zones are served by only one origin, useful for identifying gaps or over-capacity areas.
Integration mit Immobilien- und Logistikanwendungen
Für Immobilienanwendungen lösen Isochrone das Pendelzeit-Immobiliensuche-Problem elegant. Ein Benutzer gibt die Adresse ihres Arbeitsplatzes ein, wählt eine maximale Pendelzeit, und die Karte zeigt das Einzugsgebiets-Polygon. Jede Immobilien-Auflistung, deren Koordinaten innerhalb des Polygons fallen, qualifiziert sich. Dies ist viel nützlicher als "innerhalb von 10 km", es spiegelt wider, wie Pendler tatsächlich denken.
Das Real Estate Property Map with Clustering-Tutorial zeigt, wie Immobilien-Auflistungen als Map-Marker gerendert werden. Das Hinzufügen von Isochrone-basierter Filterung auf dieser Implementierung ist eine natürliche Erweiterung: Berechnen Sie die Isochrone, verwenden Sie dann einen Point-in-Polygon-Test, um zu filtern, welche Marker angezeigt werden.
Für Logistik definieren Isochrone Lieferzonen. Das Route Optimization API-Tutorial behandelt, wie mehrere Stopps innerhalb einer Zone sequenziert werden, nachdem die Zone selbst definiert ist. Diese beiden APIs sind konzipiert, zusammenzuarbeiten: Isochrone definieren, wo Sie bedienen, die Routing API optimiert, wie Sie bedienen.
Die Travel Time Analysis-Funktionsseite hat zusätzliche Dokumentation zum Isochrone-Endpunkt, einschließlich distanzbasierter Isochrone (nützlich, wenn Reisezeit-Daten nicht verfügbar sind), Multi-Modal-Analyse und Response-Format-Details.
Für Unternehmen, die Lieferbetrieb in Betracht ziehen, erklärt die Logistics & Delivery-Lösungsseite, wie Mapping-APIs in die Lieferablauf-Architektur passen. Und für Immobilienplattformen erklärt die Real Estate & Property-Lösungsseite typische Integrationsmuster.
Performance-Hinweise
Isochronen-Berechnungen sind rechenintensiv. Die API verarbeitet das vollständige Straßennetzwerk-Diagramm, um die Erreichbarkeit zu bestimmen. Die Response-Zeiten betragen typischerweise 200-800 ms, je nach Zeitlimit (größere Zeitlimits = größere Graphdurchquerung) und Reisemodus (Fahren durchquert mehr Straßen als zu Fuß).
Für Produktionsanwendungen:
- Cache Isochrone-Ergebnisse für häufige Abfragen (fester Ursprung + Zeitlimit). Eine Lieferzone von einem festen Lagerort ändert sich nicht häufig, cache sie für Stunden oder Tage.
- Begrenzen Sie gleichzeitige Anfragen. Wenn Ihre UI ein schnelles Anklicken ermöglicht, entfernen Sie Click-Handler um 500 ms, um mehrere gleichzeitige API-Anfragen zu vermeiden.
- Verwenden Sie kürzere Zeitlimits für interaktive Karten. Eine 5-Minuten-Fuß-Isochrone wird in unter 200 ms zurückgegeben. Eine 60-Minuten-Auto-Isochrone kann 600-800 ms dauern. Passen Sie das Zeitlimit an den Anwendungsfall an.
Summary
Isochrone maps show what's actually reachable in a given time from a given point, accounting for road networks, travel speeds, and mode of transport. A radius circle cannot.
The MapAtlas Routing API returns isochrones as GeoJSON polygons that you render as fill layers on a vector map. The implementation in this tutorial:
- Makes a POST request to the
/isochroneendpoint with a list of time limits - Receives GeoJSON feature collection with one polygon per time limit
- Renders each polygon as a
fillandlinelayer with distinct colors - Supports driving, walking, and cycling modes
- Handles map click events to recalculate from any origin
The complete code runs in a single HTML file, no build step, no dependencies beyond the MapAtlas SDK.
Sign up for a free MapAtlas API key to get started. The Routing and Isochrone APIs are included in all plans, no credit card required to start building.
