31:[] 2f:{"title":"Screen Grid Aggregation (Multigraph + DeckGL part 2)","cells":[{"id":0,"value":"tgmIntro(\n \"Screen Grid Aggregation (Multigraph + DeckGL part 2)\",\n \"multigraph service\",\n \"https://targomo.com/developers/services/multigraph/\"\n)","pinned":false,"hidden":false,"mode":"ojs"},{"id":139,"value":"[DeckGL](https://deck.gl/) offers some really powerful visualization options, which we can use quite well with our multigraph results, specifically with the _nodes_.","pinned":false,"hidden":false,"mode":"md"},{"id":144,"value":"Here we'll use Deck's `ScreenGridLayer`, aggregating the multigraph nodes to each screen grid cell.","pinned":false,"hidden":false,"mode":"md"},{"id":125,"value":"html`\n

${viewof cellSizePixels}

${viewof cellMarginPixels}

${viewof travelMode}

\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":42,"value":"viewof map = {\n let container = html`

`;\n\n // Give the container dimensions.\n yield container;\n\n // set the targomo client\n const client = tgmCoreClient(\"westcentraleurope\");\n\n // Create the \"map\" object with the mapboxgl.Map constructor, referencing\n // the container div\n let map = new mapboxgl.Map({\n container,\n center: source,\n zoom: 11,\n style: client.basemaps.getGLStyleURL(\"Light\"),\n // scrollZoom: false,\n attributionControl: false\n })\n .addControl(new mapboxgl.NavigationControl())\n .addControl(\n new mapboxgl.AttributionControl({\n compact: true,\n customAttribution: attribution\n })\n );\n\n const marker = new mapboxgl.Marker({\n //draggable: true\n })\n .setLngLat(source)\n .addTo(map);\n\n map.on(\"load\", async () => {\n container.value = map;\n container.dispatchEvent(new CustomEvent(\"input\"));\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":114,"value":"map","pinned":true,"hidden":false,"mode":"ojs"},{"id":98,"value":"viewof cellSizePixels = Inputs.range([4, 20], {\n label: html`Cell Size`,\n step: 2,\n value: 10\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":102,"value":"viewof cellMarginPixels = Inputs.range([0, 5], {\n label: html`Cell Margin`,\n step: 1,\n value: 1\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":69,"value":"COLOR_RANGE = [\n [26, 152, 80],\n [145, 207, 96],\n [217, 239, 139],\n [254, 224, 139],\n [252, 141, 89],\n [215, 48, 39]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":81,"value":"data = {\n // here we're deciding that we want transit coverage, 30 minutes (1800s), nodes (as we are aggregating with deckGL)\n const multigraphOptions = {\n edgeWeight: \"time\",\n travelType: travelMode,\n maxEdgeWeight: 1800,\n multigraph: {\n layer: { type: \"identity\" },\n domain: { type: \"node\" },\n serialization: { format: \"geojson\" },\n aggregation: { type: \"routing_union\" }\n }\n };\n\n // set the targomo client\n const client = tgmCoreClient(\"westcentraleurope\");\n const mg = await client.multigraph.fetch([source], multigraphOptions);\n\n return mg.data.features.map((f) => {\n return {\n lng: f.geometry.coordinates[0],\n lat: f.geometry.coordinates[1],\n w: f.properties.w\n };\n });\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":72,"value":"deckLayer = {\n if (map.getLayer(\"heatmap\")) {\n map.removeLayer(\"heatmap\");\n }\n const _deckLayer = new deck.MapboxLayer({\n id: \"heatmap\",\n type: deck.ScreenGridLayer,\n colorRange: COLOR_RANGE,\n data,\n getPosition: (d) => [Number(d.lng), Number(d.lat)],\n getWeight: (d) => d.w,\n aggregation: \"MEAN\",\n opacity: 0.3,\n cellSizePixels,\n cellMarginPixels\n });\n map.addLayer(_deckLayer, \"place_other\");\n return _deckLayer;\n}","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":"mapboxgl = {\n const gl = await require(\"mapbox-gl@1.13.1\");\n const href = await require.resolve(\"mapbox-gl@1.13.1/dist/mapbox-gl.css\");\n document.head.appendChild(html``);\n return gl;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":27,"value":"// deck = require.alias({\n// h3: {},\n// s2Geometry: {}\n// })(\"deck.gl@8.4.1/dist.min.js\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":51,"value":"lib = require\n .alias({\n h3: {},\n S2: {}\n })(\"deck.gl@~8.7.11/dist.min.js\")\n .then(() => ({\n deck: window.deck,\n luma: window.luma\n }))","pinned":false,"hidden":false,"mode":"ojs"},{"id":59,"value":"deck = lib.deck","pinned":false,"hidden":false,"mode":"ojs"},{"id":62,"value":"luma = lib.luma","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} 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":"$W31","stdlib":"1","titling":"auto"}