Published
Edited
Jul 27, 2022
1 star
Insert cell
Insert cell
Insert cell
Insert cell
lat_lon = [coords.latitude, coords.longitude]
Insert cell
coords = new Promise((resolve, reject) => {
if (navigator.geolocation) navigator.geolocation.getCurrentPosition(
pos => resolve(pos.coords),
err => reject(Error(err.message))
);
else reject(Error('this browser does not support geolocation.'))
});
Insert cell
Insert cell
Insert cell
geo_permission_status = Generators.observe(change => {
let permission_status;
change('unknown');

navigator.permissions
.query({name:'geolocation'})
.then(result => {
permission_status = result;
result.onchange = function() { change(this.state); }
change(result.state);
});

return () => permission_status.onchange = null;
});
Insert cell
permission_explanation = (status) => {
switch (status) {
case 'granted': return `**${status}** - this domain _is_ allowed to access the Geolocation API`;
case 'prompt': return `**${status}** - this domain has not yet requested permission to access the Geolocation API`;
case 'denied': return `**${status}** - this domain is _not_ allowed to access the Geolocation API. the permission can be reset in the browser settings. If you are browsing in privacy mode, you should start a new privacy session to reset.`;
default: return `**${status}** - this browser may not implement the permissions API`;
}
}
Insert cell
projection = d3.geoOrthographic().rotate(lat_lon.map(v => -v).reverse())
// lat_lon is y_x, so need to reverse for rotation api expecting [x,y]
Insert cell
import {d3, map} with {projection} from "@d3/world-map"
Insert cell
Insert cell

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.
Learn more