31:T51b,modesMap = { mutable loaderTravelModes = true; let container = DOM.element("div", { style: `width:${width}px;height:400px` }); // allow for correct sizing by yielding the container early yield container; // set the targomo client const client = tgmClient("britishisles"); // starting out with one source const source = sourcePoints[0]; // set the map const map = L.map(container, { scrollWheelZoom: false, layers: [new tgm.leaflet.TgmLeafletTileLayer(client, "Light")] }).setView(source, 12); // add our starting point L.marker(source).addTo(map); // define the polygon overlay const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({ strokeWidth: 20 }); polygonOverlayLayer.addTo(map); async function getPolygons(mode) { // get the polygons const polygons = await client.polygons.fetch( [source], travelOptions.set(mode, travelTimes) ); // calculate bounding box for polygons const bounds = polygons.getMaxBounds(); // zoom to the polygon bounds map.fitBounds(new L.latLngBounds(bounds.northEast, bounds.southWest), { padding: [50, 50] }); // update polygons polygonOverlayLayer.setData(polygons); } await getPolygons(travelMode); mutable loaderTravelModes = false; }32:T488,intersectionsMap = { mutable loaderIntersection = true; let container = DOM.element("div", { style: `width:${width}px;height:400px` }); // allow for correct sizing by yielding the container early yield container; // set the targomo client const client = tgmClient("britishisles"); // more than one source const sources = sourcePoints; // set the map const map = L.map(container, { scrollWheelZoom: false, layers: [new tgm.leaflet.TgmLeafletTileLayer(client, "Light")] }).setView(sources[0], 12); // add our starting points sources.forEach((source) => { L.marker([source.lat, source.lng]).addTo(map); }); // define the polygon overlay const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({ strokeWidth: 20 }); polygonOverlayLayer.addTo(map); async function getPolygons(mode) { // get the polygons const polygons = await client.polygons.fetch( sources, travelOptions.set("bike", travelTimes, intersectionMode) ); // update polygons polygonOverlayLayer.setData(polygons); } await getPolygons(travelMode); mutable loaderIntersection = false; }33:T41f,holeSizeMap = { mutable loaderHoleSize = true; let container = DOM.element("div", { style: `width:${width}px;height:400px` }); // allow for correct sizing by yielding the container early yield container; // set the targomo client const client = tgmClient("westcentraleurope"); // starting out with one source const source = { id: "id123", lng: 5.125778, lat: 52.097598 }; // set the map const map = L.map(container, { scrollWheelZoom: false, layers: [new tgm.leaflet.TgmLeafletTileLayer(client, "Light")] }).setView(source, 10.5); // add our starting point L.marker(source).addTo(map); // define the polygon overlay const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({ strokeWidth: 20 }).addTo(map); const options = travelOptions.set("car", travelTimes); options.minPolygonHoleSize = minHoleSize; // get the polygons const polygons = await client.polygons.fetch([source], options); polygonOverlayLayer.setData(polygons); mutable loaderHoleSize = false; return map; }34:Ta97,{ mutable loaderGeoJSON = true; let container = html`

`; // Give the container dimensions. yield container; const lnglat = [-73.61457, 45.524149]; // set the targomo client const client = tgmClient("northamerica"); const times = travelTimes; const timeColors = [ "#006837", "#39B54A", "#8CC63F", "#F7931E", "#F15A24", "#C1272D" ]; // Create the \`map\` object with the mapboxgl.Map constructor, referencing // the container div let map = new mapboxgl.Map({ container, center: lnglat, zoom: 12, pitch: 55, style: client.basemaps.getGLStyleURL("Bright"), scrollZoom: false, attributionControl: false }) .addControl(new mapboxgl.NavigationControl()) .addControl( new mapboxgl.AttributionControl({ compact: true, customAttribution: attribution }) ); // define some options for the polygon service const options = { travelType: "bike", travelEdgeWeights: travelTimes, maxEdgeWeight: 1800, edgeWeight: "time", srid: 4326, simplify: 200, serializer: "geojson", buffer: 0.002 }; const sources = [{ lat: lnglat[1], lng: lnglat[0], id: 1 }]; // height stops function function getHeightStops(travelTimes, heightFactor) { return [ [travelTimes[0], travelTimes.length * (10 * heightFactor)], [travelTimes[travelTimes.length - 1], travelTimes.length * heightFactor] ]; } // color stop function function getColorStops(times, colors) { var colorsConfig = times.map((time, idx) => { return [times[idx], colors[idx]]; }); return colorsConfig; } map.on("load", () => { var marker = new mapboxgl.Marker().setLngLat(lnglat).addTo(map); // call the Targomo service client.polygons.fetch(sources, options).then((geojsonPolygons) => { map.addLayer({ id: "polygons", type: "fill-extrusion", source: { type: "geojson", data: geojsonPolygons }, layout: {}, paint: { "fill-extrusion-base": 0, "fill-extrusion-height": { property: "time", stops: getHeightStops(travelTimes, 2) }, "fill-extrusion-color": { property: "time", stops: getColorStops(travelTimes, timeColors) }, "fill-extrusion-opacity": 0.5 } }); map.fitBounds(turf.bbox(geojsonPolygons), { padding: 0 }); mutable loaderGeoJSON = false; }); }); // Be careful to clean up the map's resources using \`map.remove()\` whenever // this cell is re-evaluated. invalidation.then(() => map.remove()); }35:T479,/* curl https://api.observablehq.com/document/@targomo/polygon-exclusion-areas | \ jq '. | {slug,thumbnail,title,publish_time,update_time,owner: .owner | {name,login,avatar_url}}' */ extras = [ { slug: "polygon-exclusion-areas", thumbnail: "f622da554cd6985b4bc2cd1c4f561881fa3bc86f93529ffe596377cadbd936f7", title: "Polygon exclusion Areas", publish_time: null, update_time: "2023-01-24T10:46:07.607Z", owner: { name: "Targomo", login: "targomo", avatar_url: "https://avatars.observableusercontent.com/avatar/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf" } }, { slug: "custom-colors-with-isochrone-polygons", thumbnail: "bf9bbfeed7c76485ec7aff985a3c22f82189a3bec13011d7f4fef827417fca38", title: "Custom Colors with Isochrone Polygons", publish_time: "2022-12-09T13:33:38.686Z", update_time: "2023-01-24T10:53:48.049Z", owner: { name: "Targomo", login: "targomo", avatar_url: "https://avatars.observableusercontent.com/avatar/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf" } } ]36:[] 2f:{"title":"Deep Dive on Isochrone Polygons","cells":[{"id":0,"value":"tgmIntro(\n \"Deep Dive on Isochrone Polygons\",\n \"Isochrone API\",\n \"https://www.targomo.com/developers/apis/isochrone/\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":39,"value":"md`## Basic Leaflet Polygons\n\nHere's a Leaflet map with our basic isochrone polygons.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":855,"value":"tgmLoader(loaderBasic, 5, `5 - 30 minutes of travel by bike`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"map = {\n mutable loaderBasic = true;\n let container = DOM.element(\"div\", {\n style: `width:${width}px;height:${width / 1.6}px`\n });\n // allow for correct sizing by yielding the container early\n yield container;\n\n // set the targomo client\n const client = tgmClient(\"britishisles\");\n\n // starting out with one source\n const source = sourcePoints[0];\n\n // set the map\n const map = L.map(container, {\n scrollWheelZoom: false,\n layers: [new tgm.leaflet.TgmLeafletTileLayer(client, \"Light\")]\n }).setView(source, 12);\n\n // add our starting point\n L.marker(source).addTo(map);\n\n // define the polygon overlay\n const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({\n strokeWidth: 20\n });\n polygonOverlayLayer.addTo(map);\n\n // get the polygons\n const polygons = await client.polygons.fetch(\n [source],\n travelOptions.set(\"bike\", travelTimes)\n );\n polygonOverlayLayer.setData(polygons);\n mutable loaderBasic = false;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":513,"value":"md`## Different Travel Modes\n\nTargomo can route for __walk__, __bike__, __car__, and __transit__ modes.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":522,"value":"viewof travelMode = Inputs.radio(\n [\n { label: \"Walk\", value: \"walk\" },\n { label: \"Bike\", value: \"bike\" },\n { label: \"Car\", value: \"car\" },\n { label: \"Transit\", value: \"transit\" }\n ],\n {\n label: html`Select mode of transport`,\n value: \"walk\",\n format: (d) => d.label,\n valueof: (d) => d.value\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":862,"value":"tgmLoader(loaderTravelModes, 5, `30 minutes of travel by ${travelMode}`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":517,"value":"$31","pinned":false,"hidden":false,"mode":"ojs"},{"id":550,"value":"md`## But I have more than one source point!!!\nShowing the relationship between the reachable areas for more than one location is not only _interesting_, it is **invaluable**. \n- **Union** mode shows the minimum travel time from any of the given source points _(default)_\n- **Average** mode shows the average travel time based on the travel times of all given source points\n- **Intersection** mode shows the maximum travel time from any of the given source points,\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":560,"value":"viewof intersectionMode = Inputs.radio(\n [\n { label: \"Union\", value: \"union\" },\n { label: \"Average\", value: \"average\" },\n { label: \"Intersection\", value: \"intersection\" }\n ],\n {\n label: html`Select intersection technique`,\n value: \"union\",\n format: (d) => d.label,\n valueof: (d) => d.value\n }\n)\n","pinned":false,"hidden":false,"mode":"ojs"},{"id":872,"value":"tgmLoader(\n loaderIntersection,\n 5,\n `30 minutes of travel by bike, ${intersectionMode} mode`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":553,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":430,"value":"md`## What is strokeWidth anyways?\n\\`strokeWidth\\` is how thick the edges of the polygons are. This is what takes polygons which often follow streets and presents them as smooth areas.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":434,"value":"viewof strokeWidth = Inputs.range([5, 60], {\n label: html`strokeWidth
5 to 60 pixels`,\n step: 5,\n value: 10\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":427,"value":"edgeWeightMap = {\n let container = DOM.element(\"div\", {\n style: `width:${width}px;height:400px`\n });\n // allow for correct sizing by yielding the container early\n yield container;\n\n // set the targomo client\n const client = tgmClient(\"britishisles\");\n\n // starting out with one source\n const source = sourcePoints[0];\n\n // set the map\n const map = L.map(container, {\n scrollWheelZoom: false,\n layers: [new tgm.leaflet.TgmLeafletTileLayer(client, \"Light\")]\n }).setView(source, 14);\n\n // add our starting point\n L.marker(source).addTo(map);\n\n // define the polygon overlay\n const polygonOverlayLayer = new tgm.leaflet.TgmLeafletPolygonOverlay({\n strokeWidth: strokeWidth\n }).addTo(map);\n\n // get the polygons\n const polygons = await client.polygons.fetch(\n [source],\n travelOptions.set(\"bike\", travelTimes)\n );\n polygonOverlayLayer.setData(polygons);\n return map;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":742,"value":"md`## Understanding Minimum Hole Size\nThe \\`minHoleSize\\` is the smallest area that the polygon API will _fill in_, showing the entire area as reachable.\n\n__Why do that?__ Imagine a park or natural area - if we are travelling by car, we could drive to the edges of the park, but not inside it. If we don't fill holes, this park will show as _un-reachable_, but the reality is that we were able to reach all sides of it, just not drive _into_ it. To reflect this reality, we fill in the enclosed polygon (in this case the _natural areas_), and show it as comletely reachable.\n\n__Multiple benefits.__ This serves several purposes - it makes the API _faster_, by simplifying the resulting isochrone polygons, as well as making the poygons themselves easier to interpret and understand.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":737,"value":"viewof minHoleSize = Inputs.radio(\n [\n { label: \"Default: 100 km²\", value: 100000000 },\n { label: \"Custom: 10 km²\", value: 10000000 }\n ],\n {\n label: html`Select minimum hole size`,\n value: 100000000,\n format: (d) => d.label,\n valueof: (d) => d.value\n }\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":878,"value":"tgmLoader(\n loaderHoleSize,\n 5,\n `Polygons generated with ${minHoleSize /\n 1000000}km² minimum hole size`\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":748,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":787,"value":"md`## Can I just get GeoJSON?\nSure thing. The default SVG returns are great for leaflet and Google Maps, but for other libraries, or server-side/GIS use, you'll probably just want the isochrones as GeoJSON. That's a configuration setting away.`","pinned":false,"hidden":false,"mode":"ojs"},{"id":890,"value":"tgmLoader(loaderGeoJSON, 5, `GeoJSON polygons for inter-operability`)","pinned":false,"hidden":false,"mode":"ojs"},{"id":792,"value":"$34","pinned":false,"hidden":false,"mode":"ojs"},{"id":1068,"value":"divingDeeper(\n extras,\n \"Here are some more specific explorations into applications of the Isochrone API\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":476,"value":"md`

\n## General utilities used for the examples\n\nMost of what you'll find here is similar to how you'd do it outside of [observable](https://observablehq.com), but there are several differences... Refer to our [developer resources](https://targomo.com/developers/documentation/javascript/) for a more direct path!`","pinned":false,"hidden":false,"mode":"ojs"},{"id":488,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs"},{"id":794,"value":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.13.0\");\n const href = await require.resolve(\"mapbox-gl@1.13.0/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":11,"value":"html``","pinned":false,"hidden":false,"mode":"ojs"},{"id":808,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":249,"value":"sourcePoints = { \n return [\n { id: 0, lat: 51.5133, lng: -0.1582 },\n { id: 1, lat: 51.5096, lng: -0.1973 }\n ]\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":390,"value":"travelTimes = [300, 600, 900, 1200, 1500, 1800]","pinned":false,"hidden":false,"mode":"ojs"},{"id":411,"value":"travelOptions = {\n return {\n set: (mode, edgeWeights, intersection_mode) => {\n const iMode = intersection_mode? intersection_mode : 'union'\n return {\n travelType: mode,\n travelEdgeWeights: edgeWeights,\n maxEdgeWeight: Math.max(...edgeWeights),\n edgeWeight: 'time',\n serializer: 'json',\n intersectionMode: iMode\n }\n }\n }\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":835,"value":"md`Loader refs:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":839,"value":"mutable loaderBasic = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":842,"value":"mutable loaderTravelModes = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":845,"value":"mutable loaderIntersection = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":848,"value":"mutable loaderHoleSize = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":851,"value":"mutable loaderGeoJSON = false","pinned":false,"hidden":false,"mode":"ojs"},{"id":1062,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":710,"value":"md`__Get re-usable targomo elements__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":401,"value":"import {\n tgm,\n tgmClient,\n tgmNotice,\n attribution,\n tgmLoader,\n tgmIntro,\n codeStyle,\n divingDeeper\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":1055,"value":"codeStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":705,"value":"md`Make sure you get your _own_ API key!`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}