3e:null 3f:["$","title",null,{"children":"Nearest Panorama Photo | Bert Spaan | Observable"}] 45:T566,function* display (center, geojson) { let parent = DOM.element('div', { class: 'map-container' }) let container = parent.appendChild(DOM.element('div')) let crossHair = parent.appendChild(DOM.element('div', { class: 'crosshair' })) yield parent let map = L.map(container, { minZoom: 13, maxZoom: 19 }).setView(center.value, 19) let osmLayer = L.tileLayer('https://b.basemaps.cartocdn.com/light_all/{z}/{x}/{y}.png', { attribution: 'Wikimedia maps beta | © OpenStreetMap contributors', maxZoom: 19 }).addTo(map) map.on('moveend', () => { center.value = [ map.getCenter().lat, map.getCenter().lng ] }) function createPanoramaMarker (feature, latlng) { let options = { radius: 8, fillColor: '#4562fe', color: 'black', weight: 2, opacity: 1, fillOpacity: 0.8 } return L.circleMarker(latlng, options) } let geojsonLayer = L.geoJSON(geojson.value, { pointToLayer: createPanoramaMarker }).addTo(map) function updateData () { geojsonLayer.clearLayers() geojsonLayer.addData(geojson.value) } updateData() geojson.addEventListener('input', updateData) return Generators.disposable(container, () => { geojson.removeEventListener('input', updateData) }) }46:[] 43:{"id":"de273d1f54168a80","slug":"nearest-panorama-photo","title":"Nearest Panorama Photo","thumbnail":"5d3fc2731773daeb7cd499ddcb3cf565f10bf529c5839b4114c236234dcf317c","access_level":"public","create_time":"$D2019-03-19T10:29:57.421Z","update_time":"$D2020-11-12T21:17:03.752Z","view_time":null,"first_public_time":"$D2019-03-19T10:48:28.953Z","has_unpublished_edits":null,"fork":{"id":"ad70a78c02de96be","slug":"amsterdam-panorama-api","title":"Amsterdam Panorama API","owner":{"id":"569e0b420e4a1957","login":"bertspaan","name":"Bert Spaan"}},"stars":0,"starred":false,"owner":{"type":"team","id":"569e0b420e4a1957","login":"bertspaan","name":"Bert Spaan","avatar_url":"https://avatars-next.observableusercontent.com/30e87702a8b688510b4d1c30f411d16532c7d46a100044235468810a711ae98d","tier":"starter_2024","bio":""},"version":833,"publish_version":833,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf3b6e1e3dc67c1f","login":"bertspaan","name":"Bert Spaan","avatar_url":"https://avatars-next.observableusercontent.com/30e87702a8b688510b4d1c30f411d16532c7d46a100044235468810a711ae98d","tier":null,"bio":""}],"members":[{"type":"individual","id":"bf3b6e1e3dc67c1f","login":"bertspaan","name":"Bert Spaan","avatar_url":"https://avatars-next.observableusercontent.com/30e87702a8b688510b4d1c30f411d16532c7d46a100044235468810a711ae98d","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"titling":"auto","title":"Nearest Panorama Photo","cells":[{"id":0,"value":"md`# Nearest Panorama Photo\n\nA simple example that shows how to use the [Amsterdam Panorama API](https://api.data.amsterdam.nl/panorama/) to get the nearest panorama photo to a specific location.\n\n__Move the map and see what happens!__\n\nThis example is using [axios](https://github.com/axios/axios) for API requests.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"map = display(viewof center, viewof geojson)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"{\n if (!panorama || !panorama._links) {\n return html`

No panorama photo found within ${radius} meters!

`\n }\n \n return html`\n

`\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":813,"value":"{\n if (panorama) {\n return md`Open this photo on [data.amsterdam.nl](https://data.amsterdam.nl/data/panorama/${panorama.pano_id}).`\n } else {\n return md``\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":821,"value":"md`\n## API results\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":824,"value":"md`\n\\`\\`\\`json\n${JSON.stringify(panorama, null, 2)}\n\\`\\`\\`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"panorama = getNearest(center, radius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`\n## Constants\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":742,"value":"radius = 250","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`\n## Functions & Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":786,"value":"feature = {\n if (!panorama || !panorama.geometry) {\n return\n }\n \n return {\n type: 'Feature',\n properties: {\n id: panorama.pano_id\n },\n geometry: panorama.geometry\n }\n}","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"getNearest = (point, radius) => fetchJson(`https://api.data.amsterdam.nl/panorama/panoramas/?\nsrid=4326&near=${point[1]},${point[0]}&radius=${radius}&page_size=1`)\n .then((results) => results._embedded.panoramas[0])","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"(viewof geojson).value = ({\n type: 'FeatureCollection',\n features: [feature]\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":64,"value":"viewof center = new View([52.37052, 4.90058])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":235,"value":"viewof geojson = new View({\n type: 'FeatureCollection',\n features: []\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":71,"value":"$45","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"fetchJson = (url) => axios.get(url) \n .then((response) => response.data)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"css = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"leafletCss = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"import { View } from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"turf = require('@turf/turf')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"},{"id":804,"value":"axios = require('axios@0.18.0/dist/axios.js')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","tool":"$undefined","providerMetadata":"$undefined","attachments":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W46","stdlib":"1"}} 44:"$43:body"