2b:null 2c:["$","title",null,{"children":"Holiday Souvenir CC-BY | 🪦 dv develop 2026 spring | Observable"}] 31:Td47,map = { const div = html`

`; const map = new mapboxgl.Map({ container: div, style: "mapbox://styles/mapbox/streets-v12", center: [-0.12, 51.51], zoom: 12 }); map.on("load", () => { // Full faint route map.addSource("full-track", { type: "geojson", data: trackGeo }); map.addLayer({ id: "full-track-line", type: "line", source: "full-track", paint: { "line-color": "#111", "line-width": 5, "line-opacity": 0.25 } }); // Animated route map.addSource("animated-track", { type: "geojson", data: { type: "Feature", geometry: { type: "LineString", coordinates: [trackCoords[0]] } } }); map.addLayer({ id: "animated-track-line", type: "line", source: "animated-track", paint: { "line-color": "#ff3b30", "line-width": 5, "line-opacity": 0.95 } }); // Moving dot map.addSource("moving-point", { type: "geojson", data: { type: "Feature", geometry: { type: "Point", coordinates: trackCoords[0] } } }); map.addLayer({ id: "moving-point-dot", type: "circle", source: "moving-point", paint: { "circle-radius": 8, "circle-color": "#007aff", "circle-stroke-color": "white", "circle-stroke-width": 2 } }); // Photo markers for (const p of photoStops) { const el = document.createElement("div"); el.style.width = "48px"; el.style.height = "48px"; el.style.borderRadius = "50%"; el.style.backgroundImage = `url(${p.image})`; el.style.backgroundSize = "cover"; el.style.backgroundPosition = "center"; el.style.border = "3px solid white"; el.style.boxShadow = "0 2px 8px rgba(0,0,0,0.4)"; el.style.cursor = "pointer"; new mapboxgl.Marker({ element: el, anchor: "center" }) .setLngLat([Number(p.lon), Number(p.lat)]) .setPopup( new mapboxgl.Popup({ offset: 30, maxWidth: "260px" }) .setHTML(`

${p.name}

${p.note}

Track time: ${p.time ?? ""}

`) ) .addTo(map); } // Animation let i = 0; const speed = 3; function animate() { i = (i + speed) % trackCoords.length; const traveled = trackCoords.slice(0, i + 1); map.getSource("animated-track").setData({ type: "Feature", geometry: { type: "LineString", coordinates: traveled.length > 1 ? traveled : [trackCoords[0], trackCoords[0]] } }); map.getSource("moving-point").setData({ type: "Feature", geometry: { type: "Point", coordinates: trackCoords[i] } }); requestAnimationFrame(animate); } animate(); }); return div; } // for some reason, my photos are cannot be pinned onto the map! they are moving around when you zoom in/out. they are usually south of the actual track32:[{"id":"dac1ded49575687ae8953aaf058f025c02e3b913a52b196f7ed8a50e1330bbd6b756fb705127fa2cbd1f6c28f8113789a03332fad8eb170210fe90fce771cf3f","href":"https://static.observableusercontent.com/files/dac1ded49575687ae8953aaf058f025c02e3b913a52b196f7ed8a50e1330bbd6b756fb705127fa2cbd1f6c28f8113789a03332fad8eb170210fe90fce771cf3f","name":"bigben.jpg","type":"image/heic","lastModified":1778601986094.472,"size":1572459},{"id":"55fc5fc8f225ba56c56701d1e2a0efe794d1df782eae288ee4cd0bb4dab469aa04eaf2b9afd5ed3fe0844b934bd18c2306610ae8e50b9968ed9849051ef76331","href":"https://static.observableusercontent.com/files/55fc5fc8f225ba56c56701d1e2a0efe794d1df782eae288ee4cd0bb4dab469aa04eaf2b9afd5ed3fe0844b934bd18c2306610ae8e50b9968ed9849051ef76331","name":"piccadilly.jpg","type":"image/heic","lastModified":1778601986226.134,"size":1795188},{"id":"c2ea125f2781d46de5460de23fed4a5887774e28dcba599db55e101852f3d7a41ea35e20637a67c22bfc1afaf32352911c9d0da001eea743d6ca52d688acf9ac","href":"https://static.observableusercontent.com/files/c2ea125f2781d46de5460de23fed4a5887774e28dcba599db55e101852f3d7a41ea35e20637a67c22bfc1afaf32352911c9d0da001eea743d6ca52d688acf9ac","name":"fabric.jpg","type":"image/heic","lastModified":1778601984592.804,"size":843991},{"id":"0579777f8b7918caf0514bcd75e99cf7a4661178dac17dc3dbbd87e0b03ec0bcb7039d0af570f4a9c1d3a76115d5d223a2debc9f7ef2cf373d548feb48c98352","href":"https://static.observableusercontent.com/files/0579777f8b7918caf0514bcd75e99cf7a4661178dac17dc3dbbd87e0b03ec0bcb7039d0af570f4a9c1d3a76115d5d223a2debc9f7ef2cf373d548feb48c98352","name":"london_track_clean.csv","type":"text/csv","lastModified":1778601518192.819,"size":132799},{"id":"4acfdf95fbfca2dd7fa4eda46b7627e9f4fde0ebe99bfab0c44c7df20ac481485a03c966b5fbd555e4e4a38706287ba3a33ca3282acf555e11b9ea8de2b9b16b","href":"https://static.observableusercontent.com/files/4acfdf95fbfca2dd7fa4eda46b7627e9f4fde0ebe99bfab0c44c7df20ac481485a03c966b5fbd555e4e4a38706287ba3a33ca3282acf555e11b9ea8de2b9b16b","name":"london_track.geojson","type":"application/geo+json","lastModified":1778601518160.91,"size":28151}] 2f:{"id":"def37a87d6e4eb2d","slug":"holiday-souvenir-mulu","title":"Holiday Souvenir CC-BY","thumbnail":"49e3b8e7b5c25c76853ac31b4ed41e895e2facb91573182f4e68e995d0ccb899","access_level":"public","create_time":"$D2026-05-12T15:54:50.797Z","update_time":"$D2026-05-12T17:44:53.880Z","view_time":null,"first_public_time":"$D2026-05-12T17:44:14.556Z","fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9409263e557ef66a","login":"dv-develop-2026s","name":"🪦 dv develop 2026 spring","avatar_url":"https://avatars-next.observableusercontent.com/83690145de7111a45dea712eea168cd084ea0cae2d94bdcfa6f9f12e6402cad6","tier":"pro_2024"},"version":94,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"6e444eaccd877d04","login":"mulugeta-tewelde","name":"Mulugeta Tewelde","avatar_url":"https://avatars-next.observableusercontent.com/b0194f8312ba252ccbcdbb7a10256284bcd26a5c688ccb09225293e58aad107c","tier":null}],"members":[{"type":"team","id":"9409263e557ef66a","login":"dv-develop-2026s","name":"🪦 dv develop 2026 spring","avatar_url":"https://avatars-next.observableusercontent.com/83690145de7111a45dea712eea168cd084ea0cae2d94bdcfa6f9f12e6402cad6","tier":"pro_2024","role":"editor"},{"type":"individual","id":"6e444eaccd877d04","login":"mulugeta-tewelde","name":"Mulugeta Tewelde","avatar_url":"https://avatars-next.observableusercontent.com/b0194f8312ba252ccbcdbb7a10256284bcd26a5c688ccb09225293e58aad107c","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Holiday Souvenir CC-BY","cells":[{"id":0,"value":"# Holiday Souvenir CC-BY","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"trackGeo = FileAttachment(\"london_track_clean.csv\").csv({typed: true})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"bounds = ({\n x1: d3.min(trackGeo, d => d.lon),\n x2: d3.max(trackGeo, d => d.lon),\n y1: d3.min(trackGeo, d => d.lat),\n y2: d3.max(trackGeo, d => d.lat)\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":11,"value":"viewof colorBy = Inputs.select(\n [\"time of day\", \"speed\", \"distance\"],\n {label: \"Color track by\"}\n)","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":13,"value":"colorValue = d => \n colorBy === \"speed\" ? d.speed_kmh :\n colorBy === \"distance\" ? d.cum_km :\n d.hour","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":15,"value":"Plot.plot({\n width: 850,\n height: 650,\n margin: 35,\n aspectRatio: 1,\n x: {domain: [bounds.x1, bounds.x2], label: \"Longitude\"},\n y: {domain: [bounds.y1, bounds.y2], label: \"Latitude\"},\n color: {\n legend: true,\n label: colorBy,\n scheme: colorBy === \"speed\" ? \"turbo\" : \"viridis\"\n },\n marks: [\n Plot.line(trackGeo, {\n x: \"lon\",\n y: \"lat\",\n z: null,\n stroke: colorValue,\n strokeWidth: d => 1.5 + Math.min(d.speed_kmh, 8) / 3,\n curve: \"linear\",\n title: d => `Time: ${d.time}\nDistance: ${d.cum_km.toFixed(2)} km\nSpeed: ${d.speed_kmh.toFixed(1)} km/h`\n }),\n\n Plot.dot(souvenirPoints, {\n x: \"lon\",\n y: \"lat\",\n r: 8,\n fill: \"type\",\n stroke: \"white\",\n strokeWidth: 2,\n title: d => `${d.name}\n${d.note}`\n }),\n\n Plot.text(souvenirPoints, {\n x: \"lon\",\n y: \"lat\",\n text: \"name\",\n dy: -14,\n fontSize: 12,\n fontWeight: \"bold\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":17,"value":"viewof progress = Inputs.range([0, trackGeo.length - 1], {\n step: 1,\n value: 0,\n label: \"Move through the trip\"\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":19,"value":"Plot.plot({\n width: 850,\n height: 650,\n margin: 35,\n x: {domain: [bounds.x1, bounds.x2]},\n y: {domain: [bounds.y1, bounds.y2]},\n color: {legend: true, scheme: \"viridis\"},\n marks: [\n Plot.line(trackGeo.slice(0, progress + 1), {\n x: \"lon\",\n y: \"lat\",\n stroke: \"cum_km\",\n strokeWidth: 3\n }),\n\n Plot.dot([trackGeo[progress]], {\n x: \"lon\",\n y: \"lat\",\n r: 10,\n fill: \"red\",\n title: d => `Time: ${d.time}\nDistance: ${d.cum_km.toFixed(2)} km`\n }),\n\n Plot.dot(souvenirPoints, {\n x: \"lon\",\n y: \"lat\",\n r: 7,\n fill: \"type\",\n stroke: \"white\"\n })\n ]\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":25,"value":"piccadilly = FileAttachment(\"piccadilly.jpg\").url()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":27,"value":"bigben = FileAttachment(\"bigben.jpg\").url()\n","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":29,"value":"fabric = FileAttachment(\"fabric.jpg\").url()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":31,"value":"mapboxgl = require(\"mapbox-gl@2.15.0\")","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":33,"value":"mapboxgl.accessToken = \"pk.eyJ1IjoiZGlzc3RvY2tob2xtIiwiYSI6ImNtajdoMmF1cDAzdnUzam9jem9nMWw3aGIifQ.RRyc7B8ky_lk2UD_YIZzQg\"","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":45,"value":"$31","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":52,"value":"trackCoords = track.features[0].geometry.coordinates","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":54,"value":"track = FileAttachment(\"london_track.geojson\").json()","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":60,"value":"souvenirPoints = [\n {\n name: \"Piccadilly Circus\",\n lon: -0.1340,\n lat: 51.5101,\n image: piccadilly,\n note: \"One of the main visual memories from the trip.\"\n },\n {\n name: \"Big Ben\",\n lon: -0.1246,\n lat: 51.5007,\n image: bigben,\n note: \"Classic London landmark stop.\"\n },\n {\n name: \"Fabric\",\n lon: -0.1027,\n lat: 51.5196,\n image: fabric,\n note: \"Nightlife stop not on the route, was night before :).\"\n }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":81,"value":"nearestTrackPoint = (lon, lat) => {\n let best = trackGeo[0];\n let bestDist = Infinity;\n\n for (const d of trackGeo) {\n const dist = Math.hypot(d.lon - lon, d.lat - lat);\n\n if (dist < bestDist) {\n best = d;\n bestDist = dist;\n }\n }\n\n return best;\n}","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":84,"value":"rawPhotoStops = [\n { name: \"Piccadilly Circus\", lon: -0.1340, lat: 51.5101, image: piccadilly, note: \"Piccadilly stop.\" },\n { name: \"Big Ben\", lon: -0.1246, lat: 51.5007, image: bigben, note: \"Big Ben stop.\" },\n { name: \"Fabric\", lon: -0.1027, lat: 51.5196, image: fabric, note: \"Fabric stop.\" }\n]","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":86,"value":"photoStops = rawPhotoStops.map(p => {\n const nearest = nearestTrackPoint(p.lon, p.lat);\n\n return {\n ...p,\n lon: nearest.lon,\n lat: nearest.lat,\n time: nearest.time\n };\n})","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W32","stdlib":"1","titling":"auto"}} 30:"$2f:body"