2d:null 2e:["$","title",null,{"children":"Amsterdam Panorama API | Bert Spaan | Observable"}] 33:T703,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) { const radius = feature.properties.current ? 10 : 5 let options = { radius, fillColor: color(feature.properties.year), color: 'black', weight: 2, opacity: 1, fillOpacity: 0.8 } return L.circleMarker(latlng, options) } function onEachFeature(feature, layer) { if (feature.properties && feature.properties.panoramaId) { const panoramaId = feature.properties.panoramaId layer.bindPopup(`

`); } } let geojsonLayer = L.geoJSON(geojson.value, { pointToLayer: createPanoramaMarker, onEachFeature }).addTo(map) function updateData () { geojsonLayer.clearLayers() geojsonLayer.addData(geojson.value) } updateData() geojson.addEventListener('input', updateData) return Generators.disposable(container, () => { geojson.removeEventListener('input', updateData) }) }34:[] 31:{"id":"ad70a78c02de96be","slug":"amsterdam-panorama-api","title":"Amsterdam Panorama API","thumbnail":"4521558a61e02f416d457b46c8d1c59d2174bb7b1e55442e6e902d4eada4710c","access_level":"public","create_time":"$D2018-08-22T15:18:11.163Z","update_time":"$D2018-12-17T07:40:03.601Z","view_time":null,"first_public_time":"$D2018-08-28T12:54:29.218Z","has_unpublished_edits":null,"fork":false,"stars":1,"starred":false,"owner":{"type":"team","id":"569e0b420e4a1957","login":"bertspaan","name":"Bert Spaan","avatar_url":"https://avatars-next.observableusercontent.com/30e87702a8b688510b4d1c30f411d16532c7d46a100044235468810a711ae98d","tier":"starter_2024"},"version":706,"publish_version":706,"role":null,"authored":false,"authors":[{"type":"individual","id":"bf3b6e1e3dc67c1f","login":"bertspaan","name":"Bert Spaan","avatar_url":"https://avatars-next.observableusercontent.com/30e87702a8b688510b4d1c30f411d16532c7d46a100044235468810a711ae98d","tier":null}],"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":1,"collection":null,"type":"notebook","body":{"title":"Amsterdam Panorama API","cells":[{"id":0,"value":"md`# Amsterdam Panorama API\nNotebook with research on new functionality for Amsterdam's panorama photo API.\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":68,"value":"map = display(viewof center, viewof geojson)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":454,"value":"html`\n

\n ${arrayFromRange(years).map((year, i) => html`\n

\n \n \n \n ${year}\n \n

\n `)}\n

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":339,"value":"viewof selector = radio({\n title: 'Select API server',\n options: endpoints.map((endpoint, index) => ({label: endpoint.label, value: index})),\n value: 0\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":548,"value":"endpoint = endpoints[selector]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":478,"value":"panoramaId = getNearest(endpoint, center, radius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":609,"value":"panorama = getPanorama(endpoint, panoramaId)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":601,"value":"adjacencies = getAdjacencies(endpoint, panoramaId)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":634,"value":"features = getFeatures(endpoint, panorama, adjacencies)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":3,"value":"html`

`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":82,"value":"center","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":456,"value":"years = [2016, 2019]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":358,"value":"color = d3.scaleSequential(d3.interpolateYlGnBu).domain(years)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":188,"value":"(viewof geojson).value = ({\n type: 'FeatureCollection',\n features\n})","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":147,"value":"md`\n## Constants\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":537,"value":"endpoints = [\n {label: 'api.datapunt.amsterdam.nl (old)', url: 'https://api.data.amsterdam.nl/panorama', type: 'old'},\n {label: 'api.datapunt.amsterdam.nl (new)', url: 'https://api.data.amsterdam.nl/panorama', type: 'new'}, \n {label: 'acc.api.datapunt.amsterdam.nl (old)', url: 'https://acc.api.data.amsterdam.nl/panorama', type: 'old'},\n {label: 'acc.api.datapunt.amsterdam.nl (new)', url: 'https://acc.api.data.amsterdam.nl/panorama', type: 'new'},\n {label: 'http://localhost:8000', url: 'http://localhost:8000/panorama', type: 'new'}\n]","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":129,"value":"radius = 22","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":24,"value":"height = 500","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":108,"value":"md`\n## Functions & Imports\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":521,"value":"getNearest = (endpoint, point, radius) => \n endpoint.type === 'new' ? getNearestNew(endpoint.url, point, radius) : getNearestOld(endpoint.url, point, radius)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":527,"value":"getNearestNew = (url, point, radius) => fetchJson(`${url}/panoramas/?\nsrid=4326&near=${point[1]},${point[0]}&radius=${radius}&page_size=1&newest_in_range=true`)\n .then((results) => results._embedded.panoramas[0].pano_id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":529,"value":"getNearestOld = (url, point, radius) => fetchJson(`${url}/thumbnail/?lat=${point[0]}&lon=${point[1]}&radius=${radius}`)\n .then((thumbnail) => thumbnail.pano_id)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":641,"value":"getPanorama = (endpoint, panoId) => \n endpoint.type === 'new' ? getPanoramaNew(endpoint.url, panoId) : getPanoramaOld(endpoint.url, panoId)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":655,"value":"getPanoramaOld = (url, panoramaId) => fetchJson(`${url}/opnamelocatie/${panoramaId}/`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":659,"value":"getPanoramaNew = (url, panoramaId) => fetchJson(`${url}/panoramas/${panoramaId}/`)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":589,"value":"getAdjacencies = (endpoint, panoramaId) => \n endpoint.type === 'new' ? getAdjacenciesNew(endpoint.url, panoramaId) : getAdjacenciesOld(endpoint.url, panoramaId)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":593,"value":"getAdjacenciesNew = (url, panoramaId) => fetchJson(`${url}/panoramas/${panoramaId}/adjacencies?\nradius=${radius}&newest_in_range=true`)\n .then((results) => results._embedded.adjacencies.filter((adjacency) => adjacency.direction))","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":591,"value":"getAdjacenciesOld = (url, panoramaId) => fetchJson(`${url}/recente_opnames/alle/${panoramaId}`)\n .then((results) => results.adjacent)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":628,"value":"getFeatures = (endpoint, panorama, adjacencies) => \n endpoint.type === 'new' ? getFeaturesNew(panorama, adjacencies) : getFeaturesOld(panorama, adjacencies)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":621,"value":"getFeaturesOld = (panorama, adjacencies) => ([\n {\n type: 'Feature',\n properties: {\n panoramaId: panorama.pano_id,\n timestamp: panorama.timestamp,\n year: panorama.timestamp.slice(0, 4),\n current: true\n },\n geometry: panorama.geometrie\n },\n ...adjacencies.map((adjacency) => ({\n type: 'Feature',\n properties: {\n panoramaId: adjacency.pano_id,\n year: adjacency.year\n },\n geometry: turf.destination(panorama.geometrie, adjacency.distance / 1000, adjacency.heading, {\n units: 'kilometers'\n }).geometry\n }))\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":623,"value":"getFeaturesNew = (panorama, adjacencies) => ([\n {\n type: 'Feature',\n properties: {\n panoramaId: panorama.pano_id,\n timestamp: panorama.timestamp,\n year: panorama.timestamp.slice(0, 4),\n current: true\n },\n geometry: panorama.geometry\n },\n ...adjacencies.map((adjacency) => ({\n type: 'Feature',\n properties: {\n panoramaId: adjacency.pano_id,\n year: adjacency.timestamp.slice(0, 4)\n },\n geometry: adjacency.geometry\n }))\n])","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":463,"value":"arrayFromRange = (range) => Array(range[1] - range[0] + 1).fill(null).map((u, i) => range[0] + i)","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$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","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","output":"$undefined","database":"$undefined"},{"id":71,"value":"$33","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":125,"value":"fetchJson = (url) => fetch(url) \n .then((response) => response.json())","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":402,"value":"css = html`\n`","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"leafletCss = html``","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":22,"value":"L = require('leaflet@1.2.0')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":115,"value":"import { View } from '@mbostock/synchronized-views'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":341,"value":"import {radio} from '@jashkenas/inputs'","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":356,"value":"d3 = require(\"d3@5\")","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":258,"value":"turf = require('@turf/turf')","pinned":false,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W34","stdlib":"1","titling":"auto"}} 32:"$31:body"