container = {
const container = html`<div style="height:600px;">`;
yield container;
}
L = {
// this is content borrowed which creates a global variable L for leaflet
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;
}
map = {
// this is content borrowed from the tutorials to load up an open street map
// if you see the error map = Error: Map container is already initialized. just re run the container cell
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);
return map;
}
geo_json = FileAttachment("geo_json.json").json()
{
L.geoJson(geo_json, {
onEachFeature: makeMarker
})
.bindPopup(function (layer) {
// the material that we create in the html will be shown in the popup when it's clicked
// the take home is that we need to make sure that the geojson contains links to images, and data within it's properties.
return `<div><h1>${layer.feature.properties.text}</h1>
<div class="imageholder"></div>
</div>`; // use the NAME property as the popup value
})
.addTo(map); // add it to the map
}
function makeMarker(feature, layer) {
// this is where you would ahead of time layout the behavior of the interactions with the feature pin
}
toy_text = FileAttachment("toy_data.csv").text()
toy_data = d3.csvParse(toy_text, d3.autoType)
toy_data.map((e) => {
return {
type: "Feature",
geometry: {
type: "Point",
coordinates: [e.Longitude, e.Latitude]
},
properties: {
name: "Dinagat Islands",
random: Math.random()
}
};
})
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.
