Geospatial Visual Analytics
Public
Edited
Jun 23, 2023
2 forks
1 star
{
// Declare container
let container = htl.html`<div style="height:${450}px; width:${width}px">`;
yield container;
// Declare map instance
const map = L.map(container);
map.locate({ setView: true });
map.preferCanvas = true;
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}@2x.png",
{
attribution:
'© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}
).addTo(map);
//geojson
var geolayer = L.geoJson(indo_convex_hull).addTo(map);
map.fitBounds(geolayer.getBounds());
// marker declaration
var marker = new L.marker([], {
draggable: true,
autoPan: true
});
// marker drag event
marker.on("dragend", async function (e) {
let lat = e.target._latlng.lat,
lng = e.target._latlng.lng;
geocode([lng, lat]).then((address) => {
info.update(geofence([lng, lat], indo_convex_hull), address);
});
});
function onLocationFound(e) {
var radius = e.accuracy;
marker.setLatLng(e.latlng);
marker.addTo(map);
}
map.on("locationfound", onLocationFound);
// info
var info = L.control();
info.onAdd = function (map) {
this._div = L.DomUtil.create("div", "info");
this.update();
return this._div;
};
info.update = function (bool, address) {
if (!bool) {
address = "You're not in Indonesia";
}
this._div.innerHTML = "<b>" + bool + "</b><br />" + address + "<br />";
};
info.addTo(map);
}
geofence = ([lat, lng], poly) => {
var pt = turf.point([lat, lng]);
var poly = turf.polygon(poly.features[0].geometry.coordinates);
return turf.booleanPointInPolygon(pt, poly);
}
function geocode([lng, lat]) {
const url = `https://nominatim.openstreetmap.org/reverse?format=jsonv2&lat=${lat}&lon=${lng}`;
return fetch(url)
.then((response) => response.json())
.then((data) => data.display_name);
}
indo_convex_hull = FileAttachment("indo_convex_hull.geojson").json()
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.
