आइसोक्रोन मैप्स समझाए: 15 मिनट में क्या पहुंचा जा सकता है दिखाने का

नक्शे पर एक radius circle एक झूठ है। यह बताता है कि आपके warehouse से हर 10 किमी का बिंदु उतने ही समय में पहुंचा जा सकता है। वास्तव में, motorway पर 10 किमी केवल 8 मिनट लेता है और शहर के केंद्र से 10 किमी 35 मिनट लेता है। Circle भौगोलिक रूप से सममित है; यात्रा नहीं है।

Isochrone maps सच बताते हैं। एक isochrone एक polygon है जो उन सभी बिंदुओं को घेरता है जो एक निश्चित यात्रा समय के भीतर किसी मूल स्थान से पहुंचे जा सकते हैं, वास्तविक सड़क नेटवर्क और गति सीमाओं का पालन करते हुए। जहां सड़कें तेज हैं, polygon बाहर की ओर फैलता है। जहां सड़कें धीमी या अनुपस्थित हैं, यह अंदर की ओर सिकुड़ता है। परिणाम वास्तविक दुनिया की पहुंच का एक अनियमित, सटीक प्रतिनिधित्व है।

इस तरह का विश्लेषण बड़े retailers और logistics कंपनियां वर्षों से उपयोग करती आ रही हैं। IKEA स्टोर का आकार तय करने के लिए travel-time catchment विश्लेषण उपयोग करती है, Deliveroo zone सीमाएं निर्धारित करने के लिए delivery isochrones का उपयोग करती है, और property platforms सूचीबद्ध पतों के लिए commute-time catchment areas दिखाते हैं। MapAtlas Routing API यही क्षमता किसी भी developer को API key के साथ उपलब्ध कराता है।

यह tutorial बताता है कि isochrones क्या हैं, मुख्य उपयोग के मामलों को कवर करता है, और एक पूर्ण JavaScript implementation से गुजरता है जो MapAtlas vector map पर multi-time isochrones (5, 10, और 15 मिनट) render करता है। कुल कोड: लगभग 60 लाइनें।

Isochrone API कैसे काम करता है

MapAtlas isochrone endpoint एक शुरुआती बिंदु (longitude, latitude), एक या अधिक समय सीमाएं (सेकंड में), और एक यात्रा मोड स्वीकार करता है। यह प्रति समय सीमा एक polygon के साथ एक GeoJSON FeatureCollection लौटाता है।

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: [longitude, latitude] मूल बिंदुओं की array
• range: सेकंड में समय सीमाओं की array (900 = 15 मिनट, 600 = 10 मिनट, 300 = 5 मिनट)। Polygons सही तरह से nest हों इसके लिए सबसे बड़ा पहले लिखें।
• range_type: travel-time विश्लेषण के लिए "time", दूरी-आधारित isochrones के लिए "distance"
• profile: यात्रा मोड: "driving-car", "cycling-regular", "foot-walking", "driving-hgv" (भारी माल वाहन)

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, ... }
    }
  ]
}

प्रत्येक feature की value property सेकंड में समय सीमा है। कई nested polygons render करते समय रंग असाइन करने के लिए इसका उपयोग करें।

वास्तविक दुनिया के उपयोग के मामले

Delivery zone mapping. E-commerce और food delivery platforms zones को दूरी के बजाय यात्रा समय के आधार पर परिभाषित करते हैं। एक dark kitchen से 30 मिनट का delivery zone बहुत अलग क्षेत्र को कवर करता है, यह इस पर निर्भर करता है कि वह घने शहर के केंद्र में है या suburban industrial park में। Isochrones इसे सटीक रूप से दर्शाते हैं।

Store catchment area analysis. Retail साइट चयन इस प्रश्न से शुरू होता है: "इस स्थान से 20 मिनट की ड्राइव के भीतर कितने लोग रहते हैं?" Isochrones polygon देते हैं; census data उस polygon के भीतर की जनसंख्या देता है। यह संयोजन बड़े retailers के लिए साइट चयन निर्णयों को संचालित करता है।

