2c:null 2d:["$","title",null,{"children":"Location based services with Valhalla Isochrones and Overpass | Chris | Observable"}] 32:T747,createMap = function (L, view = [46.99758, 2.81834], zoom = 10) { const container = html`

`; var isoLayer = L.featureGroup(); var resultsLayer = L.featureGroup(); const map = L.map(container, { layers: [isoLayer, resultsLayer] }).setView( view, zoom ); L.tileLayer( "https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png", { attribution: "© OpenStreetMap contributors" } ).addTo(map); var markers = []; map.on("click", (e) => { // check for previous markers if (markers.length > 0) { map.removeLayer(markers[0]); markers = []; isoLayer.clearLayers(); resultsLayer.clearLayers(); } const loadingControl = L.control.loading({ position: "bottomleft" }); loadingControl.addTo(map); const markerPosition = [e.latlng.lat, e.latlng.lng]; const marker = new L.Marker(markerPosition); marker.addTo(map); map.setView(markerPosition, 14); markers.push(marker); fetchIsochrone(...markerPosition).then((poly) => { const line = L.geoJSON(poly, isoStyle); line.addTo(isoLayer); overpass(poly.geometry.coordinates).then((response) => { response.elements.forEach((element) => { const color = `#${ data[amenities.indexOf(element.tags.amenity) * 10].hex }`; const marker = new L.circleMarker([element.lat, element.lon], { ...amenityStyle, color: color, fillColor: color }); marker.bindPopup( `

${element.tags.amenity}

${element.tags.name}

` ); marker.addTo(resultsLayer); }); map.removeControl(loadingControl); }); }); }); container.value = map; return container; }33:[] 30:{"id":"4423b0894d8d77a5","slug":"location-based-services","title":"Location based services with Valhalla Isochrones and Overpass","thumbnail":"1458bab7fae5f16f51fd3c7858f21584b4e3820ac55ae6acc764dcfef3f586f8","access_level":"public","create_time":"$D2022-05-17T06:12:14.255Z","update_time":"$D2024-02-16T12:37:41.241Z","view_time":null,"first_public_time":"$D2022-05-28T09:01:51.853Z","has_unpublished_edits":null,"fork":false,"stars":8,"starred":false,"owner":{"type":"team","id":"b3cbcf8cea7592d7","login":"chrstnbwnkl","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/c78ca7d50d746a4e6b46bca4bfcfb94104fa40427f57416db9d2a19925d11e9e","tier":"starter_2024","bio":""},"version":566,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"3d80c2781ca2cc46","login":"chrstnbwnkl","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/a658e60d1a094188a4081d754368a023daa77ddf9ef81c9e933474fdff5424ad","tier":null,"bio":""}],"members":[{"type":"individual","id":"3d80c2781ca2cc46","login":"chrstnbwnkl","name":"Chris","avatar_url":"https://avatars-next.observableusercontent.com/a658e60d1a094188a4081d754368a023daa77ddf9ef81c9e933474fdff5424ad","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":true,"trashed":false,"lapsed":null,"subscribed":null,"forks":2,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Location based services with Valhalla Isochrones and Overpass","cells":[{"id":0,"value":"# Location based services with Valhalla Isochrones and Overpass\nThis notebook demonstrates how easy it is to spin up a [location based services (LBS)](https://en.wikipedia.org/wiki/Location-based_service) web app all with technology from the OpenStreetMap ecosystem. Just select one or multiple OSM amenity categories and click somewhere on a map to see how many of these can be reached within 15 minutes walking from the clicked point.\n\nIn the engine room, this notebook uses [Valhalla](https://valhalla.openstreetmap.de/) for the isochrones, [Overpass API](http://overpass-api.de/) for locating POIs, and [OSM taginfo](https://taginfo.openstreetmap.org/) for retrieving popular amenity categories. \n\n(Also, thanks to [@leoyuholo](https://observablehq.com/@leoyuholo) for involuntarily creating a web color repository I could easily hook into!)","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":534,"value":"### 1. Select Categories","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":423,"value":"viewof selectedAmenities = Inputs.select(amenities, {\n label: \"OSM amenity categories by popularity (showing 40)\",\n value: [\"restaurant\"],\n multiple: true\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":536,"value":"### 2. Click anywhere on the map!\nYou might have to click on the empty whitespace left to the map after changing the categories for the map to render properly.","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":30,"value":"viewof map = createMap(L, [51, 7])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"___","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":21,"value":"## Appendix","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":504,"value":"import { data } from \"@leoyuholo/word-cloud-of-color-names\"","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":508,"value":"htl.html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":120,"value":"$32","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":163,"value":"fetchIsochrone = (lat, lng) => {\n const request = `https://valhalla1.openstreetmap.de/isochrone?json={\"locations\":[{\"lat\":${lat},\"lon\":${lng}}],\"costing\":\"pedestrian\",\"contours\":[{\"time\":15.0}]}`;\n const cors = \"https://mycors-3.herokuapp.com/\";\n const poly = axios.get(request).then((res) => {\n const feat = res.data.features[0];\n feat.geometry.type = \"Polygon\";\n feat.geometry.coordinates = [feat.geometry.coordinates];\n return feat;\n });\n return poly;\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":289,"value":"overpass = (poly) => {\n const formattedPoly = poly[0].map((t) => `${t[1]} ${t[0]}`).join(\" \");\n const query = `[out:json]\n[timeout:25];\n( \n${selectedAmenities\n .map((a) => `node[\"amenity\"=\"${a}\"](poly: \"${formattedPoly}\");`)\n .join(\"\\n\")}\n);\nout;\n>;\nout skel qt;\n`;\n console.log(`https://lz4.overpass-api.de/api/interpreter?data=${query}`);\n return fetch(\n `https://lz4.overpass-api.de/api/interpreter?data=${query}`\n ).then((response) => response.json());\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":431,"value":"amenities = fetch(\n \"https://taginfo.openstreetmap.org/api/4/key/values?key=amenity&filter=all&lang=en&sortname=count&sortorder=desc&page=1&rp=40&qtype=value\"\n)\n .then((res) => res.json())\n .then((d) => d.data.map((el) => el.value))\n .catch((err) => err)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":365,"value":"amenityStyle = {\n return {\n stroke: true,\n color: \"#f0b411\",\n fillOpacity: 0.3,\n fillColor: \"#f0b411\",\n radius: 3\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":388,"value":"isoStyle = {\n return {\n color: \"#2bb542\",\n fillOpacity: 0.1,\n fillColor: \"#2bb542\",\n weight: 3\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"L = require(\"leaflet@1.8.0\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":349,"value":"extendLeaflet = {\n L.Control.Loading = L.Control.extend({\n onAdd: function (map) {\n var p = L.DomUtil.create(\"p\");\n\n p.textContent = `Loading amenieties of type(s) ${selectedAmenities.join(\", \")}...`;\n p.id = \"loader\";\n p.style = \"font-size: 1.3em;\";\n return p;\n },\n\n onRemove: function (map) {\n L.DomUtil.remove(L.DomUtil.get(\"loader\"));\n }\n });\n\n L.control.loading = function (opts) {\n return new L.Control.Loading(opts);\n };\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":323,"value":"","pinned":false,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"","database":"$undefined"},{"id":52,"value":"axios = require('axios@0.18.0/dist/axios.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":473,"value":"manualDOMEdits = {\n setTimeout(() => {\n const el = document.getElementsByTagName(\"select\");\n el[0].childNodes.forEach((e, i) => {\n e.id = amenities[i - 1];\n });\n }, 2000);\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W33","stdlib":"1"}} 31:"$30:body"