2e:null 2f:["$","title",null,{"children":"H3 with Multigraph, part 2: regions | Targomo | Observable"}] 34:T8c5,viewof map = { let container = html`

`; // Give the container dimensions. yield container; // set the targomo client const client = tgmCoreClient("westcentraleurope"); // Create the "map" object with the mapboxgl.Map constructor, referencing // the container div const mapRef = (container.value = new maplibre.Map({ container, center: source, zoom: 11.5, style: client.basemaps.getGLStyleURL("Light"), attributionControl: false }) .addControl(new maplibre.NavigationControl()) .addControl( new maplibre.AttributionControl({ compact: true, customAttribution: attribution }) )); mapRef.on("mouseenter", "hexes", function () { mapRef.getCanvas().style.cursor = "pointer"; }); // Change it back to a pointer when it leaves. mapRef.on("mouseleave", "hexes", function () { mapRef.getCanvas().style.cursor = ""; }); mapRef.on("click", "hexes", function (e) { var { lng, lat } = e.lngLat; const time = e.features[0].properties.value; const html = `${e.features[0].properties.pointid}
${time} seconds`; new maplibre.Popup().setLngLat({ lng, lat }).setHTML(html).addTo(mapRef); }); await new Promise((resolve, reject) => { mapRef.on("load", async () => { mapRef.addSource("hexes", { type: "geojson", data: turf.featureCollection([]) }); mapRef.addLayer( { id: "hexes", type: "fill", source: "hexes", layout: {}, paint: { "fill-color": ["get", "color"], "fill-opacity": 0.65, "fill-outline-color": "rgba(0, 0, 0, 0)" } }, "place_other" ); mapRef.addSource("polygon", { type: "geojson", data: turf.featureCollection([]) }); mapRef.addLayer( { id: "polygon", type: "line", source: "polygon", layout: {}, paint: { "line-color": "#FF0", "line-width": 2.5 } }, "place_other" ); resolve(); }); }); invalidation.then(() => mapRef.remove()); yield container; }35:T423,h3IDs = { // here we're deciding that we want transit coverage, 30 minutes (1800s), nodes (as we are aggregating with deckGL) const multigraphOptions = { edgeWeight: "time", maxEdgeWeight: 1800, multigraph: { layer: { type: "h3hexagon", geometryDetailLevel: travelMode.h3 // the is the h3 resolution, pre-set based on travel mode for performance reasons }, serialization: { format: "json", h3MaxBuffer: travelMode.buffer // the buffer can be used to fill in holes, pre-set based on travel mode } }, sources: [{ id: 1, ...mapMarker, ...{ tm: { [travelMode.value]: {} } } }] }; // set the targomo client const client = tgmCoreClient("westcentraleurope"); const mg = await fetch( `https://api.targomo.com/westcentraleurope/v1/multigraph?key=${targomoKey()}`, { method: "POST", headers: { "Content-Type": "application/json" }, body: JSON.stringify(multigraphOptions) } ).then((response) => response.json()); return mg.data; }36:[] 32:{"id":"dc10f7846a700385","slug":"h3-regions-with-multigraph","title":"H3 with Multigraph, part 2: regions","thumbnail":"24e90c20a26cade36f70dedeeab1ccb01fb643df5317aa893572587f0f0f08ba","access_level":"public","create_time":"$D2023-12-21T10:27:55.460Z","update_time":"$D2023-12-22T09:24:54.428Z","view_time":null,"first_public_time":"$D2023-12-21T10:27:55.460Z","has_unpublished_edits":null,"fork":{"id":"634a176a4367593a","slug":"h3-with-multigraph","title":"H3 with Multigraph","owner":{"id":"b873ed05f5a7d959","login":"targomo","name":"Targomo"}},"stars":1,"starred":false,"owner":{"type":"team","id":"b873ed05f5a7d959","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":"starter_2024"},"version":497,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"a217b68901b4272f","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":null},{"type":"individual","id":"59ca7144f8ccf1d1","login":"abenrob","name":"Adam Roberts","avatar_url":"https://avatars-next.observableusercontent.com/35b4f71c800d4e6c9e2cfa93d55a4f89515f41428620d3050060df33504db2e1","tier":null}],"members":[{"type":"individual","id":"a217b68901b4272f","login":"targomo","name":"Targomo","avatar_url":"https://avatars-next.observableusercontent.com/39645f1242d4403a667e1c0e54a0d6755d36418f30088e89a9c65e6f84f9a3bf","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"H3 with Multigraph, part 2: regions","cells":[{"id":0,"value":"tgmIntro(\n \"H3 with Multigraph, part 2: regions\",\n \"multigraph service\",\n \"https://targomo.com/developers/services/multigraph/\"\n)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":327,"value":"Targomo's Multigraph API can return [h3 hexagons](https://h3geo.org/) augmented with travel time. On top of that, H3's ability to create polygons from cell IDs with the `h3.cellsToMultiPolygon` method allows the creation of \"reachable regions\", which are essentially **h3 isochrones**.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":125,"value":"html`\n

${viewof travelMode}

${viewof minutes}

\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":42,"value":"$34","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":331,"value":"viewof mapMarker = {\n const inp = Inputs.input({ id: \"src\", ...source });\n const marker = new maplibre.Marker({\n draggable: true\n })\n .setLngLat(source)\n .addTo(map);\n\n marker.on(\"dragend\", () => {\n inp.value = { id: \"src\", ...marker.getLngLat() };\n inp.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n return inp;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":467,"value":"## H3IDs\nThe `h3hexagon` layer type returns the reachable cells as h3id + w (edge weight, time in this case). ","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":81,"value":"$35","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":471,"value":"## h3 to GeoJSON\nwith an array of ids, we can easily convert the h3 ids into the hexagon geometries","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":447,"value":"data = {\n const coverage = Object.keys(h3IDs).filter((d) => h3IDs[d].w <= 1800); // the multigraph h3 type can allow a buffer to fill in gaps. This also creates cells beyond the target reachability, which we are filtering out here\n return geojson2h3.h3SetToFeatureCollection(coverage, (d) => ({\n pointid: d,\n value: h3IDs[d].w,\n color: tgmColorInterpolator(1800)(h3IDs[d].w)\n }));\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":474,"value":"## h3 regions\nThe same array of ids, filtered to the desired max travel time, can become a region with the `h3.cellsToMultiPolygon` method","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":450,"value":"polygon = turf.multiPolygon(\n h3.cellsToMultiPolygon(\n Object.entries(h3IDs)\n .filter((d) => d[1].w <= minutes * 60)\n .map((d) => d[0]),\n true\n )\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":231,"value":"{\n map.getSource(\"hexes\").setData(data);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":387,"value":"{\n map.getSource(\"polygon\").setData(polygon);\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"viewof travelMode = {\n const modes = [\n { label: \"Walk\", value: \"walk\", h3: 11, buffer: 200 },\n { label: \"Bike\", value: \"bike\", h3: 10, buffer: 400 },\n { label: \"Car\", value: \"car\", h3: 9, buffer: 800 }\n ];\n return Inputs.radio(modes, {\n label: html`Mode of transport`,\n value: modes.find((d) => d.value === \"bike\"),\n format: (d) => d.label\n });\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":420,"value":"viewof minutes = Scrubber(\n Array.from({ length: 30 }).map((_, i) => i + 1),\n {\n alternate: true,\n autoplay: false,\n delay: 150,\n initial: 30,\n format: (d) => d + \" minutes\"\n }\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":46,"value":"source = ({ id: \"src\", lng: 2.375, lat: 48.844 })","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":134,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":16,"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","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"maplibre = {\n const gl = await require(\"maplibre-gl@2.4.0\");\n const href = await require.resolve(\"maplibre-gl@2.4.0/dist/maplibre-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":217,"value":"h3 = require(\"h3-js@4\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":222,"value":"geojson2h3 = require(\"https://bundle.run/geojson2h3@1.0.1\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":229,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":413,"value":"import { Scrubber } from \"@mbostock/scrubber\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"md`__Get re-usable targomo elements__`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":4,"value":"import {\n tgmCoreClient,\n tgmNotice,\n attribution,\n targomoKey,\n tgmLoader,\n tgmIntro,\n codeStyle,\n tgmColorInterpolator\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"codeStyle","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":10,"value":"md`Make sure you get your _own_ API key!`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W36","stdlib":"1","titling":"auto"}} 33:"$32:body"