Mathematical engineer. Software developer at Act Now Coalition.
viewof coordinates = getUserCoordinates({})
coordinates
globe = Plot.marks([
Plot.sphere({ fill: "#64b5f6" }),
Plot.graticule({ stroke: "#fff" }),
Plot.geo(land, { fill: "#bbdefb" }),
Plot.geo(createGeoJsonPoint(coordinates), { fill: "red" })
]).plot({ width, projection: { type: "equirectangular" } })
function getUserCoordinates(options) {
const { buttonText, auto, ...geolocationOptions } = {
buttonText: "Get Location",
enableHighAccuracy: false,
auto: true,
...options
};
const form = html`<form style="${styles.form}"></form>`;
const label = html`<label style="${styles.label}">↑ Allow location access</label>`;
const button = html`<button>${buttonText}</button>`;
// We show the coordinates and enable the button once we obtain
// the user coordinates.
function onSuccess(position) {
form.value = getCoordinates(position);
label.innerText = `Lat: ${position.coords.latitude}, Lon: ${position.coords.longitude}`;
label.style = styles.label;
button.disabled = false;
form.dispatchEvent(new Event("input"));
}
// Show an an error message if we can't obtain the coordinates
// and re-enable the button, so the user can try again.
function onError(err) {
label.innerText = `Error: ${err.message}`;
label.style = styles.labelError;
button.disabled = false;
}
button.onclick = () => {
navigator.geolocation.getCurrentPosition(
onSuccess,
onError,
geolocationOptions
);
label.innerText = "Loading...";
label.style = styles.label;
button.disabled = true;
};
if (auto) {
const promise = new Promise((resolve, reject) => {
navigator.geolocation.getCurrentPosition(
(position) => {
onSuccess(position);
resolve(position.coords);
},
(error) => {
onError(error);
reject(error);
}
);
}).catch((error) => error);
}
form.value = {};
form.addEventListener("submit", (e) => e.preventDefault());
form.append(label, button);
return form;
}
import { land } from "@observablehq/plot-projections"
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.
