Developing applications and services to make transit better for everyone - one train, bus, ferry, tram, metro ride at a time.
Public
Edited
Feb 25, 2024
Input_SydneyTransitLinesGeoJSON = {
const allLinesData = [
//..._EMCdata.RouteData.SydneySuburbanTestData.features,
..._EMCdata.RouteData.SydneySuburban.features //.slice(0, 100)
];
return _Utils.Generate.GeoJSON("FeatureCollection", allLinesData);
}
geojson2svg = import("https://cdn.jsdelivr.net/npm/geojson-to-svg@latest/+esm")
matsutil = import("https://cdn.jsdelivr.net/npm/flo-mat@latest/+esm")
Step1_01_BufferedRoutes = {
const buffered_features = [];
for (const feature of Input_SydneyTransitLinesGeoJSON.features) {
const buffered = _Imports.Geospatial.turf.buffer(feature, 0.025, {
units: "kilometers"
});
buffered_features.push(buffered);
}
return _Utils.Generate.GeoJSON("FeatureCollection", buffered_features, {});
}
Step1_02_MergedRoutes = {
const combined_routes = _Imports.Geospatial.turf.truncate(
_Imports.Geospatial.turf.combine(Step1_01_BufferedRoutes),
{ precision: 6, coordinates: 2 }
);
const merged_routes = _Imports.Geospatial.turf.intersect(
combined_routes.features[0],
combined_routes.features[0]
);
return merged_routes;
}
UpperLeft = {
return _Imports.Geospatial.turf.bboxPolygon(
_Imports.Geospatial.turf.bbox(Step1_02_MergedRoutes)
).geometry.coordinates[0][3];
}
SvgOut = geojson2svg
.default()
.styles(() => ({ fill: "black" }))
.projection(function (coord) {
return [coord[0] + UpperLeft[0] * -1, coord[1] + UpperLeft[1] * -1];
})
.data(_Imports.Geospatial.turf.rewind(Step1_02_MergedRoutes))
.render()
html`${SvgOut}`
MATSvg = {
const parser = new DOMParser();
const doc = parser.parseFromString(SvgOut, "application/xml");
const pathd = doc.querySelector(".polygon").getAttribute("d");
const paths = matsutil.getPathsFromStr(pathd);
console.log(paths);
const mats = matsutil.findMats(paths, 3);
const sats = mats.map((mat) => matsutil.toScaleAxis(mat, 1.5));
const satsFinal = drawMats(sats);
function drawMats(inputmats) {
const satsFinal = [];
const mls = [];
function createLS(x0, y0, x1, y1) {
mls.push([
[x0 - UpperLeft[0] * -1, y0 - UpperLeft[1] * -1],
[x1 - UpperLeft[0] * -1, y1 - UpperLeft[1] * -1]
]);
}
function getLinePathStr(ps) {
let [[x0, y0], [x1, y1]] = ps;
createLS(x0, y0, x1, y1);
return `M ${x0} ${y0} L ${x1} ${y1}`;
}
function getQuadBezierPathStr(ps) {
let [[x0, y0], [x1, y1], [x2, y2]] = ps;
createLS(x0, y0, x2, y2);
return `M ${x0} ${y0} Q ${x1} ${y1} ${x2} ${y2}`;
//return `M ${x0} ${y0} L ${x2} ${y2}`;
}
function getCubicBezierPathStr(ps) {
let [[x0, y0], [x1, y1], [x2, y2], [x3, y3]] = ps;
createLS(x0, y0, x3, y3);
//return `M ${x0} ${y0} C ${x1} ${y1} ${x2} ${y2} ${x3} ${y3}`;
return `M ${x0} ${y0} L ${x3} ${y3}`;
}
inputmats.forEach(f);
/**
* Draws a MAT curve on an SVG element.
*/
function f(mat) {
let cpNode = mat.cpNode;
if (!cpNode) return;
let fs = [
getLinePathStr,
getLinePathStr,
getLinePathStr,
getQuadBezierPathStr,
getCubicBezierPathStr
];
matsutil.traverseEdges(cpNode, function (cpNodeO) {
if (matsutil.isTerminating(cpNodeO)) return;
let bezier = matsutil.getCurveToNext(cpNodeO);
if (!bezier) return;
satsFinal.push(
`<path d="${fs[bezier.length](bezier)}" fill="none" stroke="${
["red", "red", "blue", "green", "red"][bezier.length]
}" stroke-width="0.2%"/>`
);
});
}
return [satsFinal, mls];
}
return [
`<svg viewBox="${doc
.querySelector("svg")
.getAttribute(
"viewBox"
)}" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" version="1.2"><g>${satsFinal[0].join(
""
)}</g></svg>`,
satsFinal[1]
];
}
html`${MATSvg[0]}`
_Imports.Geospatial.turf.multiLineString(MATSvg[1])
viewof MapView_03_MAT = {
await visibility();
const map = new _MapLibre({ height: 500 });
yield map.attach;
map.AddDataSource(
"merged_routes",
_Imports.Geospatial.turf.multiLineString(MATSvg[1])
);
map.AddMapLine("merged_routes_outline", "merged_routes", "#088", 5);
invalidation.then(map.kill);
}
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.
