Unlisted
Edited
Mar 19, 2023
1 star
Insert cell
Insert cell
mapshaper = {
const src = "https://cdn.jsdelivr.net/npm/mapshaper@0.6.25/mapshaper.js";
const requires = {
kdbush: await require("kdbush"),
flatbush: await require("flatbush"),
"@tmcw/togeojson": await require("@tmcw/togeojson"),
mproj: await require("mproj"),
"iconv-lite": null, // await require("iconv-lite") doesn't seem to work…
buffer: {}, // ??
rw: null,
fs: null,
path: null,
"@xmldom/xmldom": null, // ??
"sync-request": null // ??
};
globalThis.__require = (what) => requires[what];
const ms = eval(
`(function() {
const require = globalThis.__require;
${await fetch(src).then((d) => d.text())};
return mapshaper;
})()`
);
delete globalThis.__require;
return ms;
}
Insert cell
Insert cell
source = d3
.text("https://cdn.jsdelivr.net/npm/us-atlas@3/states-10m.json")
.then(mapshaper.internal.importTopoJSON)
Insert cell
svg`${mapshaper.internal
.exportSVG(source, {})[0]
.content.replace(/^<[?]xml[^>]+>/, "")}` // success!
Insert cell
Insert cell
{
// Example: converting a CSV string to GeoJSON
const input = { "input.csv": "lat,lng,value\n40.3,-72.3,1000" };
const cmd = "-i input.csv -points x=lng y=lat -o output.geojson";

// using Promise
return mapshaper.applyCommands(cmd, input);
}
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