Data reporter, Newsday. Stony Brook University School of Journalism Class of 2017. Also on Github @ariellemartinez.
Published
Edited
Mar 25, 2020
2 forks
4 stars
md`# Submarine cable 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;
}
cablesAttachment = FileAttachment("cables.geojson")
cablesText = cablesAttachment.text()
cablesData = JSON.parse(cablesText)
landingPointsAttachment = FileAttachment("landing-points.geojson")
landingPointsText =landingPointsAttachment.text()
landingPointsData = JSON.parse(landingPointsText)
map = {
const container = html`<div style="height:600px;">`;
yield container;
const map = L.map(container).setView([0, 0], 2);
L.tileLayer("https://{s}.basemaps.cartocdn.com/rastertiles/light_all/{z}/{x}/{y}.png", {
attribution: "Imagery © <a href='https://carto.com/' target='_blank'>Carto</a>, Data © <a href='https://github.com/telegeography/www.submarinecablemap.com' target='_blank'>Telegeography</a>"
}).addTo(map);
var cables = L.geoJson(cablesData, {style: {"color": "#04284a", "weight": 2, "opacity": 0.7}}).addTo(map);
var landingPoints = L.geoJson(landingPointsData, {
pointToLayer: function (feature, latlng) {
return L.circleMarker(latlng, {radius: 5, fillColor: "#04284a", fillOpacity: 0.7, color: "#fff", weight: 1, opacity: 1, fillOpacity: 0.8});
}
}).addTo(map);
landingPoints.eachLayer(function (layer) {
layer.bindPopup(layer.feature.properties.name);
});
}
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.
