31:T45c,*Image by [Micaël](https://www.instagram.com/micael_dessin/)* Carlos Moreno's award-winning [15-minute city](https://obelaward.org/winner-2021/) concept is based around the idea of _access_ instead of simple _mobility_. > The idea behind the 15-minute city is that cities should be (re)designed, so that all residents are able to access their daily needs (housing, work, food, health, education, and culture and leisure) within the distance of a 15-minute walk or bike ride. This greatly reduces car traffic and CO2 emissions and increases the health and well-being of residents. Influenced by the likes of Portland, Oregon's [20-minute neighborhoods](https://www.portlandonline.com/portlandplan/?a=437441&), this is a concept that is mirrored across the globe, with variations in [Paris](https://www.paris.fr/dossiers/paris-ville-du-quart-d-heure-ou-le-pari-de-la-proximite-37), [Barcelona](https://ajuntament.barcelona.cat/superilles/es/), [Chengdu](https://www.wired.co.uk/article/china-great-city), [Melbourne](https://www.planmelbourne.vic.gov.au/current-projects/20-minute-neighbourhoods), and many others.32:Tce2,viewof map = { let container = html`

`; // Give the container dimensions. yield container; // Create the "map" object with the maplibre.Map constructor, referencing // the container div const mapRef = (container.value = new maplibre.Map({ container, center: { lat: 48.861133, lng: 2.335332 }, zoom: 14, style: tgmCoreClient("westcentraleurope").basemaps.getGLStyleURL("Light") })).addControl(new maplibre.NavigationControl()); await new Promise((resolve, reject) => { mapRef.on("load", async () => { for (let cluster of Object.values(clusterMeta)) { mapRef.loadImage(cluster.icon, (error, image) => { if (error) throw error; if (!mapRef.hasImage(cluster.name)) mapRef.addImage(cluster.name, image); }); } mapRef.addSource("isochrone_src", { type: "geojson", data: { type: "FeatureCollection", features: [] }, attribution: "© Targomo" }); mapRef.addLayer({ id: "polygons", type: "fill", source: "isochrone_src", layout: {}, paint: { "fill-color": "#000", "fill-opacity": 0.2 } }); mapRef.addSource("poi_src", { type: "geojson", data: { type: "FeatureCollection", features: [] } }); mapRef.addLayer({ id: "pois", type: "symbol", source: "poi_src", layout: { "icon-allow-overlap": true, "icon-image": ["get", "cluster"], "icon-size": 0.4 } }); mapRef.on("click", "pois", (e) => { const description = `

${ e.features[0].properties["cluster"] }

Type: ${ e.features[0].properties["group"] }

Name: ${ e.features[0].properties["name"] ? e.features[0].properties["name"] : "not specified" }

Travel Time: ${ e.features[0].properties["time"] } minutes

`; new maplibre.Popup() .setLngLat(e.lngLat) .setHTML(description) .addTo(mapRef); }); mapRef.on("mouseenter", "pois", function (e) { // Change the cursor style as a UI indicator. mapRef.getCanvas().style.cursor = "pointer"; }); mapRef.on("mouseleave", "pois", function () { // change back the cursor mapRef.getCanvas().style.cursor = ""; }); resolve(); }); }); invalidation.then(() => mapRef.remove()); yield container; }33:T452,isochrone = { // to allow global coverage, we can devine the endpojnt from the source location const endpoint = ( await fetch( `https://api.targomo.com/utility/endpoint/?latitude=${mapMarker.lat}&longitude=${mapMarker.lng}` ).then((response) => response.json()) ).endpoint; const client = tgmCoreClient(endpoint); const options = { travelType: mode, travelEdgeWeights: [900], // 30 minutes only maxEdgeWeight: 900, edgeWeight: "time", srid: 4326, simplify: 100, quadrantSegments: 5, serializer: "geojson", buffer: 0.00075 }; const isochroneResponse = await client.polygons.fetch( [{ id: "pois", ...mapMarker }], options ); const inverse = turf.featureCollection([ // cut the polygons out of a global box turf.difference( turf.bboxPolygon([-180, 80, 180, -80]), // pretty much the inhabited world isochroneResponse.features[0] // we only requested one travel time ) ]); map.getSource("isochrone_src").setData(inverse); map.fitBounds(turf.bbox(isochroneResponse), { padding: 10 }); return inverse; }34:T674,pois = { // to allow global coverage, we can devine the endpojnt from the source location const endpoint = ( await fetch( `https://api.targomo.com/utility/endpoint/?latitude=${mapMarker.lat}&longitude=${mapMarker.lng}` ).then((response) => response.json()) ).endpoint; const client = tgmCoreClient(endpoint); const options = { maxEdgeWeight: 900, travelType: mode, edgeWeight: "time", osmTypes: selectedClusters }; const pois = Object.values( await client.pois.reachable({ id: "pois", ...mapMarker }, options) ); // return pois; const reachableClusters = { culture: pois.filter((p) => p.clusterIds.includes("c_culture")).length, food: pois.filter((p) => p.clusterIds.includes("c_food")).length, health: pois.filter((p) => p.clusterIds.includes("c_health")).length, education: pois.filter((p) => p.clusterIds.includes("c_education")).length, leisure: pois.filter((p) => p.clusterIds.includes("c_leisure")).length, transit: pois.filter((p) => p.clusterIds.includes("c_transit")).length, featureCollection: { type: "FeatureCollection", features: pois.map((f) => { return { type: "Feature", properties: { cluster: f.clusterIds[0].replace("c_", ""), name: f.tags.name, group: f.groupIds[0], time: Math.round((f.edgeWeight / 60) * 10) / 10 }, geometry: { type: "Point", coordinates: [f.lng, f.lat] } }; }) } }; map.getSource("poi_src").setData(reachableClusters.featureCollection); return reachableClusters; }35:T795,clusters = [ { key: "c_food", value: "group=supermarket" }, { key: "c_food", value: "group=convenience" }, { key: "c_food", value: "group=frozen_food" }, { key: "c_food", value: "group=general" }, { key: "c_food", value: "group=greengrocer" }, { key: "c_food", value: "group=marketplace" }, { key: "c_food", value: "group=bakery" }, { key: "c_food", value: "group=beverages" }, { key: "c_food", value: "group=butcher" }, { key: "c_food", value: "group=cheese" }, { key: "c_food", value: "group=deli" }, { key: "c_food", value: "group=dairy" }, { key: "c_food", value: "group=shop_farm" }, { key: "c_food", value: "group=health_food" }, { key: "c_food", value: "group=pasta" }, { key: "c_food", value: "group=pastry" }, { key: "c_food", value: "group=seafood" }, { key: "c_food", value: "group=organic" }, { key: "c_health", value: "g_healthcare" }, { key: "c_education", value: "g_education" }, { key: "c_culture", value: "group=cinema" }, { key: "c_culture", value: "group=museum" }, { key: "c_culture", value: "group=zoo" }, { key: "c_culture", value: "group=aquarium" }, { key: "c_culture", value: "group=gallery" }, { key: "c_culture", value: "group=arts_centre" }, { key: "c_culture", value: "group=community_center" }, { key: "c_culture", value: "group=planetarium" }, { key: "c_culture", value: "group=theatre" }, { key: "c_leisure", value: "g_sport" }, { key: "c_leisure", value: "g_eat_out" }, { key: "c_leisure", value: "group=leisure_park" }, { key: "c_leisure", value: "group=beach" }, { key: "c_transit", value: "group=bus_stop" }, { key: "c_transit", value: "group=railway_station" }, { key: "c_transit", value: "group=subway_entrance" }, { key: "c_transit", value: "group=tram_stop" }, { key: "c_transit", value: "group=terminal" }, { key: "c_transit", value: "group=bus_station" }, { key: "c_transit", value: "group=public_transport_station" } ]36:[{"id":"9ee9eaab5d6ce06adeb924f080115f2d301cad8dfc9db0c72dbb9e2914dda385a1d975132063cf314a23abb2a602000eba59b62a73d31b871078a65b179c3188","href":"https://static.observableusercontent.com/files/9ee9eaab5d6ce06adeb924f080115f2d301cad8dfc9db0c72dbb9e2914dda385a1d975132063cf314a23abb2a602000eba59b62a73d31b871078a65b179c3188","name":"transit.png","type":"image/png","lastModified":1665664437299.688,"size":1822},{"id":"bc15cad4b512dfdfb5994bc89d180be1d8b1a9cf635ecb6bcccde383fd814b1ddaf895d58fc486fcc1fc69ebb70592bfe03101785a7594dd47b56fbb09fc0722","href":"https://static.observableusercontent.com/files/bc15cad4b512dfdfb5994bc89d180be1d8b1a9cf635ecb6bcccde383fd814b1ddaf895d58fc486fcc1fc69ebb70592bfe03101785a7594dd47b56fbb09fc0722","name":"the-15-minute-city-paris-landscape-credit-micael@1.jpeg","type":"image/jpeg","lastModified":1665570846977.735,"size":117947},{"id":"380d9e6e940257669ad0047fde1c137c928c4bd0638cef736e76fac631c36f1ddcafb3d1ea51e8f9335974948eecf323d5dc457d646106413cd2f282001cd3a9","href":"https://static.observableusercontent.com/files/380d9e6e940257669ad0047fde1c137c928c4bd0638cef736e76fac631c36f1ddcafb3d1ea51e8f9335974948eecf323d5dc457d646106413cd2f282001cd3a9","name":"sad.svg","type":"image/svg+xml","lastModified":1665570270463.353,"size":2367},{"id":"d40a09417f2cf761f4d1952a7abd5c520afd28abbc5b873db651140104ba6dcda814c4fa2246f3fb84d289c7516a6eff95ba339f0fac8beec41e341824013efa","href":"https://static.observableusercontent.com/files/d40a09417f2cf761f4d1952a7abd5c520afd28abbc5b873db651140104ba6dcda814c4fa2246f3fb84d289c7516a6eff95ba339f0fac8beec41e341824013efa","name":"happy.svg","type":"image/svg+xml","lastModified":1665570270654.01,"size":1823},{"id":"41b93528dd14e619b0702f42a3605377888f23d5be8fb264c666e70b2308e07707010198db34ff8b81899d5c62b3dcde3e3515292d5f295472a601d59b460d1f","href":"https://static.observableusercontent.com/files/41b93528dd14e619b0702f42a3605377888f23d5be8fb264c666e70b2308e07707010198db34ff8b81899d5c62b3dcde3e3515292d5f295472a601d59b460d1f","name":"culture.png","type":"image/png","lastModified":1665580158651.108,"size":1766},{"id":"01d079ba175da1a36588216c6bcab904b2a4d564d55fa9ba54c105ddb39d96708ce35a2e4901727bf32c6f364f81a02fbf35655797650064f660c2c4e64909c0","href":"https://static.observableusercontent.com/files/01d079ba175da1a36588216c6bcab904b2a4d564d55fa9ba54c105ddb39d96708ce35a2e4901727bf32c6f364f81a02fbf35655797650064f660c2c4e64909c0","name":"food.png","type":"image/png","lastModified":1665580158627.681,"size":2220},{"id":"0bf231dbb5c314625155abcbe53c09551cc4c31b9160010d37786812d4765d8ef4b783421ebf74a0a722f6e6e88aa5b6d49338038a04da3580b0a7b1975db1e5","href":"https://static.observableusercontent.com/files/0bf231dbb5c314625155abcbe53c09551cc4c31b9160010d37786812d4765d8ef4b783421ebf74a0a722f6e6e88aa5b6d49338038a04da3580b0a7b1975db1e5","name":"education.png","type":"image/png","lastModified":1665580158633.28,"size":2243},{"id":"33736a3277b00fee5a2582cfbc5accb66cc14f78668601cad72f3cdc0c72fd3b7ce88bd6e4fc9ee500ee86eca72d416eff375715c93cc6192bbfe5e794733f0d","href":"https://static.observableusercontent.com/files/33736a3277b00fee5a2582cfbc5accb66cc14f78668601cad72f3cdc0c72fd3b7ce88bd6e4fc9ee500ee86eca72d416eff375715c93cc6192bbfe5e794733f0d","name":"health.png","type":"image/png","lastModified":1665580158678.899,"size":2136},{"id":"98819d1060b81c37176cda995d3f3a13006c8f8a19a462270d479b1b901f5181549e60a74c9a494b31262513cf906ba20bb9de95fdf67b9a969282cb9bd68f11","href":"https://static.observableusercontent.com/files/98819d1060b81c37176cda995d3f3a13006c8f8a19a462270d479b1b901f5181549e60a74c9a494b31262513cf906ba20bb9de95fdf67b9a969282cb9bd68f11","name":"leisure.png","type":"image/png","lastModified":1665580158637.569,"size":1824}] 2f:{"title":"Exploring the 15-minute City","cells":[{"id":0,"value":"# Exploring the 15-minute City","pinned":false,"hidden":false,"mode":"md"},{"id":234,"value":"the15MinuteCityParisLandscapeCreditMicael1 = FileAttachment(\"the-15-minute-city-paris-landscape-credit-micael@1.jpeg\").image()","pinned":false,"hidden":false,"mode":"ojs"},{"id":19,"value":"$31","pinned":false,"hidden":false,"mode":"md"},{"id":26,"value":"## All about reachability\nThe core tenet of all these approaches is that they focus on the **_reachability_** of daily needs, so that that people are able to live their day-to-day lives without relying on a car. In general, these are \"points-of-interest\" (POIs), and we could conceive a generic proxy by checking if there are POIs present from each of the groups.\n\nStarting from Targomo's [POI hierarchy](https://observablehq.com/@targomo/poi-hierarchy) (OSM-based POIs), we can explore POIs which correspond roughly to the `food`, `health`, `education`, `culture`, `leisure`, and `transit` facets of the 15-minute city.","pinned":false,"hidden":false,"mode":"md"},{"id":77,"value":"### Clusters\nWe can take these OSM groups and amenities and build them into the following clusters `c_food`, `c_health`, `c_education`, `c_culture`, `c_leisure`, `c_transit`:","pinned":false,"hidden":false,"mode":"md"},{"id":417,"value":"viewof selectedClusters = Inputs.table(clusters, {\n value: clusters,\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":166,"value":"## Measuring a location\nWe've defined the clusters we are interested in, so now we need to apply them to a location.\n\n_Drag the pin around to test different locations._","pinned":false,"hidden":false,"mode":"md"},{"id":205,"value":"html`

${\n is15MinuteCity\n ? html`

`\n : html`

`\n}

${Plot.plot({\n height: 200,\n marks: [\n Plot.barY(\n Object.entries(poiClusters).map((e) => ({ cluster: e[0], count: e[1] })),\n {\n x: \"cluster\",\n y: \"count\",\n fill: (d) => clusterMeta[d.cluster].color\n // sort: { x: \"y\", reverse: true }\n }\n ),\n Plot.ruleY([0])\n ],\n x: { label: null },\n y: allEmpty\n ? {\n domain: [0, 1]\n }\n : {}\n})}

`","pinned":false,"hidden":false,"mode":"ojs"},{"id":258,"value":"is15MinuteCity\n ? md`All categories reachable in **15-minutes** *${\n mode === \"walk\" ? \"on foot\" : \"by bike\"\n }!*`\n : md`Not all categories reachable in **15-minutes** by *${\n mode === \"walk\" ? \"on foot\" : \"by bike\"\n }!*`","pinned":false,"hidden":false,"mode":"ojs"},{"id":262,"value":"viewof mode = Inputs.radio([\"walk\", \"bike\"], {\n label: \"Select travel mode\",\n value: \"walk\"\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":175,"value":"$32","pinned":false,"hidden":false,"mode":"ojs"},{"id":469,"value":"### Isochrone Polygon\nHere we're defining an [isochrone polygon](https://www.targomo.com/developers/apis/isochrone/), but it's only for display - the POIs we're requesting are already limited by travel time, and include precise time to each POI.","pinned":false,"hidden":false,"mode":"md"},{"id":449,"value":"$33","pinned":false,"hidden":false,"mode":"ojs"},{"id":471,"value":"### Places Context (reachable POIs)\nThe [Places Context API]() returns OSM POIs based on travel time and travel mode.","pinned":false,"hidden":false,"mode":"md"},{"id":507,"value":"*The POIs are grouped into clusters to allow separation and classification of the returned values*","pinned":false,"hidden":false,"mode":"md"},{"id":504,"value":"selectedClusters","pinned":false,"hidden":false,"mode":"ojs"},{"id":88,"value":"$34","pinned":true,"hidden":false,"mode":"ojs"},{"id":372,"value":"poiFeatures = pois.featureCollection","pinned":false,"hidden":false,"mode":"ojs"},{"id":483,"value":"## Limitations of a POI-based approach\nA main issue of the approach is that is considers \"yes/no\" for a \"15-minute\" city - there is no means to compare locations. A location that has 20+ of each category is viewed **equally** to a location that has only 1 of each category. Likewise, a location with 20+ for all categories except 0 for culture _would not_ qualify, but a location with only 1 for each _would_ qualify. There is a scale of potential results, not just \"yes/no\".\n\nTargomo uses the [Location Scoring API](https://www.targomo.com/developers/apis/location_scoring/) to pre-calculate national coverages, allowing instant comparison of a location against all other locations. Feel free to [contact us](https://www.targomo.com/about-us/contact-us/) if interested! ","pinned":false,"hidden":false,"mode":"md"},{"id":474,"value":"### 15-minute measurements","pinned":false,"hidden":false,"mode":"md"},{"id":367,"value":"poiClusters = {\n const { featureCollection, ...poiClusters } = pois;\n return poiClusters;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":297,"value":"is15MinuteCity = Object.entries(poiClusters).every((d) => d[1] > 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":314,"value":"allEmpty = Object.entries(poiClusters).every((d) => d[1] === 0)","pinned":false,"hidden":false,"mode":"ojs"},{"id":285,"value":"clusterMeta = ({\n food: {\n color: \"#e15759\",\n icon: await FileAttachment(\"food.png\").url(),\n name: \"food\"\n },\n culture: {\n color: \"#4e79a7\",\n icon: await FileAttachment(\"culture.png\").url(),\n name: \"culture\"\n },\n education: {\n color: \"#76b7b2\",\n icon: await FileAttachment(\"education.png\").url(),\n name: \"education\"\n },\n health: {\n color: \"#59a14f\",\n icon: await FileAttachment(\"health.png\").url(),\n name: \"health\"\n },\n leisure: {\n color: \"#f28e2c\",\n icon: await FileAttachment(\"leisure.png\").url(),\n name: \"leisure\"\n },\n transit: {\n color: \"#A176B7\",\n icon: await FileAttachment(\"transit.png\").url(),\n name: \"transit\"\n }\n})","pinned":false,"hidden":false,"mode":"ojs"},{"id":36,"value":"resourcesSpacer","pinned":false,"hidden":false,"mode":"ojs"},{"id":172,"value":"viewof mapMarker = {\n const inp = Inputs.input({ lat: 48.861133, lng: 2.335332 });\n const marker = new maplibre.Marker({\n draggable: true\n })\n .setLngLat({ lat: 48.861133, lng: 2.335332 })\n .addTo(map);\n\n marker.on(\"dragend\", () => {\n inp.value = marker.getLngLat();\n inp.dispatchEvent(new Event(\"input\", { bubbles: true }));\n });\n return inp;\n}","pinned":false,"hidden":false,"mode":"ojs"},{"id":74,"value":"$35","pinned":false,"hidden":false,"mode":"ojs"},{"id":33,"value":"import {\n targomoKey,\n tgmIntro,\n resourcesSpacer,\n codeStyle,\n tgmCoreClient,\n attribution\n} from \"@targomo/re-usable-targomo-resources\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":169,"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":441,"value":"turf = require(\"@turf/turf@5\")","pinned":false,"hidden":false,"mode":"ojs"},{"id":49,"value":"import { chart, poiHierarchy } from \"@targomo/poi-hierarchy\"","pinned":false,"hidden":false,"mode":"ojs"},{"id":397,"value":"","pinned":false,"hidden":false,"mode":"html"},{"id":40,"value":"codeStyle","pinned":false,"hidden":false,"mode":"ojs"}],"files":"$W36","stdlib":"1","titling":"auto"}