2c:null 2d:["$","title",null,{"children":"GeoTIFF Isochrones with Valhalla | Chris | Observable"}] 32:T6b1,{ const plot_raster = Plot.plot({ projection: { type: "mercator", domain: json.features[0], inset: buffer }, width: dim, color: { // scheme: "RdYlGn", interpolate: (x) => x < 1 ? d3.interpolateRdYlGn(x) : "rgba(256, 256, 256, 0.1)", type: "diverging", domain: [25 * 60, 0], pivot: (25 * 60) / 2, legend: false, label: "Time (minutes)" }, marks: [ Plot.graticule(), () => svg`${tiles}`.cloneNode(true), Plot.raster(raster_array, { imageRendering: "pixelated", fillOpacity: (x, y) => (raster_array[y] > 1 ? 0.6 : 0), fill: Plot.identity, interpolate: "nearest", width: raster.width, height: raster.height, x1: bb[0], y1: bb[1], x2: bb[2], y2: bb[3] }) ] }); const figure_vector = Plot.plot({ projection: { type: "mercator", domain: json.features[0], inset: buffer }, width: dim, marks: [ Plot.graticule(), () => svg`${tiles}`.cloneNode(true), Plot.geo(json, { stroke: "red", fill: "red", fillOpacity: 0.2, strokeWidth: 2 }) ] }); const figure = document.createElement("div"); const raster_figure = plot_raster.children[1]; raster_figure.setAttribute("xmlns", "http://www.w3.org/2000/svg"); raster_figure.setAttribute("xmlns:xlink", "http://www.w3.org/1999/xlink"); figure.style = "display: flex;"; figure.appendChild(figure_vector); figure.appendChild(plot_raster); [plot_raster, figure_vector].forEach((n) => { n.style = "border: 1px solid; margin: 7px;"; }); return figure; }33:T457,## But... why? In order to understand the benefit of this, we need to dive a little into what isochrones are and how they are produced in the first place. An isochrone polygon represents an area reachable via a road network within a given amount of time. The polygons in the image on the left show areas reachable by bike from a given location within 5, 15 and 25 minutes, respectively. This makes isochrones a helpful tool in all sorts of fields (such as urban planning and business development), especially in exploratory analytics, where they help paint a concise overview of how well reachable a certain location is. The basic idea behind producing these areas is straight forward: one just needs to traverse a road network graph from the nearest location on the graph from the given center location and keep track of the time it takes to get from there to the end of each road segment (commonly referred to as an edge in routing), until the highest specified time threshold is exceeded in every direction, which is 25 minutes in this case. But this would not give us any areas, just the line strings: 34:T43f,expansion_plot = { const tiles_copy = []; for (let i = 0; i < tiles.length; ++i) { tiles_copy.push(tiles[i].cloneNode(true)); } const plot_vector = svg` `; const exp_group = plot_vector.getElementById("expansion"); plot_vector.style = "border: 1px solid; margin: 7px;"; if (!animate) { exp_group.innerHTML = ""; expansion_paths.forEach((feat) => exp_group.appendChild(feat)); yield plot_vector; } else { exp_group.innerHTML = ""; let step = 50; let i = step; while (true) { if (i >= expansion_paths.length - 1) { i = step; exp_group.innerHTML = ""; } const feats = expansion_paths.slice(i - step, i); feats.forEach((feat) => { exp_group.appendChild(feat); }); yield plot_vector; i += step; } } //return plot_vector; }35:T64c,...which is nice and all (and definitely looks awesome), but not so useful when you want to combine it with other data to answer questions like "how many people will be able to reach this planned bus stop within 10 minutes of cycling?", since you would probably like to intersect your result with some other spatially distributed variable. This is where we need to take the information we have about how long it takes to reach the end of each edge and _aggregate_ it onto a set of areas. Valhalla uses a regular tile grid for this, meaning a set of **equally sized , rectangular tiles** that cover the area of interest. Sounds familiar? That tile grid is exactly what you get when requesting GeoTIFF raster output from Valhalla's isochrone endpoint! The value of each pixel is calculated by simply identifying the lowest time value out of all the edges whose resampled geometry intersects that given tile. In a final step, isochrone contours are created from this tile grid using a technique called _contouring_. You might be familiar with [contour maps](https://en.wikipedia.org/wiki/Contour_line), they are most popularly used for showing elevation or other continuously distributed variables. They are useful whenever you want to display areas where a continuously distributed variable falls within a certain range. Valhalla returns a contour (either as a polygon or a linestring) for each requested interval. This is good for visualization, as it minimizes the number of unique values displayed on a map, but makes it less useful for analytics, where you ideally want the highest resolution possible. 36:T5ad,footnote1 = footnote( "p", 1, md` This is how an example payload looks like: \`\`\`json { "costing":"bicycle", "polygons":true, "contours":[ { "time":5 }, { "time":15 }, { "time":25 }, ], "locations":[ { "lon":-122.443743, "lat":37.746795 } ], "denoise":0.1, "reverse":true, "format":"geotiff", // <-- notice the format param "skip_opposites":true } \`\`\` You can simply save the response as a GeoTIFF file and just open it in a Desktop GIS of your choice. On Mac or Linux, you can use \`cURL\`: \`\`\`sh curl 'https://valhalla1.openstreetmap.de/isochrone' \ -X POST \ -H 'Content-Type: text/plain;charset=UTF-8' \ --data-raw '{"costing":"bicycle","polygons":true,"contours":[{"time":25},{"time":5},{"time":15}],"locations":[{"lon":-122.443743,"lat":37.746795}],"denoise":0.1,"reverse":true,"format":"geotiff","skip_opposites":true}' -o san_francisco.geotiff \`\`\` On Windows, it would look a little more like this (untested code): \`\`\`sh Invoke-WebRequest -UseBasicParsing -Uri "https://valhalla1.openstreetmap.de/isochrone" -Method POST -ContentType "text/plain;charset=UTF-8" -Body "{"costing":"bicycle","polygons":true,"contours":[{"time":25},{"time":5},{"time":15}],"locations":[{"lon":-122.443743,"lat":37.746795}],"denoise":0.1,"reverse":true,"format":"geotiff","skip_opposites":true}" \`\`\` ` )37:T56a,edges = { const path = d3.geoPath(projection); if (!animate) { yield expansion_json.features.map( (feat) => svg`` ); } else { let edges = []; const step = 60; let i = step; while (true) { if (i >= expansion_json.features.length - 1) { edges = []; i = step; } const feats = expansion_json.features.slice(i - step, i); feats.forEach((feat) => { edges.push(svg``); }); // for (let j = 0; j < i; j++ ) { // edges.push() // } yield edges; i += step; } } }38:[{"id":"460ca3701395b9c36c873bec55463bb36a5b2041518806279d1a1c100fd4be28e32c12eeec9b33d9184047f7cc998f029b653803eb151bb055864f14ddb18990","href":"https://static.observableusercontent.com/files/460ca3701395b9c36c873bec55463bb36a5b2041518806279d1a1c100fd4be28e32c12eeec9b33d9184047f7cc998f029b653803eb151bb055864f14ddb18990","name":"exp.json","type":"application/json","lastModified":1713280478658.309,"size":3916791}] 30:{"id":"8855f38ee61173e9","slug":"geotiff-isochrones-with-valhalla","title":"GeoTIFF Isochrones with Valhalla","thumbnail":"a13d1ee39f8a76a651998f7fa098545c6b6ba381a0426a78f682587d3bd556a3","access_level":"public","create_time":"$D2024-04-08T12:05:22.568Z","update_time":"$D2024-04-26T10:00:58.976Z","view_time":null,"first_public_time":"$D2024-04-08T12:05:22.568Z","has_unpublished_edits":null,"fork":{"id":"fc287bc819bd9aba","slug":"display-and-project-a-geotiff-with-plot","title":"Display and project a geotiff with plot","owner":{"id":"6457aadd156df119","login":"neocarto","name":"Nicolas Lambert"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b3cbcf8cea7592d7","login":"chrstnbwnkl","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/c78ca7d50d746a4e6b46bca4bfcfb94104fa40427f57416db9d2a19925d11e9e","tier":"starter_2024","bio":""},"version":965,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d80c2781ca2cc46","login":"chrstnbwnkl","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/a658e60d1a094188a4081d754368a023daa77ddf9ef81c9e933474fdff5424ad","tier":null,"bio":""}],"members":[{"type":"individual","id":"3d80c2781ca2cc46","login":"chrstnbwnkl","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/a658e60d1a094188a4081d754368a023daa77ddf9ef81c9e933474fdff5424ad","tier":null,"role":"editor"},{"type":"team","id":"b3cbcf8cea7592d7","login":"chrstnbwnkl","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/c78ca7d50d746a4e6b46bca4bfcfb94104fa40427f57416db9d2a19925d11e9e","tier":"starter_2024","role":"viewer"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":4,"collection":null,"type":"notebook","body":{"titling":"auto","title":"GeoTIFF Isochrones with Valhalla","cells":[{"id":0,"value":"# GeoTIFF Isochrones with Valhalla ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":181,"value":"Yes, you are reading correct! Since just a few weeks ago, [Valhalla](https://valhalla.github.io/valhalla/) is one the few routing engines that support rasterized output of isochrones, and it looks fabulous: \n\n","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":15,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":185,"value":"$33","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":846,"value":"viewof animate = Inputs.toggle({\n label: html`

Animate

`\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":799,"value":"$34","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":832,"value":"$35","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":856,"value":"## How do I use it?","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":858,"value":"Luckily, the openly accessible Valhalla instance funded by [the German OSGeo chapter](https://fossgis.de) supports this feature already, so there is nothing stopping you from trying it yourself! Currently, there is no support yet for GeoTIFF in our [Valhalla web app](https://valhalla.openstreetmap.de), but in the meantime, you can fork this notebook and play around with it in the browser. Alternatively, you can open up your terminal and fire requests yourself.^{[[1](#footnote1)]} If you want to set up your own instance of Valhalla, take a look at [this beginner-friendly Docker image](https://github.com/gis-ops/docker-valhalla)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":887,"value":"## What's Next?\n\nThe GeoTIFF output is a great feature for when you need finer resolution reachability information in your data analytics. This article only covered a small part of what Valhalla isochrones have to offer, and in the future, I might cover more adjacent topics that this text barely touches. There are also some ways to further improve the isochrone service: it would be great, for example, to adapt the grid tile size to the request, e.g. for those interested in pedestrian mobility on smaller scales. ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":921,"value":"> – Christian Beiwinkel, `<``christian@gis-ops.com``>`","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":908,"value":"# Footnotes","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":898,"value":"$36","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":759,"value":"# Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":730,"value":"center = {\n return { lon: -122.443743, lat: 37.746795 };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":5,"value":"tiff = fetchIso(\"geotiff\")\n .then((res) => res.blob())\n .then((blob) => GeoTIFF.fromBlob(blob))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":353,"value":"json = fetchIso(\"json\")\n .then((res) => res.json())\n .then((data) => rewind(data))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":794,"value":"expansion_json = FileAttachment(\"exp.json\").json()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":964,"value":"expansion_paths = expansion_json.features.map(\n (feat) => svg``\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":346,"value":"fetchIso = (format, expansion = false) =>\n fetch(\n `https://valhalla1.openstreetmap.de/${\n expansion ? \"expansion\" : \"isochrone\"\n }`,\n {\n method: \"POST\",\n body: JSON.stringify({\n costing: \"bicycle\",\n action: expansion ? \"isochrone\" : undefined,\n polygons: true,\n expansion_properties: expansion ? [\"duration\"] : undefined,\n contours: [{ time: 25 }, { time: 5 }, { time: 15 }],\n locations: [center],\n denoise: 0.1,\n reverse: true,\n format: format,\n skip_opposites: true\n })\n }\n )","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":40,"value":"bb = tiff.getImage().then((d) => d.getBoundingBox())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":12,"value":"raster = tiff.readRasters()","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":670,"value":"raster_array = raster[0].map((v) => (v > 25 * 60 ? NaN : v))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":434,"value":"tiles = tile(expansion_json)()\n .map(([x, y, z], i, { translate: [tx, ty], scale: k }) => [\n tileUrl(x, y, z),\n Math.round((x + tx) * k),\n Math.round((y + ty) * k),\n k\n ])\n .map((t) => {\n return svg``;\n })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":796,"value":"$37","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":460,"value":"isochrones = {\n const path = d3.geoPath(projection);\n return json.features.map(\n (feat) => svg``\n );\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":447,"value":"dim = 576","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":444,"value":"projection = d3.geoMercator().fitExtent(\n [\n [buffer, buffer],\n [dim - buffer, dim - buffer]\n ],\n expansion_json\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":963,"value":"path = d3.geoPath(projection)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":316,"value":"tile = {\n return (bounds) => {\n const path = d3.geoPath(projection);\n\n return d3\n .tile()\n .size([dim, dim])\n .scale(projection.scale() * 2 * Math.PI)\n .translate(projection([0, 0]))\n .tileSize(256);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":451,"value":"buffer = 40","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":545,"value":"max = raster[0][0]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":320,"value":"tileUrl = (x, y, z) => {\n return `https://tile.openstreetmap.org/${z}/${x}/${y}.png`;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":249,"value":"tiff.getImage().then((d) => d.getWidth())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":322,"value":"d3 = require(\"d3@5\", \"d3-tile@1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":377,"value":"import { rewind } from \"@fil/rewind\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"GeoTIFF = require(\"geotiff@2.0.7\")","pinned":true,"hidden":true,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":895,"value":"import { footnote } from \"@jashkenas/markdown-style-footnotes\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W38","stdlib":"1"}} 31:"$30:body"