Lingkaran radius pada peta adalah kebohongan. Ini memberitahu bahwa setiap titik 10 km dari gudang Anda sama-sama dapat dijangkau dalam waktu yang sama. Dalam kenyataan, 10 km di sepanjang jalan tol membutuhkan 8 menit sedangkan 10 km melalui pusat kota membutuhkan 35 menit. Lingkaran itu simetris secara geografis, tetapi perjalanan tidak.
Peta isokron menceritakan kebenaran. Isokron adalah poligon yang mencakup setiap titik yang dapat dijangkau dari titik asal dalam waktu perjalanan tertentu, mengikuti jaringan jalan sebenarnya dan batas kecepatan. Di mana jalan cepat, poligon menonjol ke luar. Di mana jalan lambat atau tidak ada, ia menyusut ke dalam. Hasilnya adalah representasi akurat dan tidak teratur dari aksesibilitas dunia nyata.
Jenis analisis ini telah digunakan oleh pengecer besar dan perusahaan logistik selama bertahun-tahun. IKEA menggunakan analisis jangkauan waktu perjalanan untuk menentukan ukuran toko, Deliveroo menggunakan isokron pengiriman untuk menetapkan batas zona, platform properti menampilkan area jangkauan waktu komute untuk alamat yang terdaftar. MapAtlas Routing API membuat kemampuan yang sama tersedia untuk setiap pengembang dengan kunci API.
Tutorial ini menjelaskan apa itu isokron, mencakup kasus penggunaan utama, dan memandu implementasi JavaScript lengkap yang merender isokron multi-waktu (5, 10, dan 15 menit) pada peta vektor MapAtlas. Total kode: sekitar 60 baris.
Cara Kerja API Isokron
Titik akhir isokron MapAtlas menerima titik awal (bujur, lintang), satu atau lebih batas waktu (dalam detik), dan mode perjalanan. API mengembalikan GeoJSON FeatureCollection dengan satu poligon per batas waktu.
Titik Akhir:
POST https://api.mapatlas.eu/v1/isochrone
Badan Permintaan:
{
"locations": [[4.9041, 52.3676]],
"range": [900, 600, 300],
"range_type": "time",
"profile": "driving-car"
}
locations, larik dari titik asal[bujur, lintang]range, larik batas waktu dalam detik (900 = 15 menit, 600 = 10 menit, 300 = 5 menit). Daftar terbesar terlebih dahulu sehingga poligon bersarang dengan benar.range_type,"time"untuk analisis waktu perjalanan,"distance"untuk isokron berbasis jarakprofile, mode perjalanan:"driving-car","cycling-regular","foot-walking","driving-hgv"(kendaraan barang berat)
Respons:
{
"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, ... }
}
]
}
Properti value setiap fitur adalah batas waktu dalam detik. Gunakan ini untuk menetapkan warna saat merender beberapa poligon bersarang.
Kasus Penggunaan Dunia Nyata
Pemetaan zona pengiriman. Platform e-commerce dan pengiriman makanan mendefinisikan zona berdasarkan waktu perjalanan, bukan jarak. Zona pengiriman 30 menit dari dapur gelap mencakup area yang sangat berbeda tergantung pada apakah berada di pusat kota yang padat atau taman industri pinggiran kota. Isokron mencerminkan hal ini dengan akurat.
Analisis area jangkauan toko. Pemilihan lokasi ritel dimulai dengan "berapa banyak orang yang tinggal dalam jarak berkendara 20 menit dari lokasi ini?" Isokron memberikan poligon, data sensus memberikan populasi di dalamnya. Kombinasi ini mendorong keputusan pemilihan lokasi untuk pengecer besar.
Pencarian properti berdasarkan waktu komute. Platform real estat memungkinkan pengguna mencari properti dalam X menit dari tempat kerja. Ini adalah pengalaman pengguna yang jauh lebih baik daripada pencarian berbasis radius karena sesuai dengan cara orang benar-benar mengevaluasi lokasi.
Cakupan rumah sakit dan layanan kesehatan. Perencana layanan kesehatan menggunakan isokron untuk mengidentifikasi populasi yang lebih jauh dari batas waktu tertentu dari layanan darurat. Isokron dari beberapa rumah sakit dapat digabungkan untuk menunjukkan celah cakupan.
Area jangkauan sekolah. Otoritas lokal dan orang tua menggunakan isokron waktu perjalanan (sering berjalan, bukan berkendara) untuk memahami area jangkauan aktual untuk tempat sekolah.
Pemasaran acara. Tunjukkan kepada peserta konferensi restoran, hotel, dan atraksi apa yang dapat dijangkau dengan berjalan kaki dalam 10 menit dari tempat acara.
Tutorial Peta Properti Real Estat dan tutorial Optimasi Rute keduanya menggunakan analisis isokron sebagai komponen alur kerja masing-masing.
Implementasi JavaScript Lengkap
Implementasi ini merender tiga isokron bersarang (5, 10, 15 menit) pada peta MapAtlas. Klik di mana saja pada peta untuk menghitung ulang isokron dari titik tersebut.
<!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>
Simpan ini sebagai index.html, ganti YOUR_API_KEY, buka di browser, dan Anda akan melihat tiga zona berwarna di sekitar Amsterdam Centraal. Klik di mana saja pada peta untuk menghitung ulang dari titik tersebut. Alihkan tombol radio untuk membandingkan isokron berkendara, berjalan, dan bersepeda untuk asal yang sama.
Perbandingan Berjalan Kaki vs Berkendara
Parameter mode perjalanan secara dramatis mengubah bentuk isokron. Bandingkan isokron 15 menit dari asal yang sama:
Berkendara: Menjangkau 15-20 km di sepanjang jalan tol, menyusut menjadi 3-5 km di area perkotaan yang ramai. Poligon mencerminkan hierarki jaringan jalan, jalan tol cepat menciptakan ekstensi seperti tentakel.
Berjalan Kaki: Hampir melingkar, biasanya radius 1-1,5 km dengan kecepatan berjalan normal (5 km/jam). Hambatan perkotaan (sungai, kereta api, persimpangan terbatas) menciptakan lekukan pada bentuk yang sebaliknya teratur.
Bersepeda: Jangkauan menengah, biasanya radius 3-5 km. Lebih terarah daripada berjalan tetapi mengikuti jaringan jalur sepeda daripada jalan, yang di kota-kota yang terhubung dengan baik seperti Amsterdam atau Copenhagen dapat sangat luas.
API mengembalikan isokron khusus mode yang akurat karena menggunakan data jaringan jalan sebenarnya dengan kecepatan yang sesuai dengan mode, bukan kecepatan rata-rata sederhana yang diterapkan pada jarak garis lurus.
Beberapa Asal
Untuk menampilkan isokron dari beberapa asal secara bersamaan, misalnya cakupan dari dua lokasi gudang, gabungkan hasilnya menjadi satu GeoJSON FeatureCollection dan tambahkan properti untuk membedakan asal:
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);
});
Gabungan isokron yang tumpang tindih menunjukkan area layanan gabungan Anda. Bagian yang tidak tumpang tindih mengungkapkan zona mana yang dilayani oleh hanya satu asal, berguna untuk mengidentifikasi celah atau area berkapasitas berlebih.
Integrasi Dengan Aplikasi Real Estat dan Logistik
Untuk aplikasi real estat, isokron memecahkan masalah pencarian properti waktu komute dengan elegan. Pengguna memasukkan alamat tempat kerja mereka, memilih waktu komute maksimal, dan peta menampilkan poligon jangkauan. Setiap daftar properti yang koordinatnya berada di dalam poligon memenuhi syarat. Ini jauh lebih berguna daripada "dalam jarak 10 km", mencerminkan cara pemilih komuter benar-benar berpikir.
Tutorial Peta Properti Real Estat dengan Clustering menunjukkan cara merender daftar properti sebagai penanda peta. Menambahkan penyaringan berbasis isokron di atas implementasi itu adalah ekstensi alami: hitung isokron, kemudian gunakan tes titik-dalam-poligon untuk memfilter penanda mana yang akan ditampilkan.
Untuk logistik, isokron mendefinisikan zona pengiriman. Tutorial Route Optimization API mencakup cara mengurutkan beberapa pemberhentian dalam zona setelah zona itu sendiri ditentukan. Kedua API ini dirancang untuk bekerja bersama: isokron mendefinisikan di mana Anda melayani, API routing mengoptimalkan cara Anda melayaninya.
Halaman Kemampuan Analisis Waktu Perjalanan memiliki dokumentasi tambahan tentang titik akhir isokron, termasuk isokron berbasis jarak (berguna ketika data waktu perjalanan tidak tersedia), analisis multi-modal, dan detail format respons.
Untuk bisnis yang mempertimbangkan operasi pengiriman, halaman solusi Logistik & Pengiriman mencakup cara API pemetaan cocok dengan arsitektur alur kerja pengiriman. Dan untuk platform properti, halaman solusi Real Estat & Properti menjelaskan pola integrasi khas.
Catatan Kinerja
Perhitungan isokron memerlukan komputasi intensif, API memproses grafik jaringan jalan lengkap untuk menentukan aksesibilitas. Waktu respons biasanya 200-800ms tergantung pada batas waktu (batas waktu lebih besar = traversal grafik lebih besar) dan mode perjalanan (berkendara melintasi lebih banyak jalan daripada berjalan).
Untuk aplikasi produksi:
- Cache hasil isokron untuk kueri umum (asal tetap + batas waktu). Zona pengiriman dari lokasi gudang tetap tidak berubah sering, cache selama berjam-jam atau berhari-hari.
- Batasi permintaan simultan. Jika UI Anda memungkinkan klik cepat, debounce penangan klik sebesar 500ms untuk menghindari pemicu beberapa permintaan API simultan.
- Gunakan batas waktu lebih pendek untuk peta interaktif. Isokron berjalan kaki 5 menit kembali dalam kurang dari 200ms. Isokron berkendara 60 menit mungkin memakan waktu 600-800ms. Cocokkan batas waktu dengan kasus penggunaan.
Ringkasan
Peta isokron menunjukkan apa yang sebenarnya dapat dijangkau dalam waktu tertentu dari titik tertentu, dengan mempertimbangkan jaringan jalan, kecepatan perjalanan, dan mode transportasi. Lingkaran radius tidak bisa.
MapAtlas Routing API mengembalikan isokron sebagai poligon GeoJSON yang Anda render sebagai lapisan isian pada peta vektor. Implementasi dalam tutorial ini:
- Membuat permintaan POST ke titik akhir
/isochronedengan daftar batas waktu - Menerima koleksi fitur GeoJSON dengan satu poligon per batas waktu
- Merender setiap poligon sebagai lapisan
filldanlinedengan warna berbeda - Mendukung mode berkendara, berjalan, dan bersepeda
- Menangani acara klik peta untuk menghitung ulang dari asal mana pun
Kode lengkap berjalan dalam satu file HTML, tanpa langkah build, tidak ada ketergantungan di luar SDK MapAtlas.
Daftar untuk kunci API MapAtlas gratis untuk memulai. API Routing dan Isochrone disertakan dalam semua paket, tidak perlu kartu kredit untuk mulai membangun.
