27:null 28:["$","title",null,{"children":"Habitat Atlas Map2 | Ivy | Observable"}] 2d:T426,locations = [ {name: "London", lat: 51.5074, lon: -0.1278, date: "May 6", note: "Arrival, Interview at Natural Building Systems", group: "uk"}, {name: "Oxford", lat: 51.7520, lon: -1.2577, date: "May 10", note: "", group: "uk"}, {name: "Elmswell", lat: 52.2370, lon: 0.9190, date: "May 9", note: "Interview with Clay Fields Resident", group: "uk"}, {name: "Cromford", lat: 53.1114, lon: -1.5567, date: "May 11-12", note: "Interview and Workshop with Alex Sparrow", group: "uk"}, {name: "Manchester", lat: 53.4808, lon: -2.2426, date: "May 14", note: "Flight to Paris", group: "uk"}, {name: "Paris", lat: 48.8566, lon: 2.3522, date: "May 14-17", note: "", group: "eu"}, {name: "Dijon", lat: 47.3220, lon: 5.0415, date: "May 17", note: "", group: "eu"}, {name: "Belleherbe", lat: 47.2333, lon: 6.8833, date: "May 17-21", note: "Interviews at Eco-Village", group: "eu"}, {name: "Ghent", lat: 51.0543, lon: 3.7174, date: "May 23", note: "", group: "eu"}, {name: "Amsterdam", lat: 52.3676, lon: 4.9041, date: "May 23-27", note: "", group: "eu"}, ]2e:T1017,map = { const container = html`

` yield container const map = L.map(container, { center: [50, 2], zoom: 5, minZoom: 2, maxZoom: 12, zoomControl: true, }) // English-only base map L.tileLayer('https://{s}.basemaps.cartocdn.com/light_nolabels/{z}/{x}/{y}@2x.png', { attribution: '© OpenStreetMap © CARTO', subdomains: 'abcd', }).addTo(map) // Styles const style = document.createElement("style") style.textContent = ` .leaflet-container { background: #FFFFFF !important; } .leaflet-tile-pane { filter: saturate(0) brightness(1.05); } .leaflet-overlay-pane { filter: none; } .custom-marker { background: #A67B5B; border: 2px solid #E8D8C8; border-radius: 50%; cursor: pointer; transition: transform 0.15s ease; box-shadow: 0 1px 4px rgba(0,0,0,0.2); } .custom-marker:hover { transform: scale(1.4); } .custom-popup .leaflet-popup-content-wrapper { background: #FDFBF7; border-radius: 4px; box-shadow: 0 2px 8px rgba(0,0,0,0.15); font-family: Georgia, serif; } .custom-popup .leaflet-popup-tip { background: #FDFBF7; } .popup-name { font-weight: bold; font-size: 14px; color: #222; margin-bottom: 2px; } .popup-date { font-size: 12px; color: #666; } .popup-note { font-size: 11px; color: #888; font-style: italic; margin-top: 4px; } ` container.appendChild(style) // Bezier curve function function bezierCurve(start, end, numPoints) { numPoints = numPoints || 40 const lat1 = start[0], lng1 = start[1] const lat2 = end[0], lng2 = end[1] const midLat = (lat1 + lat2) / 2 const midLng = (lng1 + lng2) / 2 const dx = lat2 - lat1 const dy = lng2 - lng1 const dist = Math.sqrt(dx * dx + dy * dy) const offset = dist * 0.2 const ctrlLat = midLat + (-dy / dist) * offset const ctrlLng = midLng + (dx / dist) * offset const points = [] for (let i = 0; i <= numPoints; i++) { const t = i / numPoints const lat = (1-t)*(1-t)*lat1 + 2*(1-t)*t*ctrlLat + t*t*lat2 const lng = (1-t)*(1-t)*lng1 + 2*(1-t)*t*ctrlLng + t*t*lng2 points.push([lat, lng]) } return points } // Multi-segment curved route function curvedRoute(coords) { let allPoints = [] for (let i = 0; i < coords.length - 1; i++) { const segment = bezierCurve(coords[i], coords[i+1]) if (i > 0) segment.shift() allPoints = allPoints.concat(segment) } return allPoints } // Route data const ukCoords = locations.filter(function(d) { return d.group === "uk" }).map(function(d) { return [d.lat, d.lon] }) const euCoords = locations.filter(function(d) { return d.group === "eu" }).map(function(d) { return [d.lat, d.lon] }) const lastUk = ukCoords[ukCoords.length - 1] const firstEu = euCoords[0] // UK route L.polyline(curvedRoute(ukCoords), { color: '#444444', weight: 2, opacity: 0.7, smoothFactor: 0, }).addTo(map) // Flight route (dashed) L.polyline(curvedRoute([lastUk, firstEu]), { color: '#444444', weight: 1.5, opacity: 0.5, dashArray: '8, 6', smoothFactor: 0, }).addTo(map) // Europe route L.polyline(curvedRoute(euCoords), { color: '#444444', weight: 2, opacity: 0.7, smoothFactor: 0, }).addTo(map) // Location markers locations.forEach(function(d) { const marker = L.marker([d.lat, d.lon], { icon: L.divIcon({ className: 'custom-marker', iconSize: [14, 14], iconAnchor: [7, 7], }) }).addTo(map) const popupContent = '' + '' + (d.note ? '' : '') marker.bindPopup(popupContent, { className: 'custom-popup', closeButton: false, offset: [0, -4], }) }) }2f:[] 2b:{"id":"ae88022a63a9ae7a","slug":null,"title":"Habitat Atlas Map2","thumbnail":"c30599640348ccb7d407455dd8281d0fffa16ee7e4da8670af5a4ff34a79d963","access_level":"public","create_time":"$D2026-05-25T23:03:29.363Z","update_time":"$D2026-05-25T23:28:58.764Z","view_time":null,"first_public_time":"$D2026-05-25T23:12:56.359Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"9935a4781ceb9cbf","login":"ivy7","name":"Ivy","avatar_url":"https://avatars-next.observableusercontent.com/343e245d64fbbba5f191d2ab00782c52a3b8cbec9cf1b0b5584d9fecc0683c4b","tier":"starter_2024"},"version":25,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"9a9f32600f5ebdba","login":"xinyu-liang","name":"Xinyu Liang","avatar_url":"https://avatars-next.observableusercontent.com/b373bd8332b69326efc7adc58edc5902f5cf46900ccae6e9520b45977ad423f6","tier":null}],"members":[{"type":"team","id":"9935a4781ceb9cbf","login":"ivy7","name":"Ivy","avatar_url":"https://avatars-next.observableusercontent.com/343e245d64fbbba5f191d2ab00782c52a3b8cbec9cf1b0b5584d9fecc0683c4b","tier":"starter_2024","role":"editor"},{"type":"individual","id":"9a9f32600f5ebdba","login":"xinyu-liang","name":"Xinyu Liang","avatar_url":"https://avatars-next.observableusercontent.com/b373bd8332b69326efc7adc58edc5902f5cf46900ccae6e9520b45977ad423f6","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"Habitat Atlas Map2","cells":[{"id":0,"value":"# Habitat Atlas Map2","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":5,"value":"// Stadia Alidade Smooth（更偏蓝）\nL.tileLayer('https://tiles.stadiamaps.com/tiles/alidade_smooth/{z}/{x}/{y}{r}.png')","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":7,"value":"$2d","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"},{"id":9,"value":"$2e","pinned":true,"hidden":false,"mode":"ojs","author":"$undefined","summary":"$undefined","output":"$undefined","database":"$undefined"}],"files":"$W2f","stdlib":"1","titling":"auto"}} 2c:"$2b:body"