Un cercle de rayon sur une carte est un mensonge. Il vous dit que chaque point a 10 km de votre entrepot est egalement accessible dans le meme laps de temps. En realite, 10 km le long d'une autoroute prend 8 minutes et 10 km a travers un centre-ville prend 35. Le cercle est geometriquement symetrique, les voyages ne le sont pas.
Les cartes isochrones disent la verite. Une isochrone est un polygone qui englobe chaque point accessible a partir d'une origine dans un temps de deplacement donne, en suivant les reseaux routiers reels et les limites de vitesse. Ou les routes sont rapides, le polygone s'etend vers l'exterieur. Ou les routes sont lentes ou absentes, il se contracte vers l'interieur. Le resultat est une representation irreguliere et precise de l'accessibilite du monde reel.
Ce type d'analyse est utilise par les grands detaillants et les societes logistiques depuis des annees. IKEA utilise l'analyse de chalandise selon le temps de deplacement pour dimensionner les magasins, Deliveroo utilise les isochrones de livraison pour etablir les limites des zones, et les plates-formes immobilieres affichent les zones de chalandise selon le temps de navette pour les adresses listees. L'API de routage de MapAtlas met la meme capacite a la disposition de tout developpeur disposant d'une cle d'API.
Ce tutoriel explique ce que sont les isochrones, couvre les principaux cas d'usage et expose une implementation JavaScript complete qui rend les isochrones multi-temps (5, 10 et 15 minutes) sur une carte vectorielle de MapAtlas. Code total : environ 60 lignes.
Comment fonctionne l'API Isochrone
Le point de terminaison isochrone de MapAtlas accepte un point de depart (longitude, latitude), une ou plusieurs limites de temps (en secondes) et un mode de deplacement. Il retourne une FeatureCollection GeoJSON avec un polygone par limite de temps.
Point de terminaison :
POST https://api.mapatlas.eu/v1/isochrone
Corps de la demande :
{
"locations": [[4.9041, 52.3676]],
"range": [900, 600, 300],
"range_type": "time",
"profile": "driving-car"
}
locations, tableau de points d'origine[longitude, latitude]range, tableau de limites de temps en secondes (900 = 15 min, 600 = 10 min, 300 = 5 min). Listez les plus grands d'abord pour que les polygones s'imbriquent correctement.range_type,"time"pour l'analyse du temps de deplacement,"distance"pour les isochrones basees sur la distanceprofile, mode de deplacement :"driving-car","cycling-regular","foot-walking","driving-hgv"(vehicule de transport de marchandises)
Reponse :
{
"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, ... }
}
]
}
La propriete value de chaque fonctionnalite est la limite de temps en secondes. Utilisez ceci pour assigner les couleurs lors du rendu de polygones imbriques multiples.
Cas d'utilisation du monde reel
Cartographie des zones de livraison. Les plates-formes de commerce electronique et de livraison alimentaire definissent les zones en fonction du temps de deplacement, pas de la distance. Une zone de livraison de 30 minutes a partir d'une cuisine fantome couvre une zone tres differente selon qu'elle se trouve dans un centre-ville dense ou dans un parc industriel de banlieue. Les isochrones refletent cela avec precision.
Analyse de la zone de chalandise des magasins. La selection de sites de vente au detail commence par « combien de personnes vivent a moins de 20 minutes de route de cet emplacement ? ». Les isochrones donnent le polygone, les donnees de denombrement donnent la population qu'il contient. La combinaison guide les decisions de selection de sites pour les grands detaillants.
Recherche immobiliere selon le temps de navette. Les plates-formes immobilieres permettent aux utilisateurs de rechercher des proprietes a moins de X minutes d'un lieu de travail. C'est une experience utilisateur sensiblement meilleure que la recherche basee sur le rayon car elle correspond a la facon dont les gens evaluent reellement les emplacements.
Couverture hospitaliere et de sante. Les planificateurs de sante utilisent les isochrones pour identifier les populations plus eloignees qu'un seuil de temps des services d'urgence. Les isochrones de plusieurs hopitaux peuvent etre combinees pour montrer les lacunes de couverture.
Zones de chalandise des ecoles. Les autorites locales et les parents utilisent les isochrones de temps de deplacement (souvent a pied, pas en voiture) pour comprendre les zones de chalandise reelles pour les places scolaires.
Marketing evenementiel. Montrez aux participants de la conference quels restaurants, hotels et attractions sont accessibles a pied en moins de 10 minutes du lieu.
Le tutoriel de carte immobiliere et le tutoriel de routage utilisent tous deux l'analyse isochrone comme composante de leurs flux de travail respectifs.
Implementation JavaScript complete
Cette implementation rend trois isochrones imbriquees (5, 10, 15 minutes) sur une carte MapAtlas. Cliquez n'importe ou sur la carte pour recalculer les isochrones a partir de ce 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>
Enregistrez ceci sous le nom index.html, remplacez YOUR_API_KEY, ouvrez-le dans un navigateur et vous verrez trois zones colorees autour d'Amsterdam Centraal. Cliquez n'importe ou sur la carte pour recalculer a partir de ce point. Utilisez les boutons radio pour comparer les isochrones de conduite, de marche et de cyclisme pour la meme origine.
Comparaison marche a pied vs conduite
Le parametre de mode de deplacement change radicalement la forme de l'isochrone. Comparez les isochrones de 15 minutes a partir de la meme origine :
Conduite : S'etend de 15 a 20 km le long des autoroutes, se contracte a 3 a 5 km dans les zones urbaines congestionnees. Le polygone reflete la hierarchie du reseau routier, les autoroutes rapides creent des extensions de type tentacule.
Marche a pied : Presque circulaire, generalement 1 a 1,5 km de rayon a une allure de marche normale (5 km/h). Les obstacles urbains (fleuves, chemins de fer, traversees limitees) creent des creux dans la forme autrement reguliere.
Cyclisme : Plage intermediaire, generalement 3 a 5 km de rayon. Plus directionnel que la marche a pied mais suit les reseaux de pistes cyclables plutot que les routes, ce qui dans les villes bien connectees comme Amsterdam ou Copenhague peut etre etonnamment expansif.
L'API retourne des isochrones precis specifiques au mode car elle utilise des donnees de reseau routier reel avec des vitesses appropriees au mode, et non une simple velocite moyenne appliquee a la distance en ligne droite.
Origines multiples
Pour afficher les isochrones de plusieurs origines simultanement, par exemple la couverture a partir de deux emplacements d'entrepot, fusionnez les resultats dans une seule FeatureCollection GeoJSON et ajoutez des proprietes pour distinguer les origines :
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);
});
L'union des isochrones qui se chevauchent montre votre zone de service combinee. Les portions qui ne se chevauchent pas revelent quelles zones ne sont desservies que par une seule origine, utile pour identifier les lacunes ou les zones de surcharge.
Integration aux applications immobilieres et logistiques
Pour les applications immobilieres, les isochrones resolvent elegamment le probleme de recherche immobiliere selon le temps de navette. Un utilisateur entre son adresse professionnelle, selectionne un temps de navette maximal et la carte affiche le polygone de chalandise. Toute propriete listee dont les coordonnees se trouvent a l'interieur du polygone est admissible. C'est bien plus utile que « a moins de 10 km », cela reflete la facon dont les navetteurs pensent reellement.
Le tutoriel de carte immobiliere avec clustering montre comment afficher les proprietes listees sous forme de marqueurs de carte. L'ajout du filtrage basee sur les isochrones au-dessus de cette implementation est une extension naturelle : calculez l'isochrone, puis utilisez un test point-dans-polygone pour filtrer quels marqueurs afficher.
Pour la logistique, les isochrones definissent les zones de livraison. Le tutoriel de l'API de routage couvre la facon de sequencer plusieurs arrets dans une zone apres que la zone elle-meme soit definie. Ces deux APIs sont concues pour fonctionner ensemble : les isochrones definissent ou vous servez, l'API de routage optimise la facon dont vous le servez.
La page des capacites d'analyse du temps de deplacement contient une documentation supplementaire sur le point de terminaison isochrone, y compris les isochrones basees sur la distance (utile lorsque les donnees de temps de deplacement ne sont pas disponibles), l'analyse multimodale et les details du format de reponse.
Pour les entreprises envisageant des operations de livraison, la page des solutions logistique et livraison couvre la facon dont les APIs de cartographie s'ajustent a l'architecture des flux de travail de livraison. Et pour les plates-formes immobilieres, la page des solutions immobiliere et propriete explique les motifs d'integration typiques.
Notes de performance
Les calculs d'isochrone sont tres gourmands en ressources informatiques, l'API traite le graphe complet du reseau routier pour determiner l'accessibilite. Les temps de reponse sont generalement de 200 a 800 ms selon la limite de temps (les limites de temps plus grandes = la traversee de graphe plus grande) et le mode de deplacement (la conduite traverse plus de routes que la marche a pied).
Pour les applications de production :
- Mettez en cache les resultats d'isochrone pour les requetes courantes (origine fixe + limite de temps). Une zone de livraison a partir d'un emplacement d'entrepot fixe ne change pas frequemment, mettez-la en cache pendant des heures ou des jours.
- Limitez les requetes simultanees. Si votre interface utilisateur permet de cliquer rapidement, retardez les gestionnaires de clic de 500 ms pour eviter de declencher plusieurs requetes d'API simultanees.
- Utilisez des limites de temps plus courtes pour les cartes interactives. Une isochrone de marche a pied de 5 minutes retourne en moins de 200 ms. Une isochrone de conduite de 60 minutes peut prendre 600 a 800 ms. Adaplez la limite de temps au cas d'usage.
Resume
Les cartes isochrones montrent ce qui est reellement accessible en un temps donne a partir d'un point donne, en tenant compte des reseaux routiers, des vitesses de deplacement et du mode de transport. Un cercle de rayon ne peut pas.
L'API de routage de MapAtlas retourne les isochrones sous forme de polygones GeoJSON que vous rendez sous forme de couches de remplissage sur une carte vectorielle. L'implementation de ce tutoriel :
- Fait une demande POST au point de terminaison
/isochroneavec une liste de limites de temps - Recoit une collection de fonctionnalites GeoJSON avec un polygone par limite de temps
- Rend chaque polygone sous forme de couche
filletlineavec des couleurs distinctes - Prend en charge les modes de conduite, de marche et de cyclisme
- Gere les evenements de clic de carte pour recalculer a partir de n'importe quelle origine
Le code complet s'execute dans un seul fichier HTML, sans etape de construction, sans dependances au-dela du SDK MapAtlas.
Inscrivez-vous pour une cle d'API MapAtlas gratuite pour commencer. Les APIs de routage et d'isochrone sont incluses dans tous les plans, aucune carte de credit n'est requise pour commencer a construire.
