{"id":2489,"date":"2024-02-16T14:50:55","date_gmt":"2024-02-16T14:50:55","guid":{"rendered":"https:\/\/www.maptoolkit.com\/api\/isochrone-api\/"},"modified":"2025-11-28T13:17:49","modified_gmt":"2025-11-28T13:17:49","slug":"isochrone-api","status":"publish","type":"page","link":"https:\/\/www.maptoolkit.com\/de\/api\/isochrone-api\/","title":{"rendered":"Isochrone API"},"content":{"rendered":"<div class=\"gb-container gb-container-641f365b gbp-section\">\n\n<h1 class=\"gb-headline gb-headline-55fd6ef9 gb-headline-text\">Isochrone API<\/h1>\r\n\n\n\n<p class=\"gb-headline gb-headline-242110d4 gb-headline-text\">Erzeugen Sie Erreichbarkeitskarten nach Reisezeit<\/p>\n\n\n\n<p class=\"gb-headline gb-headline-5353d31f gb-headline-text\">Die <strong>Maptoolkit Isochrone API<\/strong> ist eine innovative und eindrucksvolle M\u00f6glichkeit zu visualisieren, was von einem bestimmten Standort aus erreichbar ist. Eine Isochrone ist dabei ein Polygon, das das Gebiet darstellt, das von einem definierten Punkt aus innerhalb einer bestimmten Zeitspanne erreicht werden kann. Die Maptoolkit Isochrone API unterst\u00fctzt verschiedene Verkehrsmittel wie Gehen, Radfahren oder Autofahren.<\/p>\n\n\n\n<div class=\"gb-element-8473093b mtk-markdown-hide-routing\">\n<h2 class=\"gb-text gb-text-bd4921e2\">Beispiel &#8230;<\/h2>\r\n\n\n<div class=\"mtk-markdown markdown-body\"><div class=\"markdown-heading\"><h1 class=\"heading-element\">Isochrone with MapLibreGL map<\/h1><a id=\"user-content-isochrone-with-maplibregl-map\" class=\"anchor\" aria-label=\"Permalink: Isochrone with MapLibreGL map\" href=\"#isochrone-with-maplibregl-map\"><span aria-hidden=\"true\" class=\"octicon octicon-link\"><\/span><\/a><\/div>\n<p><iframe width=\"100%\" height=\"500\" mtk-show-src id=\"mtk_iframe_f5baddfbaa0f85b3346d907e47c8f090\" style=\"border:none\"><\/iframe><\/p>\n<div class=\"highlight highlight-text-html-basic\"><pre><span class=\"pl-kos\">&lt;<\/span><span class=\"pl-ent\">html<\/span><span class=\"pl-kos\">&gt;<\/span>\n<span class=\"pl-kos\">&lt;<\/span><span class=\"pl-ent\">head<\/span><span class=\"pl-kos\">&gt;<\/span>\n  <span class=\"pl-kos\">&lt;<\/span><span class=\"pl-ent\">meta<\/span> <span class=\"pl-c1\">charset<\/span>=\"<span class=\"pl-s\">UTF-8<\/span>\" <span class=\"pl-kos\">\/&gt;<\/span>\n  <span class=\"pl-kos\">&lt;<\/span><span class=\"pl-ent\">link<\/span> <span class=\"pl-c1\">rel<\/span>=\"<span class=\"pl-s\">stylesheet<\/span>\" <span class=\"pl-c1\">href<\/span>=\"<span class=\"pl-s\">https:\/\/static.maptoolkit.net\/css\/maplibre-gl.css<\/span>\" <span class=\"pl-kos\">\/&gt;<\/span>\n  <span class=\"pl-kos\">&lt;<\/span><span class=\"pl-ent\">style<\/span><span class=\"pl-kos\">&gt;<\/span>\n    <span class=\"pl-ent\">body<\/span> { <span class=\"pl-c1\">width<\/span><span class=\"pl-kos\">:<\/span> <span class=\"pl-c1\">100<span class=\"pl-smi\">%<\/span><\/span>; <span class=\"pl-c1\">height<\/span><span class=\"pl-kos\">:<\/span> <span class=\"pl-c1\">100<span class=\"pl-smi\">%<\/span><\/span>; <span class=\"pl-c1\">padding<\/span><span class=\"pl-kos\">:<\/span> <span class=\"pl-c1\">0<\/span>; <span class=\"pl-c1\">margin<\/span><span class=\"pl-kos\">:<\/span> <span class=\"pl-c1\">0<\/span>; <span class=\"pl-c1\">font-family<\/span><span class=\"pl-kos\">:<\/span> Arial<span class=\"pl-kos\">,<\/span> sans-serif; }\n    <span class=\"pl-kos\">#<\/span><span class=\"pl-c1\">map<\/span> { <span class=\"pl-c1\">width<\/span><span class=\"pl-kos\">:<\/span> <span class=\"pl-c1\">100<span class=\"pl-smi\">%<\/span><\/span>; <span class=\"pl-c1\">height<\/span><span class=\"pl-kos\">:<\/span> <span class=\"pl-c1\">100<span class=\"pl-smi\">%<\/span><\/span>; }\n  <span class=\"pl-kos\">&lt;\/<\/span><span class=\"pl-ent\">style<\/span><span class=\"pl-kos\">&gt;<\/span>\n<span class=\"pl-kos\">&lt;\/<\/span><span class=\"pl-ent\">head<\/span><span class=\"pl-kos\">&gt;<\/span>\n<span class=\"pl-kos\">&lt;<\/span><span class=\"pl-ent\">body<\/span><span class=\"pl-kos\">&gt;<\/span>\n  <span class=\"pl-kos\">&lt;<\/span><span class=\"pl-ent\">div<\/span> <span class=\"pl-c1\">id<\/span>=\"<span class=\"pl-s\">map<\/span>\"<span class=\"pl-kos\">&gt;<\/span><span class=\"pl-kos\">&lt;\/<\/span><span class=\"pl-ent\">div<\/span><span class=\"pl-kos\">&gt;<\/span>\n  <span class=\"pl-kos\">&lt;<\/span><span class=\"pl-ent\">script<\/span> <span class=\"pl-c1\">src<\/span>=\"<span class=\"pl-s\">https:\/\/unpkg.com\/maplibre-gl@2.4.0\/dist\/maplibre-gl.js<\/span>\"<span class=\"pl-kos\">&gt;<\/span><span class=\"pl-kos\">&lt;\/<\/span><span class=\"pl-ent\">script<\/span><span class=\"pl-kos\">&gt;<\/span>\n  <span class=\"pl-kos\">&lt;<\/span><span class=\"pl-ent\">script<\/span><span class=\"pl-kos\">&gt;<\/span>\n    <span class=\"pl-c\">\/\/ Initialize MapLibreGL map<\/span>\n    <span class=\"pl-k\">let<\/span> <span class=\"pl-s1\">map<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-s1\">maplibregl<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-c1\">Map<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">{<\/span>\n      <span class=\"pl-c1\">container<\/span>: <span class=\"pl-s\">\"map\"<\/span><span class=\"pl-kos\">,<\/span>\n      <span class=\"pl-c1\">style<\/span>: <span class=\"pl-s\">\"https:\/\/static.maptoolkit.net\/styles\/toursprung\/terrain.json?api_key=your_api_key\"<\/span><span class=\"pl-kos\">,<\/span>\n      <span class=\"pl-c1\">center<\/span>: <span class=\"pl-kos\">[<\/span><span class=\"pl-c1\">16.372182<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-c1\">48.208266<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\n      <span class=\"pl-c1\">zoom<\/span>: <span class=\"pl-c1\">14<\/span><span class=\"pl-kos\">,<\/span>\n    <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n    <span class=\"pl-s1\">map<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">on<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">\"load\"<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">)<\/span> <span class=\"pl-c1\">=&gt;<\/span> <span class=\"pl-kos\">{<\/span>\n      <span class=\"pl-c\">\/\/ Get Isochrone from Routing API<\/span>\n      <span class=\"pl-k\">let<\/span> <span class=\"pl-s1\">point<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-kos\">[<\/span><span class=\"pl-c1\">16.372493<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-c1\">48.20883<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">;<\/span>\n      <span class=\"pl-k\">let<\/span> <span class=\"pl-s1\">url<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-c1\">URL<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">\"https:\/\/routing.maptoolkit.net\/isochrone\"<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n      <span class=\"pl-s1\">url<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-c1\">searchParams<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">append<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">\"time\"<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-c1\">10<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span> <span class=\"pl-c\">\/\/ minutes<\/span>\n      <span class=\"pl-s1\">url<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-c1\">searchParams<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">append<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">\"point\"<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">`<span class=\"pl-s1\"><span class=\"pl-kos\">${<\/span><span class=\"pl-s1\">point<\/span><span class=\"pl-kos\">[<\/span><span class=\"pl-c1\">1<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">}<\/span><\/span>,<span class=\"pl-s1\"><span class=\"pl-kos\">${<\/span><span class=\"pl-s1\">point<\/span><span class=\"pl-kos\">[<\/span><span class=\"pl-c1\">0<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">}<\/span><\/span>`<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n      <span class=\"pl-s1\">url<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-c1\">searchParams<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">append<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">\"routeType\"<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">\"foot\"<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n      <span class=\"pl-s1\">url<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-c1\">searchParams<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">append<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">\"api_key\"<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-s\">\"your_api_key\"<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n      <span class=\"pl-en\">fetch<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s1\">url<\/span><span class=\"pl-kos\">)<\/span>\n        <span class=\"pl-kos\">.<\/span><span class=\"pl-en\">then<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s1\">r<\/span><span class=\"pl-kos\">)<\/span> <span class=\"pl-c1\">=&gt;<\/span> <span class=\"pl-s1\">r<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">json<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">)<\/span>\n        <span class=\"pl-kos\">.<\/span><span class=\"pl-en\">then<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s1\">polygon<\/span><span class=\"pl-kos\">)<\/span> <span class=\"pl-c1\">=&gt;<\/span> <span class=\"pl-kos\">{<\/span>\n          <span class=\"pl-c\">\/\/ Add data to map sources<\/span>\n          <span class=\"pl-s1\">map<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">addSource<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">\"isochrone\"<\/span><span class=\"pl-kos\">,<\/span> <span class=\"pl-kos\">{<\/span>\n              <span class=\"pl-c1\">type<\/span>: <span class=\"pl-s\">\"geojson\"<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-c1\">data<\/span>: <span class=\"pl-kos\">{<\/span>\n                <span class=\"pl-c1\">type<\/span>: <span class=\"pl-s\">\"Feature\"<\/span><span class=\"pl-kos\">,<\/span>\n                <span class=\"pl-c1\">geometry<\/span>: <span class=\"pl-kos\">{<\/span>\n                  <span class=\"pl-c1\">type<\/span>: <span class=\"pl-s\">\"Polygon\"<\/span><span class=\"pl-kos\">,<\/span>\n                  <span class=\"pl-c1\">coordinates<\/span>: <span class=\"pl-kos\">[<\/span><span class=\"pl-s1\">polygon<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">map<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s1\">latLng<\/span><span class=\"pl-kos\">)<\/span> <span class=\"pl-c1\">=&gt;<\/span> <span class=\"pl-s1\">latLng<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">reverse<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">]<\/span><span class=\"pl-kos\">,<\/span>\n                <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">,<\/span>\n            <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n          <span class=\"pl-c\">\/\/ Add isochrone polygon to map (fill and outline)<\/span>\n          <span class=\"pl-s1\">map<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">addLayer<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">{<\/span>\n              <span class=\"pl-c1\">id<\/span>: <span class=\"pl-s\">\"isochrone-fill\"<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-c1\">type<\/span>: <span class=\"pl-s\">\"fill\"<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-c1\">source<\/span>: <span class=\"pl-s\">\"isochrone\"<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-c1\">paint<\/span>: <span class=\"pl-kos\">{<\/span>\n                <span class=\"pl-s\">\"fill-color\"<\/span>: <span class=\"pl-s\">\"#2a3561\"<\/span><span class=\"pl-kos\">,<\/span>\n                <span class=\"pl-s\">\"fill-opacity\"<\/span>: <span class=\"pl-c1\">0.2<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">,<\/span>\n            <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n          <span class=\"pl-s1\">map<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">addLayer<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">{<\/span>\n              <span class=\"pl-c1\">id<\/span>: <span class=\"pl-s\">\"isochrone-line\"<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-c1\">type<\/span>: <span class=\"pl-s\">\"line\"<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-c1\">source<\/span>: <span class=\"pl-s\">\"isochrone\"<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-c1\">layout<\/span>: <span class=\"pl-kos\">{<\/span>\n                <span class=\"pl-s\">\"line-join\"<\/span>: <span class=\"pl-s\">\"round\"<\/span><span class=\"pl-kos\">,<\/span>\n                <span class=\"pl-s\">\"line-cap\"<\/span>: <span class=\"pl-s\">\"round\"<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-c1\">paint<\/span>: <span class=\"pl-kos\">{<\/span>\n                <span class=\"pl-s\">\"line-color\"<\/span>: <span class=\"pl-s\">\"#2a3561\"<\/span><span class=\"pl-kos\">,<\/span>\n                <span class=\"pl-s\">\"line-width\"<\/span>: <span class=\"pl-c1\">2<\/span><span class=\"pl-kos\">,<\/span>\n              <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">,<\/span>\n            <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n          <span class=\"pl-c\">\/\/ Add isochrone marker to map<\/span>\n          <span class=\"pl-k\">let<\/span> <span class=\"pl-s1\">$img<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-smi\">document<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">createElement<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">\"img\"<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n          <span class=\"pl-s1\">$img<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-c1\">src<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-s\">\"https:\/\/static.maptoolkit.net\/sprites\/toursprung\/marker.svg\"<\/span><span class=\"pl-kos\">;<\/span>\n          <span class=\"pl-s1\">$img<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-c1\">width<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-c1\">29<\/span><span class=\"pl-kos\">;<\/span>\n          <span class=\"pl-s1\">$img<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-c1\">height<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-c1\">30<\/span><span class=\"pl-kos\">;<\/span>\n          <span class=\"pl-k\">let<\/span> <span class=\"pl-s1\">marker<\/span> <span class=\"pl-c1\">=<\/span> <span class=\"pl-k\">new<\/span> <span class=\"pl-s1\">maplibregl<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-c1\">Marker<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">{<\/span>\n            <span class=\"pl-c1\">element<\/span>: <span class=\"pl-s1\">$img<\/span><span class=\"pl-kos\">,<\/span>\n            <span class=\"pl-c1\">anchor<\/span>: <span class=\"pl-s\">\"bottom\"<\/span><span class=\"pl-kos\">,<\/span>\n          <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">)<\/span>\n            <span class=\"pl-kos\">.<\/span><span class=\"pl-en\">setLngLat<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s1\">point<\/span><span class=\"pl-kos\">)<\/span>\n            <span class=\"pl-kos\">.<\/span><span class=\"pl-en\">addTo<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s1\">map<\/span><span class=\"pl-kos\">)<\/span>\n            <span class=\"pl-kos\">.<\/span><span class=\"pl-en\">setPopup<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-k\">new<\/span> <span class=\"pl-s1\">maplibregl<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-c1\">Popup<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">{<\/span> <span class=\"pl-c1\">offset<\/span>: <span class=\"pl-c1\">30<\/span> <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">.<\/span><span class=\"pl-en\">setHTML<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-s\">\"&lt;p&gt;Within a 10 minute walking distance&lt;\/p&gt;\"<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">)<\/span>\n            <span class=\"pl-kos\">.<\/span><span class=\"pl-en\">togglePopup<\/span><span class=\"pl-kos\">(<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n        <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n    <span class=\"pl-kos\">}<\/span><span class=\"pl-kos\">)<\/span><span class=\"pl-kos\">;<\/span>\n  <span class=\"pl-kos\">&lt;\/<\/span><span class=\"pl-ent\">script<\/span><span class=\"pl-kos\">&gt;<\/span>\n<span class=\"pl-kos\">&lt;\/<\/span><span class=\"pl-ent\">body<\/span><span class=\"pl-kos\">&gt;<\/span>\n<span class=\"pl-kos\">&lt;\/<\/span><span class=\"pl-ent\">html<\/span><span class=\"pl-kos\">&gt;<\/span><\/pre><\/div>\n<\/div>      <script>\n        (() => {\n          let mtk_iframes = {\"mtk_iframe_f5baddfbaa0f85b3346d907e47c8f090\":[\"<iframe width=\\\"100%\\\" height=\\\"500\\\" mtk-show-src id=\\\"mtk_iframe_f5baddfbaa0f85b3346d907e47c8f090\\\" style=\\\"border:none\\\"><\\\/iframe>\",\"\\n<html>\\n<head>\\n  <meta charset=\\\"UTF-8\\\" \\\/>\\n  <link rel=\\\"stylesheet\\\" href=\\\"https:\\\/\\\/static.maptoolkit.net\\\/css\\\/maplibre-gl.css\\\" \\\/>\\n  <style>\\n    body { width: 100%; height: 100%; padding: 0; margin: 0; font-family: Arial, sans-serif; }\\n    #map { width: 100%; height: 100%; }\\n  <\\\/style>\\n<\\\/head>\\n<body>\\n  <div id=\\\"map\\\"><\\\/div>\\n  <script src=\\\"https:\\\/\\\/unpkg.com\\\/maplibre-gl@2.4.0\\\/dist\\\/maplibre-gl.js\\\"><\\\/script>\\n  <script>\\n    \\\/\\\/ Initialize MapLibreGL map\\n    let map = new maplibregl.Map({\\n      container: \\\"map\\\",\\n      style: \\\"https:\\\/\\\/static.maptoolkit.net\\\/styles\\\/toursprung\\\/terrain.json?api_key=toursprung\\\",\\n      center: [16.372182, 48.208266],\\n      zoom: 14,\\n    });\\n    map.on(\\\"load\\\", () => {\\n      \\\/\\\/ Get Isochrone from Routing API\\n      let point = [16.372493, 48.20883];\\n      let url = new URL(\\\"https:\\\/\\\/routing.maptoolkit.net\\\/isochrone\\\");\\n      url.searchParams.append(\\\"time\\\", 10); \\\/\\\/ minutes\\n      url.searchParams.append(\\\"point\\\", `${point[1]},${point[0]}`);\\n      url.searchParams.append(\\\"routeType\\\", \\\"foot\\\");\\n      url.searchParams.append(\\\"api_key\\\", \\\"toursprung\\\");\\n      fetch(url)\\n        .then((r) => r.json())\\n        .then((polygon) => {\\n          \\\/\\\/ Add data to map sources\\n          map.addSource(\\\"isochrone\\\", {\\n              type: \\\"geojson\\\",\\n              data: {\\n                type: \\\"Feature\\\",\\n                geometry: {\\n                  type: \\\"Polygon\\\",\\n                  coordinates: [polygon.map((latLng) => latLng.reverse())],\\n                },\\n              },\\n            });\\n          \\\/\\\/ Add isochrone polygon to map (fill and outline)\\n          map.addLayer({\\n              id: \\\"isochrone-fill\\\",\\n              type: \\\"fill\\\",\\n              source: \\\"isochrone\\\",\\n              paint: {\\n                \\\"fill-color\\\": \\\"#2a3561\\\",\\n                \\\"fill-opacity\\\": 0.2,\\n              },\\n            });\\n          map.addLayer({\\n              id: \\\"isochrone-line\\\",\\n              type: \\\"line\\\",\\n              source: \\\"isochrone\\\",\\n              layout: {\\n                \\\"line-join\\\": \\\"round\\\",\\n                \\\"line-cap\\\": \\\"round\\\",\\n              },\\n              paint: {\\n                \\\"line-color\\\": \\\"#2a3561\\\",\\n                \\\"line-width\\\": 2,\\n              },\\n            });\\n          \\\/\\\/ Add isochrone marker to map\\n          let $img = document.createElement(\\\"img\\\");\\n          $img.src = \\\"https:\\\/\\\/static.maptoolkit.net\\\/sprites\\\/toursprung\\\/marker.svg\\\";\\n          $img.width = 29;\\n          $img.height = 30;\\n          let marker = new maplibregl.Marker({\\n            element: $img,\\n            anchor: \\\"bottom\\\",\\n          })\\n            .setLngLat(point)\\n            .addTo(map)\\n            .setPopup(new maplibregl.Popup({ offset: 30 }).setHTML(\\\"<p>Within a 10 minute walking distance<\\\/p>\\\"))\\n            .togglePopup();\\n        });\\n    });\\n  <\\\/script>\\n<\\\/body>\\n<\\\/html>\\n\"]};\n          for (let id in mtk_iframes) {\n            let iframe = document.getElementById(id);\n            iframe.contentWindow.document.open();\n            iframe.contentWindow.document.write(mtk_iframes[id][1]);\n            iframe.contentWindow.document.close();\n          }\n        })();\n      <\/script>\n<\/div>\n\n\n<div class=\"gb-container gb-container-2e66af5b gbp-section\">\n\n<h2 class=\"gb-headline gb-headline-8c726164 gb-headline-text\">Unser Preismodell<\/h2>\r\n\n\n<div class=\"gb-container gb-container-dd948cd5\">\n<div class=\"gb-container gb-container-e628e053\">\n<div class=\"gb-container gb-container-a22c4532\">\n\n<figure class=\"gb-block-image gb-block-image-303593ca\"><img loading=\"lazy\" decoding=\"async\" width=\"1536\" height=\"1024\" class=\"gb-image gb-image-303593ca\" src=\"https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2025\/04\/Pricing-Gradient.png\" alt=\"\" title=\"Pricing Gradient\" srcset=\"https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2025\/04\/Pricing-Gradient.png 1536w, https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2025\/04\/Pricing-Gradient-300x200.png 300w, https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2025\/04\/Pricing-Gradient-1024x683.png 1024w, https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2025\/04\/Pricing-Gradient-768x512.png 768w\" sizes=\"auto, (max-width: 1536px) 100vw, 1536px\" \/><\/figure>\r\n\n<\/div>\n\n<div class=\"gb-container gb-container-18861ea6\">\n\n<p class=\"gb-headline gb-headline-efe27d06 gb-headline-text\"><strong>Flexible Preisgestaltung, die sich Ihren Anforderungen anpasst<br><\/strong>Starten Sie mit unserer kostenlosen Stufe, zahlen Sie bei wachsendem Bedarf pro Anfrage \u00fcber RapidAPI oder w\u00e4hlen Sie eine Enterprise-Lizenz f\u00fcr vollen Zugriff.<\/p>\r\n\n<\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-f743df99\">\n\n<a class=\"gb-button gb-button-d88b3291 gb-button-text gbp-button--primary\" href=\"https:\/\/www.maptoolkit.com\/de\/preise\/\">Siehe unsere <br>Preistabelle<\/a>\r\n\n<\/div>\n<\/div>\n<\/div>\n\n\n<h3 class=\"gb-headline gb-headline-e8ecfc02 gb-headline-text\">FAQ<\/h3>\r\n\n\n<div class=\"gb-container gb-container-07fd6cd5\">\n<div class=\"gb-container gb-container-4f7d4fb7 gb-accordion\">\n<div class=\"gb-container gb-container-248fc525 accordion_item_FAQ gb-accordion__item\" data-transition=\"slide\">\n\n<button id=\"gb-accordion-toggle-772d1d46\" class=\"gb-button gb-button-772d1d46 gb-accordion__toggle accordion_title_FAQ\"><span class=\"gb-button-text\"><strong>Welche Reisegeschwindigkeiten oder Routing-Profile werden f\u00fcr die einzelnen Modi (Gehen, Radfahren, Autofahren) verwendet?<\/strong><\/span><\/button>\n\n\n<div id=\"gb-accordion-content-d1497277\" class=\"gb-accordion__content\"><div class=\"gb-container gb-container-d1497277\">\n\n<p>Beim Autofahren wird die Geschwindigkeit auf Basis der Geschwindigkeitsbegrenzungen entlang der befahrenen Stra\u00dfen berechnet. F\u00fcr Fu\u00dfwege wird eine Basisgeschwindigkeit von 5 km\/h verwendet, die abh\u00e4ngig von der Steigung reduziert wird. F\u00fcr das Radfahren wird eine Basisgeschwindigkeit von 15 km\/h zugrunde gelegt, die je nach Steigung und Oberfl\u00e4chenbeschaffenheit angepasst wird.<\/p>\n\n<\/div><\/div>\n<\/div>\n\n<div class=\"gb-container gb-container-0dfbbc6b accordion_item_FAQ gb-accordion__item\" data-transition=\"slide\">\n\n<button id=\"gb-accordion-toggle-35da4990\" class=\"gb-button gb-button-35da4990 gb-accordion__toggle accordion_title_FAQ\"><span class=\"gb-button-text\">Was sind typische Anwendungsf\u00e4lle f\u00fcr die Isochrone API?<\/span><\/button>\n\n\n<div id=\"gb-accordion-content-9f70d532\" class=\"gb-accordion__content\"><div class=\"gb-container gb-container-9f70d532\">\n\n<p>Die Isochrone API kann in Kombination mit Standortkarten genutzt werden, um zum Beispiel zu zeigen, welche Restaurants oder anderen Points of Interest von einem Hotel aus erreichbar sind. Ebenso l\u00e4sst sich darstellen, welche Infrastruktur und welche Einrichtungen von einer Immobilie aus erreichbar sind, etwa in Karten f\u00fcr den Immobilienbereich.<\/p>\n\n<\/div><\/div>\n<\/div>\n<\/div>\n<\/div>\n<\/div><div class=\"gb-container gb-container-bc3f6145\">\n<div class=\"gb-container gb-container-e0ab9dd7\">\n\n<h2 class=\"gb-headline gb-headline-c593864c gb-headline-text\"><strong>Wir beraten Sie pers\u00f6nlich<\/strong><\/h2>\r\n\n\n\n<hr class=\"wp-block-separator has-text-color has-alpha-channel-opacity has-background is-style-default\" style=\"background-color:#c3c3c3;color:#c3c3c3\"\/>\n\n\n<div class=\"gb-container gb-container-30f9a422\">\n<div class=\"gb-container gb-container-d1b3811f\">\n\n<figure class=\"gb-block-image gb-block-image-fcc53e52\"><img loading=\"lazy\" decoding=\"async\" width=\"300\" height=\"300\" class=\"gb-image gb-image-fcc53e52\" src=\"https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2020\/02\/PeterH_LUX_0871@lisalux1_square-300x300.jpg\" alt=\"\" title=\"PeterH_LUX_0871@lisalux1_square\" srcset=\"https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2020\/02\/PeterH_LUX_0871@lisalux1_square-300x300.jpg 300w, https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2020\/02\/PeterH_LUX_0871@lisalux1_square-150x150.jpg 150w, https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2020\/02\/PeterH_LUX_0871@lisalux1_square-146x146.jpg 146w, https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2020\/02\/PeterH_LUX_0871@lisalux1_square-50x50.jpg 50w, https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2020\/02\/PeterH_LUX_0871@lisalux1_square-75x75.jpg 75w, https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2020\/02\/PeterH_LUX_0871@lisalux1_square-85x85.jpg 85w, https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2020\/02\/PeterH_LUX_0871@lisalux1_square-80x80.jpg 80w, https:\/\/www.maptoolkit.com\/wp-content\/uploads\/2020\/02\/PeterH_LUX_0871@lisalux1_square.jpg 387w\" sizes=\"auto, (max-width: 300px) 100vw, 300px\" \/><\/figure>\r\n\n<\/div>\n\n<div class=\"gb-container gb-container-97a801dd\">\n\n<p class=\"has-text-color has-link-color wp-elements-9baf76a7ae05be2909cab9f7aec274d6\" style=\"color:#595959\">Mein Name ist Peter H\u00f6flehner und ich werde Ihr<br\/>Projekt- und Key Account-Manager sein.<\/p>\n\n\n\n<a class=\"gb-button gb-button-d3a3b162 gb-button-text gbp-button--primary\" href=\"tel:+436641308111\">Handy +43 664 1308111<\/a>\r\n\n\n\n<a class=\"gb-button gb-button-ca57bc22 gb-button-text gbp-button--primary\" href=\"mailto:peter@maptoolkit.com\">peter@maptoolkit.com<\/a>\r\n\n<\/div>\n<\/div>\n<\/div>\n<\/div>","protected":false},"excerpt":{"rendered":"<p>Isochrone API Erzeugen Sie Erreichbarkeitskarten nach Reisezeit Die Maptoolkit Isochrone API ist eine innovative und eindrucksvolle M\u00f6glichkeit zu visualisieren, was &#8230; <\/p>\n<p class=\"read-more-container\"><a title=\"Isochrone API\" class=\"read-more button\" href=\"https:\/\/www.maptoolkit.com\/de\/api\/isochrone-api\/#more-2489\" aria-label=\"Mehr Informationen \u00fcber Isochrone API\">Weiterlesen &#8230;<\/a><\/p>\n","protected":false},"author":4,"featured_media":0,"parent":1925,"menu_order":11,"comment_status":"closed","ping_status":"closed","template":"","meta":{"footnotes":""},"class_list":["post-2489","page","type-page","status-publish"],"_links":{"self":[{"href":"https:\/\/www.maptoolkit.com\/de\/wp-json\/wp\/v2\/pages\/2489","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.maptoolkit.com\/de\/wp-json\/wp\/v2\/pages"}],"about":[{"href":"https:\/\/www.maptoolkit.com\/de\/wp-json\/wp\/v2\/types\/page"}],"author":[{"embeddable":true,"href":"https:\/\/www.maptoolkit.com\/de\/wp-json\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.maptoolkit.com\/de\/wp-json\/wp\/v2\/comments?post=2489"}],"version-history":[{"count":2,"href":"https:\/\/www.maptoolkit.com\/de\/wp-json\/wp\/v2\/pages\/2489\/revisions"}],"predecessor-version":[{"id":6023,"href":"https:\/\/www.maptoolkit.com\/de\/wp-json\/wp\/v2\/pages\/2489\/revisions\/6023"}],"up":[{"embeddable":true,"href":"https:\/\/www.maptoolkit.com\/de\/wp-json\/wp\/v2\/pages\/1925"}],"wp:attachment":[{"href":"https:\/\/www.maptoolkit.com\/de\/wp-json\/wp\/v2\/media?parent=2489"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}