2f:T63a,mgConfig = ({ multiGraphLayerGeometryDetailPerTile: 6, multiGraphLayerMinGeometryDetailLevel: 5, multiGraphLayerMaxGeometryDetailLevel: 25, multiGraphLayerGeometryDetailLevel: 25, multiGraphAggregationType: "none", multiGraphSerializationFormat: "mvt", multiGraphSerializationMaxGeometryCount: 100000, multiGraphReferencedStatisticIds: stats.reduce((acc, cur) => { // map each statistic id to a reference key acc[cur.key] = cur.value; return acc; }, {}), multiGraphAggregationInputParameters: { reachability: {}, // this includes reachability in the pipeline // add each key from multiGraphReferencedStatisticIds, with an empty object ...stats.reduce((acc, cur) => { acc[cur.key] = {}; return acc; }, {}) }, multiGraphDomainType: "statistic_geometry", // use statistics data as a routing aggregation travelType: "walk", // or bike|car|transit forceRecalculate: false, maxEdgeWeight, multiGraphLayerType: "identity", multiGraphDomainStatisticCollectionId: "71", // stats collection 71 (Spain) multiGraphLayerUnboundedStatistics: true, // include unreached cells as well (and use unreached for breakpoints) serviceUrl, serviceKey: targomoKey(), multiGraphPreAggregationPipeline: { // this tells multigraph to incorporate reachability into the results reachability: { type: "routing_union", aggregationInputParameters: { [view.name]: {} // must match id from source } } }, sources: [ { id: "source_1", x: view.center[1], y: view.center[0] } ] })30:T9a9,{ if (mgOverview) { // if present, remove if (map.getLayer(`statistics-reached`)) { map.removeLayer(`statistics-reached`); } // if present, remove if (map.getSource(`statistics-reached`)) { map.removeSource(`statistics-reached`); } // if present, remove if (map.getLayer(`statistics-unreached`)) { map.removeLayer(`statistics-unreached`); } // if present, remove if (map.getSource(`statistics-unreached`)) { map.removeSource(`statistics-unreached`); } map.addLayer( { id: `statistics-reached`, type: "fill", source: { type: "vector", tiles: [`${mvtUrl}?apiKey=${targomoKey()}&serviceUrl=${serviceUrl}`], attribution: '© Targomo' }, "source-layer": "aggregation", // the layer name is always "statistics" for tiled MVTs layout: {}, filter: ["to-boolean", ["get", "reachability"]], // filter for only reachable cells paint: { "fill-opacity": 0.6, "fill-color": colorDef( mgOverview, displayStat.key, d3.interpolateYlOrRd ), "fill-outline-color": "rgba(0,0,0,0)" // borders need to be transparent to avoid showing tile edges } }, "place_other" ); if (show_unreachable) { map.addLayer( { id: `statistics-unreached`, type: "fill", source: { type: "vector", tiles: [`${mvtUrl}?key=${targomoKey()}&serviceUrl=${serviceUrl}`], attribution: '© Targomo' }, "source-layer": "aggregation", // the layer name is always "statistics" for tiled MVTs layout: {}, filter: ["!", ["to-boolean", ["get", "reachability"]]], // filter for only unreachable cells paint: { "fill-opacity": 0.4, "fill-color": colorDef( mgOverview, displayStat.key, d3.interpolateGreys ), "fill-outline-color": "rgba(0,0,0,0)" // borders need to be transparent to avoid showing tile edges } }, "place_other" ); } } return md`_adding MVT layers to the map_`; }31:[] 2d:{"title":"Multigraph + Statistics","cells":[{"id":0,"value":"# Multigraph + Statistics","pinned":false,"hidden":false,"mode":"md"},{"id":29,"value":"viewof map = {\n let container = html`

`;\n\n // Give the container dimensions.\n yield container;\n\n // Create the \"map\" object with the maplibre.Map constructor, referencing\n // the container div\n const mapRef = (container.value = new maplibre.Map({\n container,\n center: { lat: view.center[0], lng: view.center[1] },\n zoom: view.zoom,\n style: view.basemap\n }));\n\n const marker = new maplibre.Marker()\n .setLngLat({ lat: view.center[0], lng: view.center[1] })\n .addTo(mapRef);\n\n await new Promise((resolve, reject) => {\n mapRef.on(\"load\", async () => {\n resolve();\n });\n });\n\n invalidation.then(() => mapRef.remove());\n yield container;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":129,"value":"md`### ${displayStat.label} within ${maxEdgeWeight / 60}-minute walk: ${\n reachableSums.data[view.name].scores[displayStat.key]\n}`","pinned":false,"hidden":false,"mode":"ojs"},{"id":135,"value":"viewof maxEdgeWeight = Inputs.select([900, 1800], {\n label: \"Travel Time Minutes\",\n value: 1800,\n format: (d) => d / 60\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":173,"value":"viewof displayStat = Inputs.select(stats, {\n label: \"Select one\",\n format: (d) => d.label\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":124,"value":"viewof show_unreachable = Inputs.toggle({\n label: \"Show Unreachable\",\n value: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":225,"value":"

To get both statistic cells appropriate for showing on a map as well as summaries of statistics, we will be requesting several resources, which I will outline below.","pinned":false,"hidden":false,"mode":"md"},{"id":358,"value":"# Stats Metadata","pinned":false,"hidden":false,"mode":"md"},{"id":345,"value":"All available stats for a collection can be inspected with the collection meta endpoint. All stats are found at `meta.stats`. IDs, names, descriptions, and data type (\"ABSOLUTE|PERCENT\" which is important for deciding if the statistic should be summed (ABSOLUTE), or averaged (PERCENT)).","pinned":false,"hidden":false,"mode":"md"},{"id":343,"value":"meta = fetch(\n `https://api.targomo.com/statistics/collection/meta/71?apiKey=${targomoKey()}`\n).then((response) => response.json())","pinned":true,"hidden":false,"mode":"ojs"},{"id":356,"value":"Here I'm creating a lookup for statistic ids. This is to simplify the config creations where reference keys are required.","pinned":false,"hidden":false,"mode":"md"},{"id":175,"value":"stats = Object.values(meta.stats)\n .filter((d) => [0, 5, 6, 22, 44].includes(d.statistic_id))\n .map((d) => ({\n key: `w${d.statistic_id}`,\n value: d.statistic_id,\n label: d.descriptions.en\n }))","pinned":true,"hidden":false,"mode":"ojs"},{"id":360,"value":"# Service URL","pinned":false,"hidden":false,"mode":"md"},{"id":229,"value":"For all western Europe, the serviceUrl will be:","pinned":false,"hidden":false,"mode":"md"},{"id":20,"value":"serviceUrl = \"https://api.targomo.com/westcentraleurope\"","pinned":true,"hidden":false,"mode":"ojs"},{"id":362,"value":"# Statistics Multigraph Service","pinned":false,"hidden":false,"mode":"md"},{"id":232,"value":"We are using the \"statistics multigraph\" service to generate statistic tiles which show routed cells as well as un-routed. The starting point of anything multigraph is the config object:","pinned":false,"hidden":false,"mode":"md"},{"id":8,"value":"$2f","pinned":true,"hidden":false,"mode":"ojs"},{"id":364,"value":"# Multigraph scenario ID","pinned":false,"hidden":false,"mode":"md"},{"id":246,"value":"With this config, we can generate an ID which can be used in the vector tile URLs, as well as the overview info","pinned":false,"hidden":false,"mode":"md"},{"id":11,"value":"mgID = {\n return await fetch(\n `https://api.targomo.com/statistics/multigraph?key=${targomoKey()}&serviceUrl=${serviceUrl}`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(mgConfig)\n }\n ).then((response) => response.text());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":366,"value":"# Multigraph Overview","pinned":false,"hidden":false,"mode":"md"},{"id":251,"value":"With this ID we generated, we can fetch the overview. This overview serves two purposes:\n1. The overview contains the `status` of the calculation. In complex scenarios this can take some time, however for small, single-source scenarios such as this, the calculation completes in milliseconds.\n2. The overview contains breakpoints for the statistics defined in the config, which we can use for displaying the tiles across map resolutions.","pinned":false,"hidden":false,"mode":"md"},{"id":17,"value":"mgOverview = {\n const url = `https://api.targomo.com/statistics/multigraph/${mgID}?key=${targomoKey()}&serviceUrl=${serviceUrl}`;\n let results = {};\n\n while (!results.status || results.status !== \"COMPLETED\") {\n // status will not equal \"COMPLETED\" until calculation is complete\n try {\n const response = await fetch(url);\n const data = await response.json();\n\n results = { ...data };\n\n // try again in a second\n await new Promise((resolve) => setTimeout(resolve, 1000));\n } catch (error) {\n console.error(\"Error fetching data:\", error);\n }\n }\n\n return results;\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":368,"value":"# MVT Tiles","pinned":false,"hidden":false,"mode":"md"},{"id":266,"value":"Vector tiles can be requested for this scenario with the following url: `https://api.targomo.com/statistics/multigraph//{z}/{x}/{y}.mvt`","pinned":false,"hidden":false,"mode":"md"},{"id":271,"value":"mvtUrl = `https://api.targomo.com/statistics/multigraph/${mgID}/{z}/{x}/{y}.mvt`","pinned":false,"hidden":false,"mode":"ojs"},{"id":370,"value":"# Statistics Roll-ups","pinned":false,"hidden":false,"mode":"md"},{"id":254,"value":"To get the summary values for the reachable statistics, we will use the Location Scores API. This allows us to return many summaries at once, and when incorporating Location Scores (i.e. \"groceries\", or \"eating out\"), we can add to the same request, allowing all data to be fetched at once. The scores config is defined here: ","pinned":false,"hidden":false,"mode":"md"},{"id":372,"value":"## Scores Config","pinned":false,"hidden":false,"mode":"md"},{"id":218,"value":"scoresConfig = ({\n locations: [\n {\n id: \"source_1\",\n lng: view.center[1],\n lat: view.center[0]\n }\n ],\n criteria: stats.reduce((acc, cur) => {\n acc[cur.key] = {\n type: \"statisticsSum\", // for ABSOLUTE stats. mathAggregation could be used for PERCENT stats\n statisticCollectionId: 71,\n statisticsIds: [cur.value],\n maxEdgeWeight: maxEdgeWeight,\n edgeWeight: \"time\",\n travelMode: {\n walk: {}\n },\n coreServiceUrl: \"https://api.targomo.com/westcentraleurope/\"\n };\n return acc;\n }, {})\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":374,"value":"## Scores results","pinned":false,"hidden":false,"mode":"md"},{"id":260,"value":"Summation of all defined stats are now returned here:","pinned":false,"hidden":false,"mode":"md"},{"id":211,"value":"reachableSums = {\n return await fetch(\n `https://api.targomo.com/quality/v1/scores?apiKey=${targomoKey()}`,\n {\n method: \"POST\",\n headers: {\n \"Content-Type\": \"application/json\"\n },\n body: JSON.stringify(scoresConfig)\n }\n ).then((response) => response.json());\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":262,"value":"# Putting it on the map","pinned":false,"hidden":false,"mode":"md"},{"id":276,"value":"The vector tiles are zoom-dependent, so different cell resolutions are returned at different zoom levels. The breakpoints to determine the color scales are therefore also zoom-dependent. This makes for a complicated fill-color style definition, however it can be generated programmatically with the information contained in the overview we previously requested.","pinned":false,"hidden":false,"mode":"md"},{"id":377,"value":"## Color style definition","pinned":false,"hidden":false,"mode":"md"},{"id":68,"value":"// function to generate color def\ncolorDef = (mgOverview, statName, scale) => {\n const breaks = mgOverview.multiGraphInfo.layersInfo[statName]\n .sort((a, b) => a.maxZoom - b.maxZoom)\n .map((d, i) => [\n [\n \"interpolate\",\n [\"linear\"],\n [\"get\", statName],\n ...d.kmeansValueBreaks\n .map((b, i) => [b, scale(i / (d.kmeansValueBreaks.length - 1))])\n .flat()\n ],\n d.maxZoom\n ]);\n\n return [\"step\", [\"zoom\"], ...breaks.flat(), \"#000\"];\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":318,"value":"md`Example color def for \\`\"${displayStat.key}\"\\`, with d3's YlOrRd color scale:`","pinned":false,"hidden":false,"mode":"ojs"},{"id":73,"value":"colorDef(mgOverview, displayStat.key, d3.interpolateBlues)","pinned":true,"hidden":false,"mode":"ojs"},{"id":327,"value":"Since the MVT tiles contain both reachable and un-reachable cells, we can simplify the process by adding 2 layers - on for reached, and one for unreached. We can use the same color def, buy use a gray scale for unreached. ","pinned":false,"hidden":false,"mode":"md"},{"id":379,"value":"## Adding layers to map","pinned":false,"hidden":false,"mode":"md"},{"id":46,"value":"$30","pinned":true,"hidden":false,"mode":"ojs"},{"id":332,"value":"# Discussion\nThe Location Scores request can be waited for, and can include all the statistics we are including (from collection 71). This is pretty fast, and the weight of the returned data is not very large. \n\nThe MVT tiles, on the other hand, could become very heavy if all statistics are included in every single tile...\n\nI would recommend creating an ID, summary, and tile URL for each menu section, and fetch this when the accordion is opened. You could do the same separation for the statistics sums from the Location Scores API as well, but it will be less critical.\n","pinned":false,"hidden":false,"mode":"md"},{"id":329,"value":"

\n# Reusable configs and imports","pinned":false,"hidden":false,"mode":"md"},{"id":36,"value":"view = ({\n name: \"source_1\",\n center: [40.437787974977084, -3.6922014932864045],\n zoom: 13,\n basemap: tgmCoreClient(\"westcentraleurope\").basemaps.getGLStyleURL(\"Light\")\n})","pinned":true,"hidden":false,"mode":"ojs"},{"id":33,"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":4,"value":"import {\n tgmCoreClient,\n tgmNotice,\n targomoKey,\n tgmIntro,\n codeStyle\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W31","stdlib":"1","titling":"auto"}