map = {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([40.7299, -73.9923], 13);
L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", {
attribution: "© <a href=https://www.openstreetmap.org/copyright>OpenStreetMap</a> contributors"
}).addTo(map);
function onEachFeature(feature, layer) {
// does this feature have a property named popupContent?
if (feature.properties && feature.properties.popupContent) {
layer.bindPopup(feature.properties.popupContent);
}
}
const geojsonFeatureCollection = {
"type": "FeatureCollection",
"features": [
{
"type": "Feature",
"properties": {
"date":"11/07/73",
"lat":true,
"lon":false,
"popupContent": "11/07/73 Self (Aboard Ship)"
},
"geometry": {
"coordinates": [
[
-58.88333333,
90
],
[
-58.88333333,
-90
]
],
"type": "LineString"
}
},
{
"type": "Feature",
"properties": {
"popupContent": "11/07/73 Middle of Bridgetown (From Ship)"
},
"geometry": {
"coordinates": [
[
-90,
13.0975
],
[
90,
13.0975
]
],
"type": "LineString"
}
},
{
"type": "Feature",
"properties": {
"popupContent": "11/7/1673: Church in Bridgetown (From Ship)"
},
"geometry": {
"coordinates": [
-59,
13.09166667
],
"type": "Point"
}
}
]
};
L.geoJSON(geojsonFeatureCollection,{
onEachFeature: onEachFeature
}).addTo(map);
}
L = {
const L = await require("leaflet@1/dist/leaflet.js");
if (!L._style) {
const href = await require.resolve("leaflet@1/dist/leaflet.css");
document.head.appendChild(L._style = html`<link href=${href} rel=stylesheet>`);
}
return L;
}
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.
