Un cerchio di raggio su una mappa e una bugia. Ti dice che ogni punto a 10 km dal tuo magazzino e allo stesso modo raggiungibile nello stesso lasso di tempo. In realta, 10 km lungo un'autostrada richiedono 8 minuti e 10 km attraverso il centro citta richiedono 35. Il cerchio e geograficamente simmetrico; il viaggio non lo e.
Le mappe isocrona dicono la verita. Un'isocro na e un poligono che comprende ogni punto raggiungibile da un'origine entro un determinato tempo di viaggio, seguendo le reti stradali effettive e i limiti di velocita. Dove le strade sono veloci, il poligono si gonfia verso l'esterno. Dove le strade sono lente o assenti, si contrae verso l'interno. Il risultato e una rappresentazione irregolare e accurata dell'accessibilita nel mondo reale.
Questo tipo di analisi e stato utilizzato da grandi rivenditori e aziende di logistica per anni, IKEA utilizza l'analisi del bacino di cattura del tempo di viaggio per dimensionare i negozi, Deliveroo utilizza isochrone di consegna per impostare i confini della zona, le piattaforme immobiliari mostrano le aree di bacino di cattura del tempo di pendolarismo per gli indirizzi elencati. L'API di routing di MapAtlas rende la stessa capacita disponibile a qualsiasi sviluppatore con una chiave API.
Questo tutorial spiega cosa sono le isochrone, copre i principali casi d'uso e cammina attraverso un'implementazione JavaScript completa che renderizza isochrone multi-tempo (5, 10 e 15 minuti) su una mappa vettoriale MapAtlas. Codice totale: circa 60 linee.
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.
Casi d'uso nel mondo reale
Mappatura delle zone di consegna. Le piattaforme di e-commerce e consegna di cibo definiscono le zone in base al tempo di viaggio, non alla distanza. Una zona di consegna di 30 minuti da una dark kitchen copre un'area molto diversa a seconda che sia in un centro citta denso o in un parco industriale suburbano. Le isochrone riflettono questo accuratamente.
Analisi dell'area di bacino di cattura del negozio. La selezione del sito al dettaglio inizia con 'quante persone vivono a meno di 20 minuti di auto da questa posizione?' Le isochrone danno il poligono; i dati di censimento danno la popolazione al suo interno. La combinazione guida le decisioni di selezione del sito per i principali rivenditori.
Ricerca immobiliare per tempo di pendolarismo. Le piattaforme immobiliari consentono agli utenti di cercare proprieta entro X minuti da un luogo di lavoro. Questo e un'UX significativamente migliore rispetto alla ricerca basata sul raggio perche corrisponde a come le persone valutano effettivamente le posizioni.
Copertura ospedaliera e sanitaria. I pianificatori sanitari utilizzano le isochrone per identificare le popolazioni piu lontane di una soglia di tempo dai servizi di emergenza. Le isochrone di piu ospedali possono essere combinate per mostrare i divari di copertura.
Aree di bacino di cattura della scuola. Le autorita locali e i genitori utilizzano isochrone del tempo di viaggio (spesso a piedi, non in auto) per comprendere le aree di bacino di cattura effettive per i posti a scuola.
Marketing degli eventi. Mostra ai partecipanti alla conferenza quali ristoranti, hotel e attrazioni sono raggiungibili a piedi entro 10 minuti dal venue.
Il tutorial della mappa immobiliare e il tutorial di ottimizzazione dei percorsi utilizzano entrambi l'analisi isocrona come componente dei loro rispettivi flussi di lavoro.
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.
Confronto tra camminata e guida
Il parametro della modalita di viaggio cambia drasticamente la forma dell'isocro na. Confronta isochrone di 15 minuti dalla stessa origine:
Guida: Si estende per 15-20 km lungo le autostrade, si contrae a 3-5 km nelle aree urbane congestionate. Il poligono riflette la gerarchia della rete stradale, le autostrade veloci creano estensioni simili a tentacoli.
Camminata: Quasi circolare, tipicamente raggio di 1-1,5 km al passo di camminata normale (5 km/h). Gli ostacoli urbani (fiumi, ferrovie, attraversamenti limitati) creano ammaccature nella forma altrimenti regolare.
Ciclismo: Intervallo intermedio, tipicamente raggio di 3-5 km. Piu direzionale della camminata ma segue le reti di piste ciclabili piuttosto che le strade, che in citta ben collegate come Amsterdam o Copenaghen possono essere sorprendentemente vaste.
L'API restituisce isochrone specifiche accurate della modalita perche utilizza i dati effettivi della rete stradale con velocita appropriate alla modalita, non una semplice velocita media applicata alla distanza in linea retta.
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.
Integrazione con applicazioni immobiliari e logistiche
Per le applicazioni immobiliari, le isochrone risolvono elegantemente il problema della ricerca immobiliare per tempo di pendolarismo. Un utente inserisce l'indirizzo del suo luogo di lavoro, seleziona un tempo di pendolarismo massimo e la mappa mostra il poligono di bacino di cattura. Qualsiasi elenco di proprieta le cui coordinate rientrano nel poligono si qualifica. Questo e molto piu utile di 'entro 10 km', riflette come i pendolari effettivamente pensano.
Il tutorial della mappa immobiliare con clustering mostra come renderizzare gli elenchi di proprieta come marcatori della mappa. L'aggiunta del filtro basato su isocro na in cima a quell'implementazione e un'estensione naturale: calcola l'isocro na, quindi utilizza un test punto-in-poligono per filtrare quali marcatori mostrare.
Per la logistica, le isochrone definiscono le zone di consegna. Il tutorial dell'API di ottimizzazione dei percorsi copre come sequenziare piu fermate all'interno di una zona dopo che la zona stessa e stata definita. Queste due API sono progettate per funzionare insieme: le isochrone definiscono dove servi, l'API di routing ottimizza come servi.
La pagina delle capacita di analisi del tempo di viaggio ha documentazione aggiuntiva sull'endpoint isocro na, incluse isochrone basate sulla distanza (utili quando i dati del tempo di viaggio non sono disponibili), analisi multimodale e dettagli del formato di risposta.
Per le aziende che considerano le operazioni di consegna, la pagina delle soluzioni di logistica e consegna copre come le API di mapping si adattano all'architettura del flusso di lavoro di consegna. E per le piattaforme immobiliari, la pagina delle soluzioni immobiliari e immobiliari spiega i pattern di integrazione tipici.
Note sulle prestazioni
I calcoli isocro na sono computazionalmente intensivi, l'API elabora il grafico completo della rete stradale per determinare l'accessibilita. I tempi di risposta sono tipicamente 200-800 ms a seconda del limite di tempo (limiti di tempo piu grandi = attraversamento del grafico piu grande) e della modalita di viaggio (la guida attraversa piu strade rispetto alla camminata).
Per le applicazioni di produzione:
- Cache i risultati isocro na per le query comuni (origine fissa + limite di tempo). Una zona di consegna da una posizione di magazzino fisso non cambia frequentemente, memorizzala nella cache per ore o giorni.
- Limita le richieste simultanee. Se la tua UI consente di fare clic rapidamente, rimbalza i gestori di clic di 500 ms per evitare di attivare piu richieste API simultanee.
- Usa limiti di tempo piu brevi per le mappe interattive. Un'isocro na di camminata di 5 minuti ritorna in meno di 200 ms. Un'isocro na di guida di 60 minuti puo richiedere 600-800 ms. Abbina il limite di tempo al caso d'uso.
Riassunto
Le mappe isocro na mostrano cosa e effettivamente raggiungibile in un determinato tempo da un determinato punto, tenendo conto delle reti stradali, delle velocita di viaggio e della modalita di trasporto. Un cerchio di raggio non puo.
L'API di routing di MapAtlas restituisce isochrone come poligoni GeoJSON che renderizzi come livelli di riempimento su una mappa vettoriale. L'implementazione in questo tutorial:
- Effettua una richiesta POST all'endpoint
/isochronecon un elenco di limiti di tempo - Riceve una raccolta di feature GeoJSON con un poligono per limite di tempo
- Renderizza ogni poligono come livello
fillelinecon colori distinti - Supporta modalita guida, camminata e ciclismo
- Gestisce gli eventi di clic della mappa per ricalcolare da qualsiasi origine
Il codice completo viene eseguito in un singolo file HTML, nessun passaggio di costruzione, nessuna dipendenza oltre l'SDK di MapAtlas.
Iscritti per una chiave API di MapAtlas gratuita per iniziare. Le API di routing e isocro na sono incluse in tutti i piani, nessuna carta di credito richiesta per iniziare a costruire.
