Public
Edited
May 12, 2023
1 star
Insert cell
Insert cell
Insert cell
features = turf.points(coords)
Insert cell
center = turf.center(features)
Insert cell
line = turf.lineString(coords)
Insert cell
lineLength = turf.length(line, { units: "miles" })
Insert cell
bbox = turf.bbox(line)
Insert cell
along = turf.along(line, dist, { units: "miles" })
Insert cell
split = turf.lineSplit(line, along)
Insert cell
Insert cell
viewof map = {
const container = DOM.element("div", {
style: `width:${width}px;height:${width / 1.5}px`
});
yield container;

const map = (container.value = L.map(container).setView(
[...center.geometry.coordinates].reverse(),
12.5
));
L.tileLayer(
"https://{s}.basemaps.cartocdn.com/light_all/{z}/{x}/{y}" +
(L.Browser.retina ? "@2x.png" : ".png"),
{
attribution:
'&copy; <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>, &copy; <a href="https://carto.com/attributions">CARTO</a>',
subdomains: "abcd",
maxZoom: 18
}
).addTo(map);

const [minX, minY, maxX, maxY] = bbox;

map.fitBounds([
[minY, minX],
[maxY, maxX]
]);
yield container;
}
Insert cell
marker = L.geoJSON().addTo(map).bindTooltip("I'm this far already!")
Insert cell
{
marker.clearLayers(); // Remove the previously created layer.
marker.addData(along);
}
Insert cell
progress = L.geoJSON(null, {
style: {
color: "#ff0000",
weight: 6
}
}).addTo(map)
Insert cell
{
progress.clearLayers(); // Remove the previously created layer.
if (split.features.length > 1) {
progress.addData(split.features[0]);
} else {
if (dist > 0) {
progress.addData(split.features[0]);
}
}
}
Insert cell
remaining = L.geoJSON(null, {
style: {
weight: 6
}
}).addTo(map)
Insert cell
{
remaining.clearLayers(); // Remove the previously created layer.
if (split.features.length > 1) {
remaining.addData(split.features[1]);
} else {
if (dist === 0) {
remaining.addData(split.features[0]);
}
}
}
Insert cell
Insert cell
Insert cell
import { Scrubber } from "@mbostock/scrubber"
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