30:T796,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, pitch: 40, style: client.basemaps.getGLStyleURL("Light"), // scrollZoom: false, 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", filter: ["<=", "value", 1800], layout: {}, paint: { "fill-color": ["get", "color"], "fill-opacity": 0.65, "fill-outline-color": "rgba(0, 0, 0, 0)" } }, "place_other" ); resolve(); }); }); invalidation.then(() => mapRef.remove()); yield container; }31:T42c,data = { // 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: hexSize }, serialization: { format: "json", h3MaxBuffer: buffer } }, sources: [{ id: 1, ...mapMarker, ...{ tm: { [travelMode]: {} } } }] }; // 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()); const coverage = Object.keys(mg.data); return geojson2h3.h3SetToFeatureCollection(coverage, (d) => ({ pointid: d, value: mg.data[d].w, color: tgmColorInterpolator(1800)(mg.data[d].w) })); }32:[] 2e:{"title":"H3 with Multigraph","cells":[{"id":0,"value":"tgmIntro(\n \"H3 with Multigraph\",\n \"multigraph service\",\n \"https://targomo.com/developers/services/multigraph/\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":327,"value":"Targomo's Multigraph API can return h3 hexagons augmented with travel time.","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"html`\n

${viewof hexSize}

${viewof travelMode}

${viewof buffer}

${viewof clipToMax}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"id":231,"value":"{\n map.getSource(\"hexes\").setData(data);\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":375,"value":"{\n clipToMax\n ? map.setFilter(\"hexes\", [\"<=\", [\"get\", \"value\"], 1800])\n : map.setFilter(\"hexes\");\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"viewof clipToMax = Inputs.toggle({\n label: \"Clip buffer to maxEdgeWeight\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":306,"value":"viewof buffer = Inputs.range([0, 1000], {\n label: \"Buffer (m)\",\n value: 0,\n step: 200\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"viewof hexSize = Inputs.select([6, 7, 8, 9, 10, 11], {\n label: html`H3 resolution`,\n value: 9\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":147,"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: \"transit\",\n format: (d) => d.label,\n valueof: (d) => d.value\n }\n)","pinned":true,"hidden":false,"mode":"ojs"},{"id":46,"value":"source = ({ id: \"src\", lng: 2.375, lat: 48.844 })","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"$31","pinned":true,"hidden":false,"mode":"ojs"},{"id":134,"value":"html`\n`","pinned":true,"hidden":false,"mode":"ojs"},{"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"},{"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"},{"id":217,"value":"h3 = require(\"h3-js@4\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":222,"value":"geojson2h3 = require(\"https://bundle.run/geojson2h3@1.0.1\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":229,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":244,"value":"import { rewind } from \"@fil/rewind\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":7,"value":"md`__Get re-usable targomo elements__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":4,"value":"import {\n tgmCoreClient,\n maptilerKey,\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"},{"id":13,"value":"codeStyle","pinned":false,"hidden":false,"mode":"ojs"},{"id":10,"value":"md`Make sure you get your _own_ API key!`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W32","stdlib":"1","titling":"auto"}