Un circulo de radio en un mapa es una mentira. Te dice que cada punto a 10 km de tu almacen es igualmente alcanzable en la misma cantidad de tiempo. En realidad, 10 km a lo largo de una autopista toma 8 minutos y 10 km a traves de un centro de ciudad toma 35. El circulo es geograficamente simetrico; los viajes no lo son.
Los mapas de isocronas dicen la verdad. Una isocronas es un poligono que abarca cada punto alcanzable desde un origen dentro de un tiempo de viaje dado, siguiendo redes de carreteras reales y limites de velocidad. Donde las carreteras son rapidas, el poligono se abomba hacia afuera. Donde las carreteras son lentas o estan ausentes, se contrae hacia adentro. El resultado es una representacion irregular y precisa de la accesibilidad del mundo real.
Este tipo de analisis ha sido utilizado por grandes minoristas y empresas de logistica durante anos, IKEA utiliza analisis de captacion de tiempo de viaje para dimensionar tiendas, Deliveroo utiliza isocronas de entrega para establecer limites de zonas, las plataformas de bienes raices muestran areas de captacion de tiempo de desplazamiento para direcciones listadas. El API de enrutamiento de MapAtlas pone esta misma capacidad disponible para cualquier desarrollador con una clave de API.
Este tutorial explica que son las isocronas, cubre los principales casos de uso y camina a traves de una implementacion completa de JavaScript que renderiza isocronas de multiples tiempos (5, 10 y 15 minutos) en un mapa vectorial de MapAtlas. Codigo total: aproximadamente 60 lineas.
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.
Casos de uso del mundo real
Mapeo de zonas de entrega. Las plataformas de comercio electronico y entrega de alimentos definen zonas basadas en el tiempo de viaje, no en la distancia. Una zona de entrega de 30 minutos desde una cocina oscura cubre un area muy diferente dependiendo de si esta en un centro urbano denso o en un parque industrial suburbano. Las isocronas lo reflejan con precision.
Analisis del area de captacion de tiendas. La seleccion de sitios minoristas comienza con "cuantas personas viven dentro de un viaje de 20 minutos desde esta ubicacion?" Las isocronas dan el poligono; los datos del censo dan la poblacion dentro de ella. La combinacion impulsa las decisiones de seleccion de sitios para grandes minoristas.
Busqueda de propiedades por tiempo de desplazamiento. Las plataformas de bienes raices permiten a los usuarios buscar propiedades dentro de X minutos de un lugar de trabajo. Esta es una experiencia de usuario significativamente mejor que la busqueda basada en radio porque coincide con como las personas realmente evaluan ubicaciones.
Cobertura hospitalaria y de salud. Los planificadores de salud utilizan isocronas para identificar poblaciones mas lejanas que un tiempo umbral de los servicios de emergencia. Las isocronas de multiples hospitales pueden combinarse para mostrar brechas de cobertura.
Areas de captacion de escuelas. Las autoridades locales y los padres utilizan isocronas de tiempo de viaje (a menudo a pie, no en coche) para entender las areas de captacion reales para los lugares de la escuela.
Marketing de eventos. Muestra a los asistentes a conferencias que restaurantes, hoteles y atracciones son alcanzables a pie dentro de 10 minutos del lugar.
El tutorial de mapa de propiedades inmobiliarias y el tutorial de optimizacion de rutas ambos utilizan analisis de isocronas como componente de sus respectivos flujos de trabajo.
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>
Guarda esto como index.html, reemplaza YOUR_API_KEY, abrelo en un navegador y veras tres zonas de color alrededor de Amsterdam Centraal. Haz clic en cualquier parte del mapa para recalcular desde ese punto. Cambia los botones de radio para comparar isocronas de conduccion, caminata y ciclismo para el mismo origen.
Comparacion de caminata versus conduccion
El parametro del modo de viaje cambia dramaticamente la forma de la isocronas. Compara isocronas de 15 minutos desde el mismo origen:
Conduccion: Se extiende 15-20 km a lo largo de autopistas, se contrae a 3-5 km en areas urbanas congestionadas. El poligono refleja la jerarquia de la red de carreteras, las autopistas rapidas crean extensiones en forma de tentaculos.
Caminata: Casi circular, tipicamente un radio de 1-1.5 km a paso de caminata normal (5 km/h). Los obstaculos urbanos (rios, ferrocarriles, cruces limitados) crean hendiduras en la forma de otro modo regular.
Ciclismo: Rango intermedio, tipicamente un radio de 3-5 km. Mas direccional que caminar pero sigue redes de carriles para bicicletas en lugar de carreteras, que en ciudades bien conectadas como Amsterdam o Copenhague pueden ser sorprendentemente expansivas.
El API devuelve isocronas precisas especificas del modo porque utiliza datos de red de carreteras reales con velocidades apropiadas para el modo, no una velocidad promedio simple aplicada a la distancia en linea recta.
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.
Integracion con aplicaciones de bienes raices y logistica
Para aplicaciones de bienes raices, las isocronas resuelven elegantemente el problema de busqueda de propiedades por tiempo de desplazamiento. Un usuario ingresa la direccion de su lugar de trabajo, selecciona un tiempo maximo de desplazamiento y el mapa muestra el poligono de captacion. Cualquier listado de propiedad cuyas coordenadas caen dentro del poligono califica. Esto es mucho mas util que "dentro de 10 km", refleja como los desplazantes realmente piensan.
El tutorial de mapa de propiedades inmobiliarias con agrupamiento muestra como renderizar listados de propiedades como marcadores de mapa. Anadir filtrado basado en isocronas sobre esa implementacion es una extension natural: calcula la isocronas, luego utiliza una prueba de punto en poligono para filtrar que marcadores mostrar.
Para logistica, las isocronas definen zonas de entrega. El tutorial de API de optimizacion de rutas cubre como secuenciar multiples paradas dentro de una zona despues de que la zona misma se define. Estas dos APIs estan disenadas para trabajar juntas: las isocronas definen donde sirves, el API de enrutamiento optimiza como lo sirves.
La pagina de capacidades de analisis de tiempo de viaje tiene documentacion adicional sobre el punto final de isocronas, incluyendo isocronas basadas en distancia (utiles cuando los datos de tiempo de viaje no estan disponibles), analisis multimodal y detalles del formato de respuesta.
Para negocios que consideran operaciones de entrega, la pagina de soluciones de logistica y entrega cubre como los APIs de mapeo se ajustan a la arquitectura del flujo de trabajo de entrega. Y para plataformas de propiedades, la pagina de soluciones de bienes raices y propiedades explica patrones de integracion tipicos.
Notas de rendimiento
Los calculos de isocronas son computacionalmente intensivos, el API procesa el grafico completo de la red de carreteras para determinar la alcanzabilidad. Los tiempos de respuesta son tipicamente 200-800ms dependiendo del limite de tiempo (limites de tiempo mas grandes = traversal de grafico mas grande) y modo de viaje (conduccion recorre mas carreteras que caminata).
Para aplicaciones de produccion:
- Cachea resultados de isocronas para consultas comunes (origen fijo + limite de tiempo). Una zona de entrega desde una ubicacion fija de almacen no cambia frecuentemente, la cachea durante horas o dias.
- Limita solicitudes simultaneas. Si tu interfaz de usuario permite hacer clic rapidamente, debounce controladores de clic en 500ms para evitar activar multiples solicitudes de API simultaneas.
- Usa limites de tiempo mas cortos para mapas interactivos. Una isocronas de caminata de 5 minutos regresa en menos de 200ms. Una isocronas de conduccion de 60 minutos puede tomar 600-800ms. Emparejar el limite de tiempo con el caso de uso.
Resumen
Los mapas de isocronas muestran lo que realmente es alcanzable en un tiempo dado desde un punto dado, contando redes de carreteras, velocidades de viaje y modo de transporte. Un circulo de radio no puede.
El API de enrutamiento de MapAtlas devuelve isocronas como poligonos GeoJSON que renderizas como capas de relleno en un mapa vectorial. La implementacion en este tutorial:
- Realiza una solicitud POST al punto final
/isochronecon una lista de limites de tiempo - Recibe la coleccion de caracteristicas GeoJSON con un poligono por limite de tiempo
- Renderiza cada poligono como una capa
fillylinecon colores distintos - Soporta modos de conduccion, caminata y ciclismo
- Maneja eventos de clic del mapa para recalcular desde cualquier origen
El codigo completo se ejecuta en un archivo HTML unico, sin paso de compilacion, sin dependencias mas alla del SDK de MapAtlas.
Registrate para obtener una clave de API de MapAtlas gratuita para comenzar. Los APIs de enrutamiento e isocronas se incluyen en todos los planes, no se requiere tarjeta de credito para comenzar a construir.
