Public
Edited
Feb 18, 2023
L = require('leaflet@1.9.3');
d3 = require('d3')
html`<link href='${resolve('leaflet@1.9.3/dist/leaflet.css')}' rel='stylesheet' />`
map = {
////////////////////////////////////////////
// initialize container
const container = html`<div style="height: 500px;">`;
yield container;
// initialize map and tile layer
const map = new L.map(
container,
{ dragging: true },
).setView([37.4806329,-122.199059], 8); // replace with something that uses `center` property
L.tileLayer('https://cartodb-basemaps-{s}.global.ssl.fastly.net/light_all/{z}/{x}/{y}{r}.png', {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
data.forEach(e => {
// Extract the name of the restaurant and its coordinates from the CSV data
var name = e.name;
var coords = e.coordinates.split(",");
// Create a Leaflet marker for the restaurant
var marker = L.marker([parseFloat(coords[0]), parseFloat(coords[1])]).addTo(map);
marker.bindPopup(name);
// Show the popup on hover
marker.on("mouseover", function (e) {
this.openPopup();
});
// Hide the popup when the mouse leaves the marker
marker.on("mouseout", function (e) {
this.closePopup();
});
})
}
L.Draw
L.Draw
html`<script src="https://cdnjs.cloudflare.com/ajax/libs/leaflet.draw/0.4.12/leaflet.draw.js"></script>`
data = FileAttachment("d3-leaflet-data-sm.csv").csv()
Purpose-built for displays of data
Observable is your go-to platform for exploring data and creating expressive data visualizations. Use reactive JavaScript notebooks for prototyping and a collaborative canvas for visual data exploration and dashboard creation.
