Coding the Earth
Type JavaScript, then Shift-Enter. Ctrl-space for more options. Arrow ↑/↓ to switch modes.
viewof selectedAirport = Inputs.table(apSearch, {
columns: [
"id",
"name",
"lat",
"lon"
], sort: 'name', multiple: false, maxWidth : 900,
header: {"id":"Airport ID", "name":"Name", "lat":"Latitude", "lon":"Longitude"},
align:{"id":"left", "name":"left", "lat":"left", "lon":"left"},
width:{"id":20, "name":120, "lat":25, "lon":25},
})
{
// normally, we need to loop through the layer to find out which point/feature is selected.
// Here we know the lat/lon already, so we can use them directly.
if (typeof selectedAirport !== 'undefined' && selectedAirport) // check if anything is selected
mapObj.flyTo([selectedAirport.lat, selectedAirport.lon], 12);
}
// d3.csv or d3.dsv could build an array from a CSV file.
airportPnts = await d3.csv(airportDatURLs[0], (d) => {
//*
if(airportTypes.includes(d.type))
return {
id: +d.id, // + would convert the value to number
name: d.name,
lat: +d.latitude_deg,
lon: +d.longitude_deg,
type: (d.type == 'large_airport')? 'l':'m'
};
else
return null;
//*/
});
L = await require('leaflet@1.9.4', 'leaflet-providers@1.13.0', 'leaflet.fullscreen@3.0.1/Control.FullScreen.js');
html`<link href='${resolve('leaflet@1.9.4/dist/leaflet.css')}' rel='stylesheet' />`;
html`<link href='${resolve('https://unpkg.com/leaflet.fullscreen@3.0.1/Control.FullScreen.css')}' rel='stylesheet' />`;
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.
