2b:null 2c:["$","title",null,{"children":"Untitled | G.Trebicka | Observable"}] 31:Ta00,import {html} from 'htl' // Load Leaflet and leaflet-providers via Observable’s standard way await Promise.all([ import("https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"), import("https://unpkg.com/leaflet-providers/leaflet-providers.js") ]) // Add Leaflet CSS to the notebook html`` // Create the map container const mapDiv = html`

` // Initialize the map const map = L.map(mapDiv).setView([40.730610, -73.935242], 12); // Custom basemap using Leaflet Providers (e.g., Stamen TonerLite) L.tileLayer.provider('Stamen.TonerLite').addTo(map); // Default marker (Penn Station) L.marker([40.7505, -73.9934]) .addTo(map) .bindPopup("Penn Station (Default Marker)") .bindTooltip("Penn Station") // Custom icon (MTA logo for Times Sq Station) const mtaIcon = L.icon({ iconUrl: 'https://upload.wikimedia.org/wikipedia/commons/thumb/5/5b/NYCS-bull-trans-M.svg/1024px-NYCS-bull-trans-M.svg.png', iconSize: [40, 40], iconAnchor: [20, 40], popupAnchor: [0, -40] }); L.marker([40.7553, -73.9867], { icon: mtaIcon }) .addTo(map) .bindPopup("Times Square - 42nd Street (Custom Icon)") .bindTooltip("Times Sq Subway") // Array for circle marker properties const circleMarkers = [ { lat: 40.7306, lon: -73.9866, color: "red", radius: 10, opacity: 0.8, label: "Restaurant A" }, { lat: 40.7411, lon: -73.9897, color: "green", radius: 15, opacity: 0.6, label: "Restaurant B" }, { lat: 40.7223, lon: -73.9874, color: "blue", radius: 12, opacity: 0.7, label: "Restaurant C" } ]; // Add circle markers circleMarkers.forEach(({ lat, lon, color, radius, opacity, label }) => { L.circleMarker([lat, lon], { color, radius, fillOpacity: opacity }) .addTo(map) .bindPopup(`${label} (Circle Marker)`) .bindTooltip(label) }); // Optional: Add 5 random circle markers for (let i = 0; i < 5; i++) { let randLat = 40.70 + Math.random() * 0.1; let randLon = -74.00 + Math.random() * 0.1; let color = ['purple', 'orange', 'cyan'][Math.floor(Math.random() * 3)]; let radius = Math.random() * 10 + 5; let opacity = Math.random() * 0.5 + 0.5; let label = `Random Marker ${i + 1}`; // ✅ Define label here L.circleMarker([randLat, randLon], { color, radius, fillOpacity: opacity }) .addTo(map) .bindPopup(`${label}
Color: ${color}, Radius: ${radius.toFixed(1)}`) .bindTooltip(label); }) mapDiv 33:[] 2f:{"id":"528f189507f7cd9e","slug":null,"title":"","thumbnail":"4a5ed5e2054cba4269cf93f4cc1cdc263476f7769de89af50477d38380800934","access_level":"public","create_time":"$D2025-04-07T02:08:08.672Z","update_time":"$D2025-04-07T02:18:34.848Z","view_time":null,"first_public_time":"$D2025-04-07T02:08:08.672Z","has_unpublished_edits":null,"fork":false,"stars":0,"starred":false,"owner":{"type":"team","id":"a32913c2b0edac60","login":"trebicka","name":"G.Trebicka","avatar_url":"https://avatars-next.observableusercontent.com/2d7dd637070df728ffb21a3aa5a3e8e282a175feb15bd32fe60a338596b4c5f8","tier":"starter_2024"},"version":16,"publish_version":null,"role":null,"authored":false,"authors":[{"type":"individual","id":"ad8baf6981b63c06","login":"trebicka","name":"G.Trebicka","avatar_url":"https://avatars-next.observableusercontent.com/2d7dd637070df728ffb21a3aa5a3e8e282a175feb15bd32fe60a338596b4c5f8","tier":null}],"members":[{"type":"team","id":"a32913c2b0edac60","login":"trebicka","name":"G.Trebicka","avatar_url":"https://avatars-next.observableusercontent.com/2d7dd637070df728ffb21a3aa5a3e8e282a175feb15bd32fe60a338596b4c5f8","tier":"starter_2024","role":"editor"},{"type":"individual","id":"ad8baf6981b63c06","login":"trebicka","name":"G.Trebicka","avatar_url":"https://avatars-next.observableusercontent.com/2d7dd637070df728ffb21a3aa5a3e8e282a175feb15bd32fe60a338596b4c5f8","tier":null,"role":"editor"}],"comments":[],"custom_thumbnail":false,"trashed":false,"lapsed":null,"subscribed":null,"forks":0,"collection":null,"type":"notebook","body":{"title":"","cells":[{"id":12,"value":"$31","pinned":true,"hidden":false,"mode":"html","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"},{"id":0,"value":"$32","pinned":false,"hidden":false,"mode":"md","author":"$undefined","summary":"$undefined","output":"","database":"$undefined"}],"files":"$W33","stdlib":"1","titling":"auto"}} 30:"$2f:body"