GeographicLib = require('geographiclib@1.51')
wgs84 = new GeographicLib.Geodesic.Geodesic(6378137, 1/298.257223563);
// shortcut: GeographicLib.Geodesic.WGS84
dc_to_paris = wgs84.Inverse(...white_house, ...eiffel_tower)
viewof white_house = mapview({ϕ: 38.8974, λ: -77.0375, z: 16})
viewof eiffel_tower = mapview({ϕ: 48.8583, λ: 2.2945, z: 16})
ne_from_rio = wgs84.Direct(...rio_de_janeiro, 45, 10e6)
nw_from_rio = wgs84.Direct(...rio_de_janeiro, -45, 10e6)
dist = wgs84.Inverse(...thracian_sea, ...salt_lake_city)
area = (pts) => {
const polygon = wgs84.Polygon();
for (const p of pts) polygon.AddPoint(...p);
return polygon.Compute().area; }
triangle_area = area([rio_de_janeiro, thracian_sea, salt_lake_city])
viewof thracian_sea = mapview({ϕ: ne_from_rio.lat2, λ: ne_from_rio.lon2, z:8})
viewof salt_lake_city = mapview({ϕ: nw_from_rio.lat2, λ: nw_from_rio.lon2, z:10})
viewof rio_de_janeiro = mapview({ϕ: -22.9518, λ: -43.2105, z:10})
// geodesic arc connecting two given points
geodesic = ([ϕ0, λ0], [ϕ1, λ1], n=20) => {
var {s12, azi1:α} = wgs84.Inverse(ϕ0, λ0, ϕ1, λ1);
return Array.from(linspace(0, s12, n), (s) => {
var {lat2:ϕ, lon2:λ} = wgs84.Direct(ϕ0, λ0, α, s);
return [λ, ϕ]
});
}
// circle of constant geodesic distance about a given point
geocircle = ([ϕ0, λ0], r, n=200) => {
return Array.from(linspace(-180, 180, n), (α) => {
var {lat2:ϕ, lon2:λ} = wgs84.Direct(ϕ0, λ0, α, r);
return [λ, ϕ]
});
}
// geodesic 15,000 km long from a given point with a given azimuth
georay = ([ϕ0, λ0], α, n=20) => {
return Array.from(linspace(0, 1.5e7, n), (r) => {
var {lat2:ϕ, lon2:λ} = wgs84.Direct(ϕ0, λ0, α, r);
return [λ, ϕ]
});
}
formatlatlon = ([ϕ, λ]) => html`<nobr>
<strong>${d3.format(".4f")(Math.abs(ϕ))}° ${ϕ >= 0 ? 'N' : 'S'}</strong>,
<strong>${d3.format(".4f")(Math.abs(λ))}° ${λ >= 0 ? 'E' : 'W'}</strong></nobr>`
mapview = ({ϕ, λ, z=12}) => {
const map = osmMap(λ, ϕ, z, Math.min(width, 640), 300);
map.style.setProperty('border', '1px solid black')
const view = html`<div style="padding-bottom:10px;">${map}`;
view.value = [ϕ, λ];
return view
}
λϕ = ([ϕ, λ]) => [λ, ϕ]
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.