Property search by commute time. Real estate platforms उपयोगकर्ताओं को workplace से X मिनट के भीतर properties खोजने देते हैं। यह radius-based search की तुलना में काफी बेहतर user experience है, क्योंकि यह मेल खाता है कि लोग वास्तव में स्थानों का मूल्यांकन कैसे करते हैं।

Hospital और healthcare coverage. Healthcare planners isochrones का उपयोग उन जनसंख्याओं की पहचान करने के लिए करते हैं जो emergency services से एक निश्चित समय से अधिक दूर हैं। कई hospitals से isochrones को coverage gaps दिखाने के लिए जोड़ा जा सकता है।

School catchment areas. स्थानीय प्राधिकरण और माता-पिता school की जगहों के लिए वास्तविक catchment areas समझने के लिए travel-time isochrones (अक्सर walking, driving नहीं) का उपयोग करते हैं।

Event marketing. Conference attendees को दिखाएं कि venue से 10 मिनट पैदल चलकर कौन से restaurants, hotels और आकर्षण पहुंचे जा सकते हैं।

Real Estate Property Map tutorial और Route Optimization tutorial दोनों अपने-अपने workflows के एक घटक के रूप में isochrone विश्लेषण का उपयोग करते हैं।

पूर्ण JavaScript Implementation

यह implementation MapAtlas map पर तीन nested isochrones (5, 10, 15 मिनट) render करता है। उस बिंदु से isochrones पुनः गणना करने के लिए map पर कहीं भी क्लिक करें।

<!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>

इसे index.html के रूप में सहेजें, YOUR_API_KEY बदलें, इसे browser में खोलें, और आप Amsterdam Centraal के आसपास तीन रंगीन zones देखेंगे। उस बिंदु से पुनः गणना करने के लिए map पर कहीं भी क्लिक करें। उसी मूल स्थान के लिए driving, walking और cycling isochrones की तुलना करने के लिए radio buttons स्विच करें।

Walking बनाम Driving तुलना

Travel mode parameter isochrone का आकार नाटकीय रूप से बदल देता है। उसी मूल स्थान से 15 मिनट के isochrones की तुलना करें:

Driving: Motorways पर 15-20 किमी तक फैलता है, भीड़भाड़ वाले शहरी क्षेत्रों में 3-5 किमी तक सिकुड़ता है। Polygon सड़क नेटवर्क की पदानुक्रम को दर्शाता है, तेज motorways तम्बू जैसे विस्तार बनाती हैं।

Walking: लगभग गोलाकार, सामान्य पैदल चलने की गति (5 किमी/घंटा) पर आमतौर पर 1-1.5 किमी radius। शहरी बाधाएं (नदियां, रेलवे, सीमित crossings) अन्यथा नियमित आकार में गड्ढे बनाती हैं।

Cycling: मध्यवर्ती सीमा, आमतौर पर 3-5 किमी radius। Walking से अधिक दिशात्मक लेकिन सड़कों के बजाय bike-path networks का अनुसरण करता है, जो Amsterdam या Copenhagen जैसे अच्छी तरह से जुड़े शहरों में आश्चर्यजनक रूप से विस्तृत हो सकते हैं।

API सटीक mode-specific isochrones लौटाता है क्योंकि यह mode-उपयुक्त गति के साथ वास्तविक सड़क नेटवर्क डेटा का उपयोग करता है, न कि straight-line दूरी पर लागू एक साधारण औसत वेग।

Multiple Origins

एक साथ कई origins से isochrones दिखाने के लिए, उदाहरण के लिए, दो warehouse स्थानों से coverage, परिणामों को एक single GeoJSON FeatureCollection में मर्ज करें और origins को अलग करने के लिए properties जोड़ें:

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);
});

Overlapping isochrones का मिलन आपका संयुक्त सेवा क्षेत्र दिखाता है। गैर-overlapping हिस्से यह प्रकट करते हैं कि कौन से zones केवल एक origin द्वारा सेवित हैं, जो gaps या अत्यधिक क्षमता वाले क्षेत्रों की पहचान के लिए उपयोगी है।

Real Estate और Logistics Applications के साथ एकीकरण

