2f:T9c1,{ 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 let map = new mapboxgl.Map({ container, center: centroid, zoom: 11, style: client.basemaps.getGLStyleURL("Light"), attributionControl: false }) .addControl(new mapboxgl.NavigationControl()) .addControl( new mapboxgl.AttributionControl({ compact: true, customAttribution: attribution }) ); let markers = []; for (let location of Object.values(dataResponse)) { const popup = new mapboxgl.Popup({ offset: 25, closeButton: false }).setHTML( `${location.id}
Score: ${Math.round( location.scores.POIaccess * 10 )}/10` ); let marker = new mapboxgl.Marker({ draggable: false, color: d3.interpolateTurbo(location.scores.POIaccess) }); marker.setLngLat([location.lng, location.lat]); marker.setPopup(popup); marker.addTo(map); markers.push(marker); } function getPoiUrl(uuid) { return [ `https://api.targomo.com/pointofinterest/reachability/` + uuid + `/{z}/{x}/{y}.mvt?apiKey=${targomoKey()}` + `&loadAllTags=true&layerType=node` ]; } // register the initial reachability context request var uuid = ""; async function registerInitialRequest() { uuid = await registerNewRequest(); } await registerInitialRequest(); map.on("load", () => { map.addLayer({ id: "poi", type: "circle", source: { type: "vector", tiles: getPoiUrl(uuid), minzoom: 8 }, "source-layer": "poi", paint: { "circle-radius": 3, "circle-color": [ "case", ["!=", ["get", "edgeWeight"], null], "#f00", "#666" ] } }); }); async function registerNewRequest() { const options = { maxEdgeWeight, travelType: Object.keys(travelMode)[0], edgeWeight: "time", osmTypes: [osmTypes] }; // register a new reachability context and return its uuid const uuid = await tgmCoreClient( "westcentraleurope" ).pois.reachabilityRegister(locations, options); return uuid; } invalidation.then(() => map.remove()); yield container; }30:[{"id":"e6193b9c3a8b106a1318b4265160ae64b4d02ac82f2b257501bc018fd6f586f149332e744377abc141582974c1094f11482193ccce394f42ba4553aad9564bda","href":"https://static.observableusercontent.com/files/e6193b9c3a8b106a1318b4265160ae64b4d02ac82f2b257501bc018fd6f586f149332e744377abc141582974c1094f11482193ccce394f42ba4553aad9564bda","name":"Screen Shot 2022-04-21 at 15.25.51.png","type":"image/png","lastModified":1698323088082.49,"size":614990}] 2d:{"title":"Location Scores Tests - Closest POIs","cells":[{"id":47,"value":"# Location Scores Tests - Closest POIs","pinned":false,"hidden":false,"mode":"md"},{"id":1542,"value":"## General Concept for high-volume POI\n| range | description |\n| --- | --- |\n| 9 - 10 | Several points within a few minute walk |\n| 8 | At least one points within a 5-minute walk |\n| 6 - 7 | At least one points within a 10-minute walk |\n| 4 - 5 | At least one points within a 15-minute walk |\n| 1 - 3 | At least one points within a 30 minute walk |\n| 0 | No points within 30 minute walk |\n\n## General Concept for low-volume POI\n| range | description |\n| --- | --- |\n| 9 - 10 | A couple points within a few minute walk |\n| 8 | At least one points within a 6-minute walk |\n| 6 - 7 | At least one points within a 12-minute walk |\n| 4 - 5 | At least one points within a 20-minute walk |\n| 1 - 3 | At least one points within a 40 minute walk |\n| 0 | No points within 30 minute walk |","pinned":false,"hidden":false,"mode":"md"},{"id":1544,"value":"## Actual Implementation - high volume","pinned":false,"hidden":false,"mode":"md"},{"id":1528,"value":"md`| Condition | Criteria | Score |\n| --- | --- | --- |\n${[...breaks]\n .sort((a, b) => b[3] - a[3])\n .map((d) => {\n const [group, exp, test, val, desc] = d;\n return `|${desc}|${[group, exp, test].join(\" \")}| ${val * 10} |`;\n })\n .join(\"\\n\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1675,"value":"## Actual Implementation - low volume","pinned":false,"hidden":false,"mode":"md"},{"id":1679,"value":"md`| Condition | Criteria | Score |\n| --- | --- | --- |\n${[...breaks_sparse]\n .sort((a, b) => b[3] - a[3])\n .map((d) => {\n const [group, exp, test, val, desc] = d;\n return `|${desc}|${[group, exp, test].join(\" \")}| ${val * 10} |`;\n })\n .join(\"\\n\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":1499,"value":"breaks = [\n [\"proximity\", \"==\", 0, 0, \"if no reachable POIs\"],\n [\"count\", \">\", 3, 1, \"if more than 3 POIs in 3 min\"],\n [\"count\", \">\", 1, 0.9, \"if more than 1 POI in 3 min\"],\n [\"proximity\", \"<\", 300, 0.8, \"if at least one POI within 5 minutes\"],\n [\"proximity\", \"<\", 450, 0.7, \"if at least one POI within 7.5 minutes\"],\n [\"proximity\", \"<\", 600, 0.6, \"if at least one POI within 10 minutes\"],\n [\"proximity\", \"<\", 750, 0.5, \"if at least one POI within 12.5 minutes\"],\n [\"proximity\", \"<\", 900, 0.4, \"if at least one POI within 15 minutes\"],\n [\"proximity\", \"<\", 1200, 0.3, \"if at least one POI within 20 minutes\"],\n [\"proximity\", \"<\", 1500, 0.2, \"if at least one POI within 25 minutes\"],\n [\"proximity\", \"<\", 1800, 0.1, \"if at least one POI within 30 minutes\"]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1662,"value":"breaks_sparse = [\n [\"proximity\", \"==\", 0, 0, \"if no reachable POIs\"],\n [\"count\", \">\", 2, 1, \"if more than 2 POIs in 4 min\"],\n [\"count\", \">\", 1, 0.9, \"if more than 1 POI in 4 min\"],\n [\"proximity\", \"<\", 360, 0.8, \"if at least one POI within 6 minutes\"],\n [\"proximity\", \"<\", 540, 0.7, \"if at least one POI within 9 minutes\"],\n [\"proximity\", \"<\", 720, 0.6, \"if at least one POI within 12 minutes\"],\n [\"proximity\", \"<\", 900, 0.5, \"if at least one POI within 15 minutes\"],\n [\"proximity\", \"<\", 1200, 0.4, \"if at least one POI within 20 minutes\"],\n [\"proximity\", \"<\", 1500, 0.3, \"if at least one POI within 25 minutes\"],\n [\"proximity\", \"<\", 1800, 0.2, \"if at least one POI within 30 minutes\"],\n [\"proximity\", \"<\", 2400, 0.1, \"if at least one POI within 40 minutes\"]\n]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1550,"value":"### Math Expression","pinned":false,"hidden":false,"mode":"md"},{"id":1503,"value":"mathExpression = {\n let expression = \"*\";\n const curBreaks = osmTypes.volume === \"high\" ? breaks : breaks_sparse;\n curBreaks.forEach((b, i) => {\n const [group, exp, test, val] = b;\n const string = `{${group}} ${exp} ${test} ? ${val} : ${\n i === curBreaks.length - 1 ? 0 : \"(*)\"\n }`;\n expression = expression.replace(\"*\", string);\n });\n return expression;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1553,"value":"### POIs to include","pinned":false,"hidden":false,"mode":"md"},{"id":1589,"value":"osmTypes","pinned":false,"hidden":false,"mode":"ojs"},{"id":1487,"value":"viewof osmTypes = {\n const types = [\n {\n key: \"group\",\n value: \"supermarket\",\n display: \"supermarket\",\n volume: \"high\"\n },\n {\n key: \"group\",\n value: \"chemist\",\n display: \"drugstore\",\n volume: \"low\"\n }\n ];\n return Inputs.table(types, {\n value: types.find((d) => d.value === \"supermarket\"),\n multiple: false\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":1458,"value":"mathCriteria = {\n return {\n POIaccess: {\n type: \"mathAggregation\",\n mathExpression,\n criterionParameters: {\n // \"proximity\" is how close the closest found POI is, within 30 min max walk\n proximity: {\n type: \"closestPoiAbsoluteDistance\",\n osmTypes: [osmTypes],\n maxEdgeWeight,\n edgeWeight: \"time\",\n travelMode,\n coreServiceUrl: \"https://api.targomo.com/westcentraleurope\"\n },\n // \"count\" is the number of POIs within 3 minutes\n count: {\n type: \"poiCoverageCount\",\n osmTypes: [osmTypes],\n maxEdgeWeight: osmTypes.volume === \"high\" ? 180 : 240, // only interested in multiples for less than 3 min\n edgeWeight: \"time\",\n travelMode,\n coreServiceUrl: \"https://api.targomo.com/westcentraleurope\"\n }\n }\n }\n };\n}","pinned":true,"hidden":false,"mode":"ojs"},{"id":22,"value":"locations = {\n var extent = [52.46, 13.27, 52.57, 13.53];\n var cellSide = 4; // km between points\n\n var grid = turf.pointGrid(extent, cellSide);\n return grid.features.map((e, index) => {\n return {\n id: `Location ${index + 1}`,\n lat: e.geometry.coordinates[0],\n lng: e.geometry.coordinates[1]\n };\n });\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":24,"value":"dataResponse = (\n await fetch(\n `https://api.targomo.com/quality/v1/scores?showDetails=true&apiKey=${targomoKey()}`,\n {\n method: \"POST\",\n headers: { \"Content-Type\": \"application/json\" },\n body: JSON.stringify({\n locations,\n criteria: { ...mathCriteria }\n }),\n mode: \"cors\"\n }\n ).then((d) => d.json())\n).data","pinned":false,"hidden":false,"mode":"ojs"},{"id":666,"value":"md`| Location Name | Score |\n| --- | --- |\n${extractScores(dataResponse, [\"POIaccess\"])\n .sort((a, b) => b.POIaccess - a.POIaccess)\n .map((d) => {\n const [name, value] = Object.values(d);\n return `|${name}|${Math.round(value * 10)}|`;\n })\n .join(\"\\n\")}\n`","pinned":false,"hidden":false,"mode":"ojs"},{"id":404,"value":"$2f","pinned":false,"hidden":false,"mode":"ojs"},{"id":320,"value":"---","pinned":false,"hidden":false,"mode":"md"},{"id":27,"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":106,"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":1261,"value":"travelMode = ({ walk: {} })","pinned":false,"hidden":false,"mode":"ojs"},{"id":80,"value":"maxEdgeWeight = 1800","pinned":false,"hidden":false,"mode":"ojs"},{"id":1280,"value":"pointsExtent = [52.46, 13.27, 52.57, 13.53]","pinned":false,"hidden":false,"mode":"ojs"},{"id":1284,"value":"centroid = turf\n .centroid(turf.bboxPolygon(pointsExtent))\n .geometry.coordinates.reverse()","pinned":false,"hidden":false,"mode":"ojs"},{"id":600,"value":"function extractScores(data, values) {\n let result = [];\n for (const key of Object.keys(data)) {\n result.push({ \"Location name\": key });\n values.map((value) => {\n result[result.length - 1][value] = data[key].scores[value];\n });\n }\n return result;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":714,"value":"turf = require(\"@turf/turf\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":29,"value":"md`__Get re-usable targomo elements__`","pinned":false,"hidden":false,"mode":"ojs"},{"id":31,"value":"import {\n tgmCoreClient,\n tgmNotice,\n attribution,\n targomoKey,\n tgmLoader,\n tgmIntro\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"md`Make sure you get your _own_ API key!`","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W30","stdlib":"1","titling":"auto"}