mapshaper 0.7.2 → 0.7.4
This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
- package/LICENSE +1 -1
- package/bin/mapshaper-gui +31 -7
- package/mapshaper.js +45 -42
- package/package.json +8 -7
- package/www/geopackage.js +10 -10
- package/www/index.html +32 -4
- package/www/mapshaper-gui.js +529 -83
- package/www/mapshaper.js +45 -42
- package/www/modules.js +5 -5
- package/www/page.css +157 -0
- package/www/docs/_assets/cmd-search.js +0 -213
- package/www/docs/_assets/docs.css +0 -722
- package/www/docs/_assets/docs.js +0 -75
- package/www/docs/_assets/highlight.css +0 -10
- package/www/docs/essentials/command-line.html +0 -127
- package/www/docs/essentials/command-line.html.md +0 -112
- package/www/docs/essentials/web-app.html +0 -138
- package/www/docs/essentials/web-app.html.md +0 -106
- package/www/docs/examples/basics.html +0 -275
- package/www/docs/examples/basics.html.md +0 -370
- package/www/docs/examples/data/Makefile +0 -31
- package/www/docs/examples/data/globe.msx +0 -0
- package/www/docs/examples/data/globe.svg +0 -616
- package/www/docs/examples/data/globe.txt +0 -21
- package/www/docs/examples/data/globe.zip +0 -0
- package/www/docs/examples/data/ne_50m_admin_0_countries.geojson +0 -1
- package/www/docs/examples/data/ne_50m_admin_1_states_provinces_lakes.geojson +0 -1
- package/www/docs/examples/data/us-states.msx +0 -0
- package/www/docs/examples/data/us-states.svg +0 -56
- package/www/docs/examples/data/us-states.txt +0 -6
- package/www/docs/examples/data/us-states.zip +0 -0
- package/www/docs/examples/globe.html +0 -108
- package/www/docs/examples/globe.html.md +0 -64
- package/www/docs/examples/us-states.html +0 -88
- package/www/docs/examples/us-states.html.md +0 -44
- package/www/docs/formats/csv.html +0 -127
- package/www/docs/formats/csv.html.md +0 -97
- package/www/docs/formats/dbf.html +0 -87
- package/www/docs/formats/dbf.html.md +0 -39
- package/www/docs/formats/flatgeobuf.html +0 -85
- package/www/docs/formats/flatgeobuf.html.md +0 -41
- package/www/docs/formats/geojson.html +0 -107
- package/www/docs/formats/geojson.html.md +0 -65
- package/www/docs/formats/geopackage.html +0 -87
- package/www/docs/formats/geopackage.html.md +0 -42
- package/www/docs/formats/json.html +0 -83
- package/www/docs/formats/json.html.md +0 -35
- package/www/docs/formats/kml.html +0 -82
- package/www/docs/formats/kml.html.md +0 -39
- package/www/docs/formats/overview.html +0 -191
- package/www/docs/formats/overview.html.md +0 -34
- package/www/docs/formats/shapefile.html +0 -123
- package/www/docs/formats/shapefile.html.md +0 -84
- package/www/docs/formats/snapshot.html +0 -87
- package/www/docs/formats/snapshot.html.md +0 -39
- package/www/docs/formats/svg.html +0 -99
- package/www/docs/formats/svg.html.md +0 -51
- package/www/docs/formats/topojson.html +0 -102
- package/www/docs/formats/topojson.html.md +0 -54
- package/www/docs/gallery/index.html +0 -80
- package/www/docs/gallery/index.html.md +0 -29
- package/www/docs/guides/combining-layers.html +0 -109
- package/www/docs/guides/combining-layers.html.md +0 -89
- package/www/docs/guides/expressions.html +0 -600
- package/www/docs/guides/expressions.html.md +0 -376
- package/www/docs/guides/programmatic.html +0 -117
- package/www/docs/guides/programmatic.html.md +0 -91
- package/www/docs/guides/projections.html +0 -158
- package/www/docs/guides/projections.html.md +0 -118
- package/www/docs/guides/simplification.html +0 -110
- package/www/docs/guides/simplification.html.md +0 -96
- package/www/docs/guides/topology.html +0 -90
- package/www/docs/guides/topology.html.md +0 -63
- package/www/docs/images/cal-counties.png +0 -0
- package/www/docs/images/simplification-detail.png +0 -0
- package/www/docs/images/simplification-dp.png +0 -0
- package/www/docs/images/simplification-mod2.png +0 -0
- package/www/docs/images/tiger-counties.png +0 -0
- package/www/docs/index.html +0 -101
- package/www/docs/index.html.md +0 -59
- package/www/docs/reference.html +0 -1302
- package/www/docs/reference.html.md +0 -1817
- package/www/docs/whats-new.html +0 -77
- package/www/docs/whats-new.html.md +0 -59
- package/www/llms-full.txt +0 -4053
- package/www/llms.txt +0 -55
|
@@ -1,39 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Mapshaper snapshot (.msx)
|
|
3
|
-
description: A single-file binary snapshot of a Mapshaper session, used to save work in progress and share reproducible projects.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# Mapshaper snapshot (.msx)
|
|
7
|
-
|
|
8
|
-
A Mapshaper snapshot captures the current state of a session — arcs, layers, attributes, CRS metadata, topology and (when written from the web app) the command history that produced it — as a single binary file. Snapshots are Mapshaper-specific and not intended for interchange with other GIS tools; for that, use [Shapefile](/docs/formats/shapefile.html.md), [GeoPackage](/docs/formats/geopackage.html.md), [FlatGeobuf](/docs/formats/flatgeobuf.html.md) or [GeoJSON](/docs/formats/geojson.html.md).
|
|
9
|
-
|
|
10
|
-
**File extension:** `.msx` · **Read:** ✓ · **Write:** ✓ · **Multi-layer:** ✓
|
|
11
|
-
|
|
12
|
-
### When to use a snapshot
|
|
13
|
-
|
|
14
|
-
- **Saving work-in-progress** for later editing, with topology, layer order and (in the web app) command history intact.
|
|
15
|
-
- **Bundling a collection of datasets** into a single compact file that is quicker to re-open than re-running an import pipeline.
|
|
16
|
-
- **In the browser, as a quick "save point"** before doing something experimental that might fail or give the wrong result — restore the snapshot to roll back.
|
|
17
|
-
|
|
18
|
-
### From the CLI
|
|
19
|
-
|
|
20
|
-
`-o foo.msx` captures the **entire session** — every dataset and every layer Mapshaper has loaded, not just the ones currently selected by `-target`. This makes a `.msx` file a faithful "save point" of the working state, regardless of which layers happen to be active.
|
|
21
|
-
|
|
22
|
-
`-target` controls *visibility and stacking order*, not which layers are written:
|
|
23
|
-
|
|
24
|
-
- Layers matched by the active `-target` (or the `target=` option on `-o` itself) come back **visible** in the web app, with no further setup.
|
|
25
|
-
- They are stacked in the order matched by `-target` — first targeted on the bottom, last on top — so the GUI's layer stack matches the draw order you'd get from an SVG export of the same target list.
|
|
26
|
-
- Layers that weren't targeted come along **hidden**, parked at the bottom of the layer panel. They're still in the file (so you can pin them visible later), but they don't get in the way of the intended view.
|
|
27
|
-
- If you want to drop layers from the snapshot rather than just hide them, run an explicit step like `-filter-layers` or `-target b -drop` before `-o foo.msx`.
|
|
28
|
-
|
|
29
|
-
### In the web app
|
|
30
|
-
|
|
31
|
-
The ribbon icon in the layer panel opens the **snapshot menu**. From there you can:
|
|
32
|
-
|
|
33
|
-
- **Create a snapshot** — saves to in-browser storage. These are session-scoped and **deleted when the tab closes or the page is reloaded.** For anything you want to keep, **Save snapshot to file** writes a `.msx` file you can re-open later.
|
|
34
|
-
- **Export** a stored snapshot to a `.msx` file on disk. Persisted `.msx` files survive browser restarts and can be re-imported by drag-drop, the **Add files** button, or the `?files=` URL parameter.
|
|
35
|
-
- **Restore** a stored snapshot into the current session.
|
|
36
|
-
|
|
37
|
-
## External resources
|
|
38
|
-
|
|
39
|
-
- [msgpack.org](https://msgpack.org/) — the binary serialization format used inside `.msx` (via the [msgpackr](https://github.com/kriszyp/msgpackr) library).
|
|
@@ -1,99 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>SVG · mapshaper docs</title>
|
|
7
|
-
<meta name="description" content="How Mapshaper exports vector data as SVG, including width, scale, bounding-box and per-feature data attributes.">
|
|
8
|
-
<link rel="icon" type="image/png" href="/images/icon.png">
|
|
9
|
-
<link rel="stylesheet" href="/docs/_assets/highlight.css">
|
|
10
|
-
<link rel="stylesheet" href="/docs/_assets/docs.css">
|
|
11
|
-
</head>
|
|
12
|
-
<body class="">
|
|
13
|
-
|
|
14
|
-
<header class="page-header">
|
|
15
|
-
<a href="/" class="mapshaper-logo">map<span class="logo-highlight">shaper</span></a>
|
|
16
|
-
<span class="header-section-label">Docs</span>
|
|
17
|
-
<nav class="header-nav">
|
|
18
|
-
<a href="/">Web app</a>
|
|
19
|
-
<a href="https://github.com/mbloch/mapshaper">GitHub</a>
|
|
20
|
-
<a href="/sponsor.html" class="sponsor-link"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> Become a sponsor</a>
|
|
21
|
-
</nav>
|
|
22
|
-
</header>
|
|
23
|
-
|
|
24
|
-
<div class="docs-layout">
|
|
25
|
-
|
|
26
|
-
<aside class="docs-sidebar">
|
|
27
|
-
<div class="sidebar-inner">
|
|
28
|
-
<nav class="docs-nav"><ul class="top-links"><li><a href="/docs/">Home</a></li><li><a href="/docs/whats-new.html">What's new</a></li><li><a href="/docs/reference.html">Command reference</a></li><li><a href="/docs/gallery/">Gallery</a></li></ul><h2>Getting started</h2><ul><li><a href="/docs/essentials/command-line.html">The command-line tool</a></li><li><a href="/docs/essentials/web-app.html">The web app</a></li></ul><h2>Guides</h2><ul><li><a href="/docs/guides/simplification.html">Simplification</a></li><li><a href="/docs/guides/expressions.html">JavaScript expressions</a></li><li><a href="/docs/guides/projections.html">Projections</a></li><li><a href="/docs/guides/topology.html">Topology and cleaning</a></li><li><a href="/docs/guides/combining-layers.html">Combining two layers</a></li><li><a href="/docs/guides/programmatic.html">Using Mapshaper from Node.js</a></li></ul><h2>Formats</h2><ul><li><a href="/docs/formats/overview.html">Overview</a></li><li><a href="/docs/formats/shapefile.html">Shapefile</a></li><li><a href="/docs/formats/geojson.html">GeoJSON</a></li><li><a href="/docs/formats/topojson.html">TopoJSON</a></li><li><a href="/docs/formats/geopackage.html">GeoPackage</a></li><li><a href="/docs/formats/flatgeobuf.html">FlatGeobuf</a></li><li><a href="/docs/formats/kml.html">KML / KMZ</a></li><li><a href="/docs/formats/csv.html">CSV / TSV</a></li><li><a href="/docs/formats/dbf.html">DBF</a></li><li><a href="/docs/formats/json.html">JSON records</a></li><li><a href="/docs/formats/svg.html" class="is-active">SVG</a></li><li><a href="/docs/formats/snapshot.html">Mapshaper snapshot</a></li></ul><h2>Examples</h2><ul><li><a href="/docs/examples/basics.html">Basics</a></li><li><a href="/docs/examples/globe.html">Globe</a></li><li><a href="/docs/examples/us-states.html">U.S. state map</a></li></ul></nav>
|
|
29
|
-
</div>
|
|
30
|
-
</aside>
|
|
31
|
-
|
|
32
|
-
<main class="docs-main">
|
|
33
|
-
<article class="docs-article">
|
|
34
|
-
<div class="docs-breadcrumbs"><a href="/docs/">Docs</a> › Formats › SVG</div>
|
|
35
|
-
<h1 id="svg">SVG</h1>
|
|
36
|
-
<p>SVG is the W3C standard for vector graphics on the web. Mapshaper writes SVG and can also import its own SVG output files. Use SVG when you want to drop a non-interactive map straight into a web page or edit your map in Illustrator — it's a display format, not a data interchange format.</p>
|
|
37
|
-
<p><strong>File extension:</strong> <code>.svg</code> · <strong>Read:</strong> ✓ · <strong>Write:</strong> ✓ · <strong>Multi-layer:</strong> ✓</p>
|
|
38
|
-
<h3 id="cli-examples">CLI examples</h3>
|
|
39
|
-
<pre><code class="hljs language-bash">mapshaper provinces.shp -o provinces.svg
|
|
40
|
-
mapshaper provinces.shp -o width=1200 svg-data=name,pop provinces.svg
|
|
41
|
-
mapshaper a.shp b.shp -o combined.svg
|
|
42
|
-
</code></pre>
|
|
43
|
-
<h3 id="format-specific-output-options">Format-specific output options</h3>
|
|
44
|
-
<ul>
|
|
45
|
-
<li><code>width=</code> — output width in pixels (default 800). Geometry is fitted to this width.</li>
|
|
46
|
-
<li><code>height=</code> — output height in pixels. If both <code>width</code> and <code>height</code> are set, content is centred inside a <code>[0, 0, width, height]</code> viewport.</li>
|
|
47
|
-
<li><code>max-height=</code> — cap the output height in pixels.</li>
|
|
48
|
-
<li><code>pixels=</code> — total output area in pixels (alternative to <code>width=</code>).</li>
|
|
49
|
-
<li><code>margin=</code> — padding between content and viewport edge (default 1 px). Pass <code><left,bottom,right,top></code> for asymmetric margins.</li>
|
|
50
|
-
<li><code>svg-scale=</code> — scale in source units per pixel. Alternative to <code>width=</code> when you want a fixed scale rather than a fixed canvas size.</li>
|
|
51
|
-
<li><code>svg-bbox=</code> — explicit <code>xmin,ymin,xmax,ymax</code> for the SVG viewport. Useful for aligning multiple SVG layers exported separately.</li>
|
|
52
|
-
<li><code>fit-extent=</code> — use a layer (typically a single rectangle) to define the viewport.</li>
|
|
53
|
-
<li><code>svg-data=</code> — comma-separated list of attribute fields to emit as <code>data-*</code> attributes on each <code><path></code>. Field names must match <code>[a-z_][a-z0-9_-]*</code>.</li>
|
|
54
|
-
<li><code>id-field=</code> — promote one or more attribute fields to the SVG <code>id</code> attribute.</li>
|
|
55
|
-
<li><code>id-prefix=</code> — prefix all generated layer/feature ids.</li>
|
|
56
|
-
<li><code>point-symbol=square</code> — render points as squares instead of circles.</li>
|
|
57
|
-
</ul>
|
|
58
|
-
<h3 id="practical-notes">Practical notes</h3>
|
|
59
|
-
<ul>
|
|
60
|
-
<li>Each layer becomes a <code><g></code> group, with the layer name as the group id. Features become <code><path></code> (polygons/lines) or <code><circle></code> (points).</li>
|
|
61
|
-
<li>No data attributes are emitted unless you pass <code>svg-data=</code>.</li>
|
|
62
|
-
<li>The output is unstyled by default. Use <a href="/docs/reference.html#-style"><code>-style</code></a> to assign inline style attributes.</li>
|
|
63
|
-
<li>Very large or detailed layers can produce SVGs that are slow to render in browsers. Consider using <a href="/docs/reference.html#-simplify"><code>-simplify</code></a> before exporting.</li>
|
|
64
|
-
</ul>
|
|
65
|
-
<h2 id="external-resources">External resources</h2>
|
|
66
|
-
<ul>
|
|
67
|
-
<li><a href="https://www.w3.org/TR/SVG2/">W3C SVG 2 specification</a> — the formal spec.</li>
|
|
68
|
-
<li><a href="https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial">MDN SVG tutorial</a> — the friendliest practical introduction, with browser support notes.</li>
|
|
69
|
-
</ul>
|
|
70
|
-
<h2 id="see-also">See also</h2>
|
|
71
|
-
<ul>
|
|
72
|
-
<li><a href="/docs/examples/basics.html#add-svg-styling-for-export">Add SVG styling for export</a></li>
|
|
73
|
-
<li><a href="/docs/examples/basics.html#quantile-classify-into-a-color-ramp">Quantile-classify into a color ramp</a></li>
|
|
74
|
-
<li><a href="/docs/examples/basics.html#simplify-a-polygon-layer-for-the-web">Simplify a polygon layer for the web</a></li>
|
|
75
|
-
</ul>
|
|
76
|
-
|
|
77
|
-
<div class="edit-link">
|
|
78
|
-
<a href="https://github.com/mbloch/mapshaper/edit/master/docs/formats/svg.md">Edit this page on GitHub</a>
|
|
79
|
-
</div>
|
|
80
|
-
</article>
|
|
81
|
-
</main>
|
|
82
|
-
|
|
83
|
-
<aside class="docs-toc">
|
|
84
|
-
<div class="docs-toc-title">On this page</div><ul><li class="lvl-3"><a href="#cli-examples">CLI examples</a></li><li class="lvl-3"><a href="#format-specific-output-options">Format-specific output options</a></li><li class="lvl-3"><a href="#practical-notes">Practical notes</a></li><li class="lvl-2"><a href="#external-resources">External resources</a></li><li class="lvl-2"><a href="#see-also">See also</a></li></ul>
|
|
85
|
-
</aside>
|
|
86
|
-
|
|
87
|
-
</div>
|
|
88
|
-
|
|
89
|
-
<script src="/docs/_assets/docs.js" defer></script>
|
|
90
|
-
|
|
91
|
-
<footer class="docs-footer">
|
|
92
|
-
<div class="docs-footer-inner">
|
|
93
|
-
<span>mapshaper is free software, licensed under <a href="https://www.mozilla.org/MPL/2.0/">MPL 2.0</a>.</span>
|
|
94
|
-
<span><a href="/privacy.html">Privacy</a> · <a href="/terms.html">Terms</a> · <a href="/sponsor.html">Support mapshaper</a></span>
|
|
95
|
-
</div>
|
|
96
|
-
</footer>
|
|
97
|
-
|
|
98
|
-
</body>
|
|
99
|
-
</html>
|
|
@@ -1,51 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: SVG
|
|
3
|
-
description: How Mapshaper exports vector data as SVG, including width, scale, bounding-box and per-feature data attributes.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# SVG
|
|
7
|
-
|
|
8
|
-
SVG is the W3C standard for vector graphics on the web. Mapshaper writes SVG and can also import its own SVG output files. Use SVG when you want to drop a non-interactive map straight into a web page or edit your map in Illustrator — it's a display format, not a data interchange format.
|
|
9
|
-
|
|
10
|
-
**File extension:** `.svg` · **Read:** ✓ · **Write:** ✓ · **Multi-layer:** ✓
|
|
11
|
-
|
|
12
|
-
### CLI examples
|
|
13
|
-
|
|
14
|
-
```bash
|
|
15
|
-
mapshaper provinces.shp -o provinces.svg
|
|
16
|
-
mapshaper provinces.shp -o width=1200 svg-data=name,pop provinces.svg
|
|
17
|
-
mapshaper a.shp b.shp -o combined.svg
|
|
18
|
-
```
|
|
19
|
-
|
|
20
|
-
### Format-specific output options
|
|
21
|
-
|
|
22
|
-
- `width=` — output width in pixels (default 800). Geometry is fitted to this width.
|
|
23
|
-
- `height=` — output height in pixels. If both `width` and `height` are set, content is centred inside a `[0, 0, width, height]` viewport.
|
|
24
|
-
- `max-height=` — cap the output height in pixels.
|
|
25
|
-
- `pixels=` — total output area in pixels (alternative to `width=`).
|
|
26
|
-
- `margin=` — padding between content and viewport edge (default 1 px). Pass `<left,bottom,right,top>` for asymmetric margins.
|
|
27
|
-
- `svg-scale=` — scale in source units per pixel. Alternative to `width=` when you want a fixed scale rather than a fixed canvas size.
|
|
28
|
-
- `svg-bbox=` — explicit `xmin,ymin,xmax,ymax` for the SVG viewport. Useful for aligning multiple SVG layers exported separately.
|
|
29
|
-
- `fit-extent=` — use a layer (typically a single rectangle) to define the viewport.
|
|
30
|
-
- `svg-data=` — comma-separated list of attribute fields to emit as `data-*` attributes on each `<path>`. Field names must match `[a-z_][a-z0-9_-]*`.
|
|
31
|
-
- `id-field=` — promote one or more attribute fields to the SVG `id` attribute.
|
|
32
|
-
- `id-prefix=` — prefix all generated layer/feature ids.
|
|
33
|
-
- `point-symbol=square` — render points as squares instead of circles.
|
|
34
|
-
|
|
35
|
-
### Practical notes
|
|
36
|
-
|
|
37
|
-
- Each layer becomes a `<g>` group, with the layer name as the group id. Features become `<path>` (polygons/lines) or `<circle>` (points).
|
|
38
|
-
- No data attributes are emitted unless you pass `svg-data=`.
|
|
39
|
-
- The output is unstyled by default. Use [`-style`](/docs/reference.html.md#-style) to assign inline style attributes.
|
|
40
|
-
- Very large or detailed layers can produce SVGs that are slow to render in browsers. Consider using [`-simplify`](/docs/reference.html.md#-simplify) before exporting.
|
|
41
|
-
|
|
42
|
-
## External resources
|
|
43
|
-
|
|
44
|
-
- [W3C SVG 2 specification](https://www.w3.org/TR/SVG2/) — the formal spec.
|
|
45
|
-
- [MDN SVG tutorial](https://developer.mozilla.org/en-US/docs/Web/SVG/Tutorial) — the friendliest practical introduction, with browser support notes.
|
|
46
|
-
|
|
47
|
-
## See also
|
|
48
|
-
|
|
49
|
-
- [Add SVG styling for export](/docs/examples/basics.html.md#add-svg-styling-for-export)
|
|
50
|
-
- [Quantile-classify into a color ramp](/docs/examples/basics.html.md#quantile-classify-into-a-color-ramp)
|
|
51
|
-
- [Simplify a polygon layer for the web](/docs/examples/basics.html.md#simplify-a-polygon-layer-for-the-web)
|
|
@@ -1,102 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>TopoJSON · mapshaper docs</title>
|
|
7
|
-
<meta name="description" content="How Mapshaper reads and writes TopoJSON, including quantization and multi-layer output.">
|
|
8
|
-
<link rel="icon" type="image/png" href="/images/icon.png">
|
|
9
|
-
<link rel="stylesheet" href="/docs/_assets/highlight.css">
|
|
10
|
-
<link rel="stylesheet" href="/docs/_assets/docs.css">
|
|
11
|
-
</head>
|
|
12
|
-
<body class="">
|
|
13
|
-
|
|
14
|
-
<header class="page-header">
|
|
15
|
-
<a href="/" class="mapshaper-logo">map<span class="logo-highlight">shaper</span></a>
|
|
16
|
-
<span class="header-section-label">Docs</span>
|
|
17
|
-
<nav class="header-nav">
|
|
18
|
-
<a href="/">Web app</a>
|
|
19
|
-
<a href="https://github.com/mbloch/mapshaper">GitHub</a>
|
|
20
|
-
<a href="/sponsor.html" class="sponsor-link"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> Become a sponsor</a>
|
|
21
|
-
</nav>
|
|
22
|
-
</header>
|
|
23
|
-
|
|
24
|
-
<div class="docs-layout">
|
|
25
|
-
|
|
26
|
-
<aside class="docs-sidebar">
|
|
27
|
-
<div class="sidebar-inner">
|
|
28
|
-
<nav class="docs-nav"><ul class="top-links"><li><a href="/docs/">Home</a></li><li><a href="/docs/whats-new.html">What's new</a></li><li><a href="/docs/reference.html">Command reference</a></li><li><a href="/docs/gallery/">Gallery</a></li></ul><h2>Getting started</h2><ul><li><a href="/docs/essentials/command-line.html">The command-line tool</a></li><li><a href="/docs/essentials/web-app.html">The web app</a></li></ul><h2>Guides</h2><ul><li><a href="/docs/guides/simplification.html">Simplification</a></li><li><a href="/docs/guides/expressions.html">JavaScript expressions</a></li><li><a href="/docs/guides/projections.html">Projections</a></li><li><a href="/docs/guides/topology.html">Topology and cleaning</a></li><li><a href="/docs/guides/combining-layers.html">Combining two layers</a></li><li><a href="/docs/guides/programmatic.html">Using Mapshaper from Node.js</a></li></ul><h2>Formats</h2><ul><li><a href="/docs/formats/overview.html">Overview</a></li><li><a href="/docs/formats/shapefile.html">Shapefile</a></li><li><a href="/docs/formats/geojson.html">GeoJSON</a></li><li><a href="/docs/formats/topojson.html" class="is-active">TopoJSON</a></li><li><a href="/docs/formats/geopackage.html">GeoPackage</a></li><li><a href="/docs/formats/flatgeobuf.html">FlatGeobuf</a></li><li><a href="/docs/formats/kml.html">KML / KMZ</a></li><li><a href="/docs/formats/csv.html">CSV / TSV</a></li><li><a href="/docs/formats/dbf.html">DBF</a></li><li><a href="/docs/formats/json.html">JSON records</a></li><li><a href="/docs/formats/svg.html">SVG</a></li><li><a href="/docs/formats/snapshot.html">Mapshaper snapshot</a></li></ul><h2>Examples</h2><ul><li><a href="/docs/examples/basics.html">Basics</a></li><li><a href="/docs/examples/globe.html">Globe</a></li><li><a href="/docs/examples/us-states.html">U.S. state map</a></li></ul></nav>
|
|
29
|
-
</div>
|
|
30
|
-
</aside>
|
|
31
|
-
|
|
32
|
-
<main class="docs-main">
|
|
33
|
-
<article class="docs-article">
|
|
34
|
-
<div class="docs-breadcrumbs"><a href="/docs/">Docs</a> › Formats › TopoJSON</div>
|
|
35
|
-
<h1 id="topojson">TopoJSON</h1>
|
|
36
|
-
<p>TopoJSON is a JSON-based format that encodes geographic topology: shared boundaries between adjacent features are stored once instead of duplicated. For datasets with shared boundaries (administrative divisions, watersheds, anything with adjacency) the resulting file is often 2–5× smaller than the equivalent GeoJSON. A single TopoJSON file can hold multiple layers, making it a natural choice for shipping a complete map (e.g. countries + states + cities) in one HTTP request.</p>
|
|
37
|
-
<p><strong>File extensions:</strong> <code>.json</code>, <code>.topojson</code> · <strong>Read:</strong> ✓ · <strong>Write:</strong> ✓ · <strong>Multi-layer:</strong> ✓</p>
|
|
38
|
-
<h3 id="cli-examples">CLI examples</h3>
|
|
39
|
-
<pre><code class="hljs language-bash">mapshaper world.topojson -info
|
|
40
|
-
mapshaper world.topojson -o format=geojson world.geojson
|
|
41
|
-
mapshaper provinces.shp -o provinces.topojson
|
|
42
|
-
mapshaper provinces.shp -o quantization=10000 provinces.topojson
|
|
43
|
-
mapshaper countries.shp states.shp -o singles output/
|
|
44
|
-
</code></pre>
|
|
45
|
-
<h3 id="format-specific-input-options">Format-specific input options</h3>
|
|
46
|
-
<ul>
|
|
47
|
-
<li><code>id-field=</code> — import the <code>id</code> property of each Feature into a data field of the given name.</li>
|
|
48
|
-
<li><code>json-path=</code> — for files where the TopoJSON object is nested inside a larger document.</li>
|
|
49
|
-
</ul>
|
|
50
|
-
<h3 id="format-specific-output-options">Format-specific output options</h3>
|
|
51
|
-
<ul>
|
|
52
|
-
<li><code>quantization=</code> — number of distinct integer values that x and y coordinates are quantized to, <em>per axis</em>. For example, <code>quantization=10000</code> produces a 10000×10000 integer grid regardless of the bounding box's aspect ratio (x and y use independent scales). Lower values produce smaller files at the cost of precision. Equivalent to the <a href="https://github.com/topojson/topojson-server/blob/master/README.md#topoquantize"><code>topoquantize</code></a> CLI's parameter.</li>
|
|
53
|
-
<li><code>topojson-precision=</code> — alternative way to set quantization, expressed as a fraction of the average segment length.</li>
|
|
54
|
-
<li><code>no-quantization</code> — emit full-precision arc coordinates.</li>
|
|
55
|
-
<li><code>singles</code> — write each layer as a separate file, named after the layer.</li>
|
|
56
|
-
<li><code>prettify</code> — pretty-print the JSON.</li>
|
|
57
|
-
<li><code>id-field=</code> — promote an attribute field to the <code>id</code> property of each output object.</li>
|
|
58
|
-
<li><code>bbox</code> — add a top-level <code>bbox</code> array.</li>
|
|
59
|
-
<li><code>extension=</code> — override the default <code>.json</code> extension (e.g. <code>extension=topojson</code>).</li>
|
|
60
|
-
<li><code>width=</code> / <code>height=</code> / <code>pixels=</code> / <code>margin=</code> — switch the output coordinate system from geographic units to pixels, flipping the Y axis. Useful when generating a TopoJSON intended for direct use as SVG path data.</li>
|
|
61
|
-
</ul>
|
|
62
|
-
<h3 id="practical-notes">Practical notes</h3>
|
|
63
|
-
<ul>
|
|
64
|
-
<li>Quantization is on by default with a value calibrated to the geometry (about 0.02 of the average segment length), which keeps files compact while staying visually lossless. Use the <code>quantization=</code> option to override the default.</li>
|
|
65
|
-
<li>Use <code>no-quantization</code> to save coordinates losslessly.</li>
|
|
66
|
-
<li>TopoJSON does not store coordinate system metadata. If your data is in a projected coordinate system, you'll need to manage the projection separately.</li>
|
|
67
|
-
<li>Output is minified by default; pass <code>prettify</code> for human-readable JSON.</li>
|
|
68
|
-
<li>Aggressive quantization can introduce visible misalignments and sliver overlaps. If this happens, raise the <code>quantization=</code> value.</li>
|
|
69
|
-
</ul>
|
|
70
|
-
<h2 id="external-resources">External resources</h2>
|
|
71
|
-
<ul>
|
|
72
|
-
<li><a href="https://github.com/topojson/topojson-specification">TopoJSON specification</a> — the format spec on GitHub.</li>
|
|
73
|
-
<li><a href="https://bost.ocks.org/mike/topology/">How To Infer Topology</a> — Mike Bostock's original explainer of the algorithm and data model behind TopoJSON. Required reading if you want to understand what makes the format compact.</li>
|
|
74
|
-
</ul>
|
|
75
|
-
<h2 id="see-also">See also</h2>
|
|
76
|
-
<ul>
|
|
77
|
-
<li><a href="/docs/examples/basics.html#quantized-topojson">Quantized TopoJSON</a></li>
|
|
78
|
-
</ul>
|
|
79
|
-
|
|
80
|
-
<div class="edit-link">
|
|
81
|
-
<a href="https://github.com/mbloch/mapshaper/edit/master/docs/formats/topojson.md">Edit this page on GitHub</a>
|
|
82
|
-
</div>
|
|
83
|
-
</article>
|
|
84
|
-
</main>
|
|
85
|
-
|
|
86
|
-
<aside class="docs-toc">
|
|
87
|
-
<div class="docs-toc-title">On this page</div><ul><li class="lvl-3"><a href="#cli-examples">CLI examples</a></li><li class="lvl-3"><a href="#format-specific-input-options">Format-specific input options</a></li><li class="lvl-3"><a href="#format-specific-output-options">Format-specific output options</a></li><li class="lvl-3"><a href="#practical-notes">Practical notes</a></li><li class="lvl-2"><a href="#external-resources">External resources</a></li><li class="lvl-2"><a href="#see-also">See also</a></li></ul>
|
|
88
|
-
</aside>
|
|
89
|
-
|
|
90
|
-
</div>
|
|
91
|
-
|
|
92
|
-
<script src="/docs/_assets/docs.js" defer></script>
|
|
93
|
-
|
|
94
|
-
<footer class="docs-footer">
|
|
95
|
-
<div class="docs-footer-inner">
|
|
96
|
-
<span>mapshaper is free software, licensed under <a href="https://www.mozilla.org/MPL/2.0/">MPL 2.0</a>.</span>
|
|
97
|
-
<span><a href="/privacy.html">Privacy</a> · <a href="/terms.html">Terms</a> · <a href="/sponsor.html">Support mapshaper</a></span>
|
|
98
|
-
</div>
|
|
99
|
-
</footer>
|
|
100
|
-
|
|
101
|
-
</body>
|
|
102
|
-
</html>
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: TopoJSON
|
|
3
|
-
description: How Mapshaper reads and writes TopoJSON, including quantization and multi-layer output.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# TopoJSON
|
|
7
|
-
|
|
8
|
-
TopoJSON is a JSON-based format that encodes geographic topology: shared boundaries between adjacent features are stored once instead of duplicated. For datasets with shared boundaries (administrative divisions, watersheds, anything with adjacency) the resulting file is often 2–5× smaller than the equivalent GeoJSON. A single TopoJSON file can hold multiple layers, making it a natural choice for shipping a complete map (e.g. countries + states + cities) in one HTTP request.
|
|
9
|
-
|
|
10
|
-
**File extensions:** `.json`, `.topojson` · **Read:** ✓ · **Write:** ✓ · **Multi-layer:** ✓
|
|
11
|
-
|
|
12
|
-
### CLI examples
|
|
13
|
-
|
|
14
|
-
```bash
|
|
15
|
-
mapshaper world.topojson -info
|
|
16
|
-
mapshaper world.topojson -o format=geojson world.geojson
|
|
17
|
-
mapshaper provinces.shp -o provinces.topojson
|
|
18
|
-
mapshaper provinces.shp -o quantization=10000 provinces.topojson
|
|
19
|
-
mapshaper countries.shp states.shp -o singles output/
|
|
20
|
-
```
|
|
21
|
-
|
|
22
|
-
### Format-specific input options
|
|
23
|
-
|
|
24
|
-
- `id-field=` — import the `id` property of each Feature into a data field of the given name.
|
|
25
|
-
- `json-path=` — for files where the TopoJSON object is nested inside a larger document.
|
|
26
|
-
|
|
27
|
-
### Format-specific output options
|
|
28
|
-
|
|
29
|
-
- `quantization=` — number of distinct integer values that x and y coordinates are quantized to, *per axis*. For example, `quantization=10000` produces a 10000×10000 integer grid regardless of the bounding box's aspect ratio (x and y use independent scales). Lower values produce smaller files at the cost of precision. Equivalent to the [`topoquantize`](https://github.com/topojson/topojson-server/blob/master/README.md#topoquantize) CLI's parameter.
|
|
30
|
-
- `topojson-precision=` — alternative way to set quantization, expressed as a fraction of the average segment length.
|
|
31
|
-
- `no-quantization` — emit full-precision arc coordinates.
|
|
32
|
-
- `singles` — write each layer as a separate file, named after the layer.
|
|
33
|
-
- `prettify` — pretty-print the JSON.
|
|
34
|
-
- `id-field=` — promote an attribute field to the `id` property of each output object.
|
|
35
|
-
- `bbox` — add a top-level `bbox` array.
|
|
36
|
-
- `extension=` — override the default `.json` extension (e.g. `extension=topojson`).
|
|
37
|
-
- `width=` / `height=` / `pixels=` / `margin=` — switch the output coordinate system from geographic units to pixels, flipping the Y axis. Useful when generating a TopoJSON intended for direct use as SVG path data.
|
|
38
|
-
|
|
39
|
-
### Practical notes
|
|
40
|
-
|
|
41
|
-
- Quantization is on by default with a value calibrated to the geometry (about 0.02 of the average segment length), which keeps files compact while staying visually lossless. Use the `quantization=` option to override the default.
|
|
42
|
-
- Use `no-quantization` to save coordinates losslessly.
|
|
43
|
-
- TopoJSON does not store coordinate system metadata. If your data is in a projected coordinate system, you'll need to manage the projection separately.
|
|
44
|
-
- Output is minified by default; pass `prettify` for human-readable JSON.
|
|
45
|
-
- Aggressive quantization can introduce visible misalignments and sliver overlaps. If this happens, raise the `quantization=` value.
|
|
46
|
-
|
|
47
|
-
## External resources
|
|
48
|
-
|
|
49
|
-
- [TopoJSON specification](https://github.com/topojson/topojson-specification) — the format spec on GitHub.
|
|
50
|
-
- [How To Infer Topology](https://bost.ocks.org/mike/topology/) — Mike Bostock's original explainer of the algorithm and data model behind TopoJSON. Required reading if you want to understand what makes the format compact.
|
|
51
|
-
|
|
52
|
-
## See also
|
|
53
|
-
|
|
54
|
-
- [Quantized TopoJSON](/docs/examples/basics.html.md#quantized-topojson)
|
|
@@ -1,80 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>Gallery · mapshaper docs</title>
|
|
7
|
-
<meta name="description" content="Example maps made with Mapshaper, with full source data and reproduction steps for each.">
|
|
8
|
-
<link rel="icon" type="image/png" href="/images/icon.png">
|
|
9
|
-
<link rel="stylesheet" href="/docs/_assets/highlight.css">
|
|
10
|
-
<link rel="stylesheet" href="/docs/_assets/docs.css">
|
|
11
|
-
</head>
|
|
12
|
-
<body class="">
|
|
13
|
-
|
|
14
|
-
<header class="page-header">
|
|
15
|
-
<a href="/" class="mapshaper-logo">map<span class="logo-highlight">shaper</span></a>
|
|
16
|
-
<span class="header-section-label">Docs</span>
|
|
17
|
-
<nav class="header-nav">
|
|
18
|
-
<a href="/">Web app</a>
|
|
19
|
-
<a href="https://github.com/mbloch/mapshaper">GitHub</a>
|
|
20
|
-
<a href="/sponsor.html" class="sponsor-link"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> Become a sponsor</a>
|
|
21
|
-
</nav>
|
|
22
|
-
</header>
|
|
23
|
-
|
|
24
|
-
<div class="docs-layout">
|
|
25
|
-
|
|
26
|
-
<aside class="docs-sidebar">
|
|
27
|
-
<div class="sidebar-inner">
|
|
28
|
-
<nav class="docs-nav"><ul class="top-links"><li><a href="/docs/">Home</a></li><li><a href="/docs/whats-new.html">What's new</a></li><li><a href="/docs/reference.html">Command reference</a></li><li><a href="/docs/gallery/" class="is-active">Gallery</a></li></ul><h2>Getting started</h2><ul><li><a href="/docs/essentials/command-line.html">The command-line tool</a></li><li><a href="/docs/essentials/web-app.html">The web app</a></li></ul><h2>Guides</h2><ul><li><a href="/docs/guides/simplification.html">Simplification</a></li><li><a href="/docs/guides/expressions.html">JavaScript expressions</a></li><li><a href="/docs/guides/projections.html">Projections</a></li><li><a href="/docs/guides/topology.html">Topology and cleaning</a></li><li><a href="/docs/guides/combining-layers.html">Combining two layers</a></li><li><a href="/docs/guides/programmatic.html">Using Mapshaper from Node.js</a></li></ul><h2>Formats</h2><ul><li><a href="/docs/formats/overview.html">Overview</a></li><li><a href="/docs/formats/shapefile.html">Shapefile</a></li><li><a href="/docs/formats/geojson.html">GeoJSON</a></li><li><a href="/docs/formats/topojson.html">TopoJSON</a></li><li><a href="/docs/formats/geopackage.html">GeoPackage</a></li><li><a href="/docs/formats/flatgeobuf.html">FlatGeobuf</a></li><li><a href="/docs/formats/kml.html">KML / KMZ</a></li><li><a href="/docs/formats/csv.html">CSV / TSV</a></li><li><a href="/docs/formats/dbf.html">DBF</a></li><li><a href="/docs/formats/json.html">JSON records</a></li><li><a href="/docs/formats/svg.html">SVG</a></li><li><a href="/docs/formats/snapshot.html">Mapshaper snapshot</a></li></ul><h2>Examples</h2><ul><li><a href="/docs/examples/basics.html">Basics</a></li><li><a href="/docs/examples/globe.html">Globe</a></li><li><a href="/docs/examples/us-states.html">U.S. state map</a></li></ul></nav>
|
|
29
|
-
</div>
|
|
30
|
-
</aside>
|
|
31
|
-
|
|
32
|
-
<main class="docs-main">
|
|
33
|
-
<article class="docs-article">
|
|
34
|
-
|
|
35
|
-
<h1 id="gallery">Gallery</h1>
|
|
36
|
-
<p>A collection of example maps made with Mapshaper. Each tile links to a full write-up with the recipe, the source data, and a one-click link to open the finished snapshot in the <a href="/">web app</a>.</p>
|
|
37
|
-
<div class="gallery-grid">
|
|
38
|
-
<a class="gallery-tile" href="/docs/examples/globe.html">
|
|
39
|
-
<div class="gallery-tile-image">
|
|
40
|
-
<img src="/docs/examples/data/globe.svg" alt="Globe locator map">
|
|
41
|
-
</div>
|
|
42
|
-
<div class="gallery-tile-caption">
|
|
43
|
-
<div class="gallery-tile-title">Globe locator map</div>
|
|
44
|
-
<div class="gallery-tile-desc">A simple locator map in the shape of a globe.</div>
|
|
45
|
-
</div>
|
|
46
|
-
</a>
|
|
47
|
-
<a class="gallery-tile" href="/docs/examples/us-states.html">
|
|
48
|
-
<div class="gallery-tile-image">
|
|
49
|
-
<img src="/docs/examples/data/us-states.svg" alt="U.S. state map">
|
|
50
|
-
</div>
|
|
51
|
-
<div class="gallery-tile-caption">
|
|
52
|
-
<div class="gallery-tile-title">U.S. state map</div>
|
|
53
|
-
<div class="gallery-tile-desc">Simple U.S. state map with random, non-adjacent colors</div>
|
|
54
|
-
</div>
|
|
55
|
-
</a>
|
|
56
|
-
</div>
|
|
57
|
-
|
|
58
|
-
<div class="edit-link">
|
|
59
|
-
<a href="https://github.com/mbloch/mapshaper/edit/master/docs/gallery/index.md">Edit this page on GitHub</a>
|
|
60
|
-
</div>
|
|
61
|
-
</article>
|
|
62
|
-
</main>
|
|
63
|
-
|
|
64
|
-
<aside class="docs-toc">
|
|
65
|
-
|
|
66
|
-
</aside>
|
|
67
|
-
|
|
68
|
-
</div>
|
|
69
|
-
|
|
70
|
-
<script src="/docs/_assets/docs.js" defer></script>
|
|
71
|
-
|
|
72
|
-
<footer class="docs-footer">
|
|
73
|
-
<div class="docs-footer-inner">
|
|
74
|
-
<span>mapshaper is free software, licensed under <a href="https://www.mozilla.org/MPL/2.0/">MPL 2.0</a>.</span>
|
|
75
|
-
<span><a href="/privacy.html">Privacy</a> · <a href="/terms.html">Terms</a> · <a href="/sponsor.html">Support mapshaper</a></span>
|
|
76
|
-
</div>
|
|
77
|
-
</footer>
|
|
78
|
-
|
|
79
|
-
</body>
|
|
80
|
-
</html>
|
|
@@ -1,29 +0,0 @@
|
|
|
1
|
-
---
|
|
2
|
-
title: Gallery
|
|
3
|
-
description: Example maps made with Mapshaper, with full source data and reproduction steps for each.
|
|
4
|
-
---
|
|
5
|
-
|
|
6
|
-
# Gallery
|
|
7
|
-
|
|
8
|
-
A collection of example maps made with Mapshaper. Each tile links to a full write-up with the recipe, the source data, and a one-click link to open the finished snapshot in the [web app](/).
|
|
9
|
-
|
|
10
|
-
<div class="gallery-grid">
|
|
11
|
-
<a class="gallery-tile" href="/docs/examples/globe.html">
|
|
12
|
-
<div class="gallery-tile-image">
|
|
13
|
-
<img src="/docs/examples/data/globe.svg" alt="Globe locator map">
|
|
14
|
-
</div>
|
|
15
|
-
<div class="gallery-tile-caption">
|
|
16
|
-
<div class="gallery-tile-title">Globe locator map</div>
|
|
17
|
-
<div class="gallery-tile-desc">A simple locator map in the shape of a globe.</div>
|
|
18
|
-
</div>
|
|
19
|
-
</a>
|
|
20
|
-
<a class="gallery-tile" href="/docs/examples/us-states.html">
|
|
21
|
-
<div class="gallery-tile-image">
|
|
22
|
-
<img src="/docs/examples/data/us-states.svg" alt="U.S. state map">
|
|
23
|
-
</div>
|
|
24
|
-
<div class="gallery-tile-caption">
|
|
25
|
-
<div class="gallery-tile-title">U.S. state map</div>
|
|
26
|
-
<div class="gallery-tile-desc">Simple U.S. state map with random, non-adjacent colors</div>
|
|
27
|
-
</div>
|
|
28
|
-
</a>
|
|
29
|
-
</div>
|
|
@@ -1,109 +0,0 @@
|
|
|
1
|
-
<!DOCTYPE html>
|
|
2
|
-
<html lang="en">
|
|
3
|
-
<head>
|
|
4
|
-
<meta charset="UTF-8">
|
|
5
|
-
<meta name="viewport" content="width=device-width, initial-scale=1">
|
|
6
|
-
<title>"Tutorial: combining two layers" · mapshaper docs</title>
|
|
7
|
-
<meta name="description" content="A step-by-step walkthrough of combining and pruning two boundary layers to produce a custom GeoJSON basemap.">
|
|
8
|
-
<link rel="icon" type="image/png" href="/images/icon.png">
|
|
9
|
-
<link rel="stylesheet" href="/docs/_assets/highlight.css">
|
|
10
|
-
<link rel="stylesheet" href="/docs/_assets/docs.css">
|
|
11
|
-
</head>
|
|
12
|
-
<body class="">
|
|
13
|
-
|
|
14
|
-
<header class="page-header">
|
|
15
|
-
<a href="/" class="mapshaper-logo">map<span class="logo-highlight">shaper</span></a>
|
|
16
|
-
<span class="header-section-label">Docs</span>
|
|
17
|
-
<nav class="header-nav">
|
|
18
|
-
<a href="/">Web app</a>
|
|
19
|
-
<a href="https://github.com/mbloch/mapshaper">GitHub</a>
|
|
20
|
-
<a href="/sponsor.html" class="sponsor-link"><svg viewBox="0 0 24 24" aria-hidden="true"><path d="M12 21.35l-1.45-1.32C5.4 15.36 2 12.28 2 8.5 2 5.42 4.42 3 7.5 3c1.74 0 3.41.81 4.5 2.09C13.09 3.81 14.76 3 16.5 3 19.58 3 22 5.42 22 8.5c0 3.78-3.4 6.86-8.55 11.54L12 21.35z"/></svg> Become a sponsor</a>
|
|
21
|
-
</nav>
|
|
22
|
-
</header>
|
|
23
|
-
|
|
24
|
-
<div class="docs-layout">
|
|
25
|
-
|
|
26
|
-
<aside class="docs-sidebar">
|
|
27
|
-
<div class="sidebar-inner">
|
|
28
|
-
<nav class="docs-nav"><ul class="top-links"><li><a href="/docs/">Home</a></li><li><a href="/docs/whats-new.html">What's new</a></li><li><a href="/docs/reference.html">Command reference</a></li><li><a href="/docs/gallery/">Gallery</a></li></ul><h2>Getting started</h2><ul><li><a href="/docs/essentials/command-line.html">The command-line tool</a></li><li><a href="/docs/essentials/web-app.html">The web app</a></li></ul><h2>Guides</h2><ul><li><a href="/docs/guides/simplification.html">Simplification</a></li><li><a href="/docs/guides/expressions.html">JavaScript expressions</a></li><li><a href="/docs/guides/projections.html">Projections</a></li><li><a href="/docs/guides/topology.html">Topology and cleaning</a></li><li><a href="/docs/guides/combining-layers.html" class="is-active">Combining two layers</a></li><li><a href="/docs/guides/programmatic.html">Using Mapshaper from Node.js</a></li></ul><h2>Formats</h2><ul><li><a href="/docs/formats/overview.html">Overview</a></li><li><a href="/docs/formats/shapefile.html">Shapefile</a></li><li><a href="/docs/formats/geojson.html">GeoJSON</a></li><li><a href="/docs/formats/topojson.html">TopoJSON</a></li><li><a href="/docs/formats/geopackage.html">GeoPackage</a></li><li><a href="/docs/formats/flatgeobuf.html">FlatGeobuf</a></li><li><a href="/docs/formats/kml.html">KML / KMZ</a></li><li><a href="/docs/formats/csv.html">CSV / TSV</a></li><li><a href="/docs/formats/dbf.html">DBF</a></li><li><a href="/docs/formats/json.html">JSON records</a></li><li><a href="/docs/formats/svg.html">SVG</a></li><li><a href="/docs/formats/snapshot.html">Mapshaper snapshot</a></li></ul><h2>Examples</h2><ul><li><a href="/docs/examples/basics.html">Basics</a></li><li><a href="/docs/examples/globe.html">Globe</a></li><li><a href="/docs/examples/us-states.html">U.S. state map</a></li></ul></nav>
|
|
29
|
-
</div>
|
|
30
|
-
</aside>
|
|
31
|
-
|
|
32
|
-
<main class="docs-main">
|
|
33
|
-
<article class="docs-article">
|
|
34
|
-
<div class="docs-breadcrumbs"><a href="/docs/">Docs</a> › Guides › Combining two layers</div>
|
|
35
|
-
<h1 id="tutorial-combining-two-layers-in-the-web-ui">Tutorial: combining two layers in the web UI</h1>
|
|
36
|
-
<blockquote>
|
|
37
|
-
<p>Originally contributed by Amanda Hickman to the project wiki.</p>
|
|
38
|
-
</blockquote>
|
|
39
|
-
<p>This walkthrough shows how to combine and prune two boundary layers to produce a single GeoJSON file you can use as a custom basemap (for example, in <a href="https://www.datawrapper.de/">Datawrapper</a>).</p>
|
|
40
|
-
<p>The example builds a basemap of the San Francisco Bay Area, with both county boundaries and the cities ("places") inside them.</p>
|
|
41
|
-
<p>The walkthrough uses the web app at <a href="/">mapshaper.org</a>, driving the workflow from the <strong>Console</strong>. The same commands work on the CLI — chain them together with leading <code>-</code> prefixes (so <code>clip bayarea_county</code> becomes <code>-clip bayarea_county</code>) and connect them with backslash line continuations.</p>
|
|
42
|
-
<h2 id="the-starting-data">The starting data</h2>
|
|
43
|
-
<p>We'll use two source files:</p>
|
|
44
|
-
<ul>
|
|
45
|
-
<li>A county boundary file from the California Open Data Portal — or, in this case, a <a href="https://geodata.lib.berkeley.edu/catalog/ark28722-s7hs4j">version clipped to the shoreline</a> from UC Berkeley's Geo Data Commons. The shoreline-clipped version reads more naturally on a map than the legal-boundary version, which extends into the bay.</li>
|
|
46
|
-
<li>A statewide <a href="https://geodata.lib.berkeley.edu/catalog/ark28722-s7bp4z">places boundary file</a> for city boundaries.</li>
|
|
47
|
-
</ul>
|
|
48
|
-
<p>The legal county boundaries from the Census TIGER files extend straight across the water — San Francisco even reaches out to include the Farallon Islands:</p>
|
|
49
|
-
<p><img src="/docs/images/tiger-counties.png" alt="Bay Area counties from the Census TIGER file, with boundaries cutting across the bay and extending offshore"></p>
|
|
50
|
-
<p>The Berkeley library's version is clipped to the shoreline, so the bay shows as empty space between the counties:</p>
|
|
51
|
-
<p><img src="/docs/images/cal-counties.png" alt="The same Bay Area counties, with each polygon clipped to the coastline so the bay is visible between them"></p>
|
|
52
|
-
<p>Download both as <code>.zip</code> files.</p>
|
|
53
|
-
<h2 id="open-them-in-mapshaper">Open them in Mapshaper</h2>
|
|
54
|
-
<p>Drag the two <code>.zip</code> files onto <a href="/">mapshaper.org</a>, or run the web app locally with <code>mapshaper-gui</code>. You'll end up with two layers loaded into the session.</p>
|
|
55
|
-
<h2 id="set-the-projection">Set the projection</h2>
|
|
56
|
-
<p>Datawrapper expects WGS84 coordinates. Open the <strong>Console</strong> (top-right of the header) and run, with each layer selected:</p>
|
|
57
|
-
<pre><code>proj wgs84
|
|
58
|
-
</code></pre>
|
|
59
|
-
<p>You'll need to run this once per layer — switch which layer is selected in the layer panel between runs.</p>
|
|
60
|
-
<p>→ See the <a href="/docs/reference.html#-proj"><code>-proj</code> reference</a>.</p>
|
|
61
|
-
<h2 id="clip-the-places-layer-to-the-bay-area">Clip the places layer to the Bay Area</h2>
|
|
62
|
-
<p>The places layer covers the whole state. We only want places inside the Bay Area counties. With the places layer selected:</p>
|
|
63
|
-
<pre><code>clip bayarea_county
|
|
64
|
-
</code></pre>
|
|
65
|
-
<p>→ See the <a href="/docs/reference.html#-clip"><code>-clip</code> reference</a>.</p>
|
|
66
|
-
<p>Alternatively, if the places layer has a <code>COUNTY</code> attribute, a filter expression works too:</p>
|
|
67
|
-
<pre><code>filter '["Marin", "Contra Costa", "Alameda",
|
|
68
|
-
"San Francisco", "Santa Clara", "San Mateo"].includes(COUNTY)'
|
|
69
|
-
</code></pre>
|
|
70
|
-
<p>→ See the <a href="/docs/reference.html#-filter"><code>-filter</code> reference</a>.</p>
|
|
71
|
-
<h2 id="merge-the-layers">Merge the layers</h2>
|
|
72
|
-
<p>The two layers can now be combined into a single layer with <a href="/docs/reference.html#-merge-layers"><code>-merge-layers</code></a>:</p>
|
|
73
|
-
<pre><code>merge-layers target=bayarea_county,california_place_clipped force
|
|
74
|
-
</code></pre>
|
|
75
|
-
<p>The <code>force</code> flag is needed because the two layers have different attribute schemas; without it, Mapshaper refuses to merge layers whose fields don't match.</p>
|
|
76
|
-
<h2 id="export">Export</h2>
|
|
77
|
-
<p>Open the <strong>Export</strong> panel (top-right of the header), pick <strong>GeoJSON</strong> as the format, and save the merged layer. You can now upload that file to Datawrapper (or any other tool that accepts GeoJSON) as a custom basemap.</p>
|
|
78
|
-
<h2 id="what-youve-learned">What you've learned</h2>
|
|
79
|
-
<ul>
|
|
80
|
-
<li>How to load multiple data files into one Mapshaper session.</li>
|
|
81
|
-
<li>How to apply a projection inside the web UI's console.</li>
|
|
82
|
-
<li>How to clip one layer by another.</li>
|
|
83
|
-
<li>How to merge two layers into a single layer for export.</li>
|
|
84
|
-
</ul>
|
|
85
|
-
<p>For more on layers and how Mapshaper organizes multi-layer datasets, see <a href="/docs/essentials/command-line.html#working-with-layers">The command-line tool</a>.</p>
|
|
86
|
-
|
|
87
|
-
<div class="edit-link">
|
|
88
|
-
<a href="https://github.com/mbloch/mapshaper/edit/master/docs/guides/combining-layers.md">Edit this page on GitHub</a>
|
|
89
|
-
</div>
|
|
90
|
-
</article>
|
|
91
|
-
</main>
|
|
92
|
-
|
|
93
|
-
<aside class="docs-toc">
|
|
94
|
-
<div class="docs-toc-title">On this page</div><ul><li class="lvl-2"><a href="#the-starting-data">The starting data</a></li><li class="lvl-2"><a href="#open-them-in-mapshaper">Open them in Mapshaper</a></li><li class="lvl-2"><a href="#set-the-projection">Set the projection</a></li><li class="lvl-2"><a href="#clip-the-places-layer-to-the-bay-area">Clip the places layer to the Bay Area</a></li><li class="lvl-2"><a href="#merge-the-layers">Merge the layers</a></li><li class="lvl-2"><a href="#export">Export</a></li><li class="lvl-2"><a href="#what-youve-learned">What you've learned</a></li></ul>
|
|
95
|
-
</aside>
|
|
96
|
-
|
|
97
|
-
</div>
|
|
98
|
-
|
|
99
|
-
<script src="/docs/_assets/docs.js" defer></script>
|
|
100
|
-
|
|
101
|
-
<footer class="docs-footer">
|
|
102
|
-
<div class="docs-footer-inner">
|
|
103
|
-
<span>mapshaper is free software, licensed under <a href="https://www.mozilla.org/MPL/2.0/">MPL 2.0</a>.</span>
|
|
104
|
-
<span><a href="/privacy.html">Privacy</a> · <a href="/terms.html">Terms</a> · <a href="/sponsor.html">Support mapshaper</a></span>
|
|
105
|
-
</div>
|
|
106
|
-
</footer>
|
|
107
|
-
|
|
108
|
-
</body>
|
|
109
|
-
</html>
|