Real estate applications के लिए, isochrones commute-time property search की समस्या को सुरुचिपूर्ण ढंग से हल करते हैं। एक उपयोगकर्ता अपना workplace पता दर्ज करता है, अधिकतम commute समय चुनता है, और map catchment polygon दिखाता है। जो भी property listing के निर्देशांक polygon के अंदर आते हैं, वे योग्य होते हैं। यह "10 किमी के भीतर" से कहीं अधिक उपयोगी है, यह दर्शाता है कि commuters वास्तव में कैसे सोचते हैं।

Real Estate Property Map with Clustering tutorial दिखाता है कि property listings को map markers के रूप में कैसे render किया जाए। उस implementation के ऊपर isochrone-based filtering जोड़ना एक स्वाभाविक विस्तार है: isochrone की गणना करें, फिर यह filter करने के लिए point-in-polygon test का उपयोग करें कि कौन से markers दिखाने हैं।

Logistics के लिए, isochrones delivery zones परिभाषित करते हैं। Route Optimization API tutorial यह कवर करता है कि zone स्वयं परिभाषित होने के बाद zone के भीतर कई stops को कैसे sequence किया जाए। ये दोनों APIs एक साथ काम करने के लिए बनाए गए हैं: isochrones परिभाषित करते हैं कि आप कहां सेवा देते हैं, routing API अनुकूलित करता है कि आप इसे कैसे देते हैं।

Travel Time Analysis capabilities page में isochrone endpoint पर अतिरिक्त दस्तावेज़ीकरण है, जिसमें distance-based isochrones (तब उपयोगी जब travel time डेटा अनुपलब्ध हो), multi-modal विश्लेषण, और response format विवरण शामिल हैं।

Delivery operations पर विचार करने वाले व्यवसायों के लिए, Logistics & Delivery solutions page यह कवर करती है कि mapping APIs delivery workflow architecture में कैसे fit होते हैं। और property platforms के लिए, Real Estate & Property solutions page सामान्य integration patterns बताती है।

Performance संबंधी नोट्स

Isochrone गणनाएं computationally intensive हैं, API reachability निर्धारित करने के लिए पूरे road network graph को process करता है। Response times आमतौर पर 200-800ms होते हैं, यह समय सीमा (बड़ी समय सीमाएं = बड़ा graph traversal) और travel mode (driving, walking की तुलना में अधिक सड़कें traverse करता है) पर निर्भर करता है।

Production applications के लिए:

• Isochrone results को cache करें सामान्य queries के लिए (fixed origin + time limit)। एक fixed warehouse location से delivery zone बार-बार नहीं बदलता, इसे घंटों या दिनों के लिए cache करें।
• Simultaneous requests सीमित करें। यदि आपका UI तेजी से clicking की अनुमति देता है, तो कई simultaneous API requests trigger होने से बचने के लिए click handlers को 500ms से debounce करें।
• Interactive maps के लिए छोटी समय सीमाएं उपयोग करें। 5 मिनट का walking isochrone 200ms से कम में वापस आता है। 60 मिनट का driving isochrone 600-800ms ले सकता है। समय सीमा को use case से मेल कराएं।

सारांश

Isochrone maps दिखाते हैं कि किसी दिए गए बिंदु से दिए गए समय में वास्तव में क्या पहुंचा जा सकता है, सड़क नेटवर्क, यात्रा गति और परिवहन के साधन को ध्यान में रखते हुए। Radius circle यह नहीं कर सकता।

MapAtlas Routing API isochrones को GeoJSON polygons के रूप में लौटाता है जिन्हें आप vector map पर fill layers के रूप में render करते हैं। इस tutorial का implementation:

• समय सीमाओं की सूची के साथ /isochrone endpoint पर POST request करता है
• प्रति समय सीमा एक polygon के साथ GeoJSON feature collection प्राप्त करता है
• प्रत्येक polygon को distinct रंगों के साथ fill और line layer के रूप में render करता है
• Driving, walking और cycling modes को support करता है
• किसी भी मूल स्थान से पुनः गणना के लिए map click events संभालता है

पूर्ण कोड एक single HTML file में चलता है, कोई build step नहीं, MapAtlas SDK से परे कोई dependencies नहीं।

शुरू करने के लिए एक निःशुल्क MapAtlas API key के लिए sign up करें। Routing और Isochrone APIs सभी plans में शामिल हैं, building शुरू करने के लिए credit card की आवश्यकता नहीं है।