mapshaper
Version:
A tool for editing geospatial data for mapping and GIS.
404 lines (362 loc) • 19.9 kB
HTML
<html lang="en">
<head>
<title>Mapshaper</title>
<meta name="Description" content="A topology-aware tool for editing and converting geospatial data. Works with Shapefile, GeoJSON, TopoJSON, GeoPackage, FlatGeobuf, GeoParquet, GeoTIFF, KML and CSV — in the browser or on the command line.">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<script>
(function() {
try {
var s = location.search || '';
if (!window.location.hostname.endsWith("mapshaper.org") ||
s.indexOf('files=') !== -1 || s.indexOf('catalog=') !== -1) {
// hide spash-screen header links
document.documentElement.className += ' mapshaper-preload';
}
} catch (e) {}
})();
</script>
<link rel="stylesheet" href="page.css">
<link rel="stylesheet" href="elements.css">
<link rel="icon" type="image/png" href="images/icon.png">
</head>
<body>
<div class="hidden">
<svg version="1.1" id="home-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="14px" height="19px" viewBox="0 0 14 16">
<g>
<polygon points="13,7 13,6 12,6 12,5 11,5 11,4 10,4 10,3 9,3 9,2 8,2 8,1 6,1 6,2 5,2 5,3 4,3 4,4 3,4 3,5 2,5
2,6 1,6 1,7 0,7 0,9 2,9 2,14 6,14 6,10 8,10 8,14 12,14 12,9 14,9 14,7"/>
</g>
</svg>
<svg version="1.1" id="zoom-in-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="14px" height="21px" viewBox="0 0 14 14">
<g>
<polygon points="13,5 9,5 9,1 5,1 5,5 1,5 1,9 5,9 5,13 9,13 9,9 13,9"/>
</g>
</svg>
<!-- adjusted height -->
<svg version="1.1" id="zoom-out-icon" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px"
y="0px" width="14px" height="16px" viewBox="0 -1 14 10">
<g>
<polygon points="1,1 13,1 13,5 1,5 1,1" />
</g>
</svg>
<svg id="text-tool-icon" xmlns="http://www.w3.org/2000/svg" width="15" height="22" viewBox="0 0 15 22">
<path d="M13.4125,6.1758c-.0735,0-.1704.0087-.3023.0225-.35.0418-1.1581.0841-1.6018.0841H3.4416c-.4199,0-1.2035-.0418-1.5848-.0845-.1272-.0133-.2242-.022-.2977-.022-.5733,0-.5733.5104-.5733.678v3.8421h.9614c.8167,0,1.1245-.4428,1.2361-.7083.43-1.0372.9151-1.2196,1.775-1.2196h.6348v9.7486c0,.3918-.0528.4281-.463.7111l-.0919.0634c-.4874.3427-.6362.5765-.6362,1.0014v1.1346h6.1463v-1.1346c0-.4222-.1617-.6753-.6992-1.0441-.435-.3023-.4708-.3266-.4708-.7318v-9.7486h.6353c.8439,0,1.3253.1833,1.7754,1.2205.1851.4428.6307.7074,1.1925.7074h1.0042v-3.8421c0-.1677,0-.678-.5733-.678Z"/>
</svg>
<!-- adjusted height -->
<svg id="pointer-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" width="15" height="22" viewBox="0 0 15 20"><rect x="7.4126" y="11.0354" width="3.9102" height="7.9841" transform="translate(-5.8889 6.0377) rotate(-27.5536)" fill="#30d4ef"/><polygon points="2.57 2.086 2.718 16.056 13.944 10.198 2.57 2.086" fill="#30d4ef"/></svg>
<!-- adjusted height -->
<svg id="ribbon-icon" data-name="Layer 1" xmlns="http://www.w3.org/2000/svg" width="15" height="25" viewBox="0 1 15 20">
<polygon points="8 14.5 13 19 13 4 3 4 3 19 8 14.5" fill="#30d4ef"/>
</svg>
<svg id="undo-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M1.5,8 L7,4.5 L7,7 C10,7 12,9 12,11 L12,13 L10,13 L10,11 C10,10 9,9 7,9 L7,11.5 Z"/>
</svg>
<svg id="redo-icon" version="1.1" xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16">
<path d="M14.5,8 L9,4.5 L9,7 C6,7 4,9 4,11 L4,13 L6,13 L6,11 C6,10 7,9 9,9 L9,11.5 Z"/>
</svg>
</div>
<div class="page-header">
<div class="mapshaper-logo">map<span class="logo-highlight">shaper</span></div>
<div class="layer-control-btn"><span class="active-layer-label btn" role="button" tabindex="0" aria-label="Open layers panel"></span></div>
<div class="simplify-control-wrapper"><div class="simplify-control"><div class="header-btn btn simplify-settings-btn">Settings</div>
<div class="slider">
<div class="handle"><img src="images/slider_handle_v1.png" alt=""></div>
<div class="track"></div>
</div>
<input type="text" value="label" class="clicktext">
<!-- <div class="header-btn btn simplify-done-btn">Done</div> -->
</div></div>
<div id="mode-buttons" class="page-header-buttons">
<!-- <span class="project-btn header-btn btn">Project</span><span class="separator"> -->
<span class="messages-btn header-btn btn" role="button" aria-label="Messages" aria-haspopup="true" aria-expanded="false" title="Messages"><svg viewBox="0 0 16 16" aria-hidden="true" width="16" height="14"><path d="M2 3 h12 a1 1 0 0 1 1 1 v7 a1 1 0 0 1 -1 1 H8 l-5 4 v-4 H2 a1 1 0 0 1 -1 -1 V4 a1 1 0 0 1 1 -1 z"/></svg><span class="messages-badge hidden" aria-hidden="true">0</span></span><span class="display-btn header-btn btn">Display</span><span class="separator"></span><span class="history-btn header-btn btn" role="button" aria-haspopup="true" aria-expanded="false" tabindex="0">History</span><span class="separator"></span><span class="simplify-btn header-btn btn">Simplify</span><span class="separator"></span><span class="export-btn header-btn btn">Export</span><span class="separator"></span><span id="header-menu-btn" class="header-btn btn" role="button" aria-label="More links" aria-haspopup="true" aria-expanded="false" tabindex="0"><svg viewBox="0 0 16 16" aria-hidden="true" width="16" height="14"><rect x="1" y="3" width="14" height="2"/><rect x="1" y="7" width="14" height="2"/><rect x="1" y="11" width="14" height="2"/></svg></span>
<div id="header-menu-dropdown" class="hidden" role="menu" aria-labelledby="header-menu-btn">
<a class="header-menu-item" href="/docs/" target="_blank" rel="noopener" role="menuitem">Docs</a>
<a class="header-menu-item" href="https://github.com/mbloch/mapshaper" target="_blank" rel="noopener" role="menuitem">GitHub</a>
<a class="header-menu-item" href="https://github.com/mbloch/mapshaper/issues/new" target="_blank" rel="noopener" role="menuitem">Report an issue</a>
<a class="header-menu-item" href="https://tally.so/r/44Njok" target="_blank" rel="noopener" role="menuitem">1-minute survey</a>
<a class="header-menu-item header-menu-sponsor" href="sponsor.html" target="_blank" rel="noopener" role="menuitem"><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>
</div>
</div>
<div id="splash-buttons" class="page-header-buttons">
<a href="/docs/"><span id="wiki-btn" class="header-btn btn">Docs</span></a><span class="separator"></span><a href="https://github.com/mbloch/mapshaper"><span id="github-btn" class="header-btn btn">GitHub</span></a><span class="separator"></span><a href="https://tally.so/r/44Njok" target="_blank" rel="noopener"><span id="survey-en-btn" class="header-btn btn">1-minute survey</span></a><span class="separator"></span><a href="sponsor.html"><span id="sponsor-btn" class="header-btn btn"><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</span></a>
</div>
</div>
<div class="history-menu-dropdown main-area popup-dialog" role="menu" aria-label="History menu">
<div class="info-box history-menu-box">
<div class="close2-btn"></div>
<h3>History</h3>
<div class="option-menu">
<label class="history-toggle-btn history-menu-item"><input type="checkbox" class="checkbox history-undo-checkbox">enable undo</label>
<div class="history-menu-note"></div>
<div class="history-clear-btn history-menu-item" role="menuitem">clear undo history</div>
<div class="history-command-log-btn history-menu-item" role="menuitem">view command history</div>
<div class="history-create-snapshot-btn history-menu-item" role="menuitem">create snapshot</div>
<div class="history-snapshot-list"></div>
</div>
</div>
</div>
<div id="mshp-not-supported" class="main-area">
<div class="info-box">
<h3>Unfortunately, mapshaper can't run in <span class="unsupported-browser">this web browser</span></h3>
<div>For best results, try <a href="https://www.google.com/chrome/browser/desktop/">Google Chrome</a> or <a href="http://www.mozilla.org/en-US/firefox/new/">Mozilla Firefox</a>.</div>
</div>
</div>
<div class="box-tool-options sidebar-buttons">
<div>
<div class="select-btn btn sidebar-btn">Select</div>
<div class="clip-btn btn sidebar-btn">Clip</div>
<div class="erase-btn btn sidebar-btn">Erase</div>
<div class="rect-btn btn sidebar-btn">To shape</div>
<div class="frame-btn btn sidebar-btn">Frame</div>
<div class="info-btn btn sidebar-btn">Bounds</div>
<div class="box-coords selectable"></div>
<div class="cancel-btn btn sidebar-btn">Cancel</div>
</div>
</div>
<div class="selection-tool-options sidebar-buttons">
<div>
<div class="delete-btn btn sidebar-btn">Delete</div>
<div class="filter-btn btn sidebar-btn">Keep</div>
<div class="duplicate-btn btn sidebar-btn">Duplicate</div>
<div class="split-btn btn sidebar-btn">Split</div>
<div class="coords-btn btn sidebar-btn toggle-btn">Bounds</div>
<div class="box-coords selectable"></div>
<div class="data-btn btn sidebar-btn toggle-btn">Edit data</div>
<div class="cancel-btn btn sidebar-btn">Clear</div>
</div>
</div>
<div class="export-options main-area popup-dialog">
<div class="info-box">
<div class="close2-btn"></div>
<h3>Export options</h3>
<div class="export-layers">
<h4 class="menu-title">Layers</h4>
<div class="export-layer-list option-menu"></div>
</div>
<div class="export-zip-option option-menu">
<div style="height:6px"></div>
</div>
<h4>File format</h4>
<div class="export-formats option-menu">
</div>
<div style="height:11px"></div>
<div class="option-menu"><input type="text" class="text-input advanced-options" placeholder="command line options">
<a href="/docs/reference.html#-o-output" target="mapshaper_output_docs">
<div class="tip-button">?<div class="tip-anchor">
<div class="tip">Enter options from the command line interface for
the -o command. Examples: bbox no-quantization
precision=0.001. Click to see all options.</div></div></div></a>
<!-- <div class="option-menu">
<input id="ofile-name" class="text-input" type="text" placeholder="output file name" />
</div> -->
<div><span id="save-preference" style="display: none;"><input type="checkbox">choose output directory</span></div>
<div><span id="save-to-clipboard" style="display: inline-block;"><input type="checkbox">save to clipboard</span></div>
</div>
<div id="export-btn" class="btn dialog-btn" style="margin-top: 5px;">Export</div>
</div>
</div>
<div class="messages-panel main-area popup-dialog popup-align-left">
<div class="info-box messages-box">
<div class="close2-btn"></div>
<h3>Messages</h3>
<div class="messages-empty">No messages yet.</div>
<div class="messages-list"></div>
<div class="messages-footer">
<span class="messages-clear-btn btn dialog-btn">Clear all</span>
</div>
</div>
</div>
<div class="display-options main-area popup-dialog">
<div class="info-box add-basemap-menu">
<!-- <div class="close2-btn"></div> -->
<h3>Add basemap layer</h3>
Name (optional)
<input type="text" class="add-layer-name" placeholder="">
<div class="menu-section">
Option 1: Mapbox style URL and key
<input type="text" class="add-mapbox-url" placeholder="mapbox://...">
<input type="text" class="add-mapbox-key" placeholder="key">
</div>
<div class="menu-section">
Option 2: raster tile URL template
<input type="text" class="add-template-url" placeholder="https://...">
<div><input type="checkbox" class="tms">TMS (reversed y-index)</div>
</div>
<div>
<div class="add-layer-btn btn dialog-btn">Add</div>
<div class="add-cancel-btn btn dialog-btn">Cancel</div>
</div>
</div>
<div class="info-box display-main-options">
<div class="close2-btn"></div>
<h3>Display options</h3>
<div class=""><label><input type="checkbox" id="intersections-opt" class="checkbox intersections-opt">detect line intersections</label><div class="tip-button">?<div class="tip-anchor">
<div class="tip">Mark points where a layer's lines
cross or overlap.</div></div></div></div>
<div class=""><label><input type="checkbox" id="compare-opt" class="checkbox compare-opt">compare with original</label><div class="tip-button">?<div class="tip-anchor">
<div class="tip">Overlay the original shapes to compare
before and after an edit. Only works with
the buffer, smooth and simplify commands.</div></div></div></div>
<div class="basemap-opts">
<h4>Basemaps</h4>
<p class="basemap-warning"></p>
<!-- <div class="basemap-styles basemap-buttons"></div> -->
<div class="added-basemaps">
</div>
<p class="basemap-note"></p>
<div class="add-basemap"><span class="add-btn inline-btn btn">Add</span> a basemap</div>
</div>
</div>
</div>
<div class="project-options main-area popup-dialog popup-align-left">
<div class="info-box">
<div class="close2-btn"></div>
<h3>Projections</h3>
<div class="option-menu">
<div id="proj-list"></div>
<div id="proj-option-list"></div>
</div>
<div>
<div class="preview-btn btn dialog-btn">Preview</div>
<div class="apply-btn btn dialog-btn">Apply</div>
</div>
</div>
</div>
<div class="simplify-options main-area popup-dialog">
<div class="info-box">
<div class="close2-btn"></div>
<h3>Simplification</h3>
<div class="option-menu">
<div><label><input type="checkbox" class="checkbox import-retain-opt" id="import-retain-opt">prevent shape removal</label>
<div class="tip-button">?<div class="tip-anchor">
<div class="tip">Prevent small polygon features from
disappearing at high simplification. Keeps
the largest ring of multi-ring features.
</div></div></div></div>
<div class="planar-opt-wrapper"><label><input type="checkbox" class="checkbox planar-opt" id="planar-opt">use planar geometry</label>
<div class="tip-button">?<div class="tip-anchor">
<div class="tip">Treat x, y values as Cartesian coordinates
on a plane, rather than as longitude, latitude
coordinates on a sphere.
</div></div></div></div>
</div>
<h4>Method</h4>
<div class="option-menu">
<div><label><input type="radio" name="method" value="dp" class="radio">Douglas-Peucker</label><div class="tip-button">?<div class="tip-anchor">
<div class="tip">Simplified lines remain within a set
distance of original lines. Good for
thinning dense points, but spikes
tend to form at high simplification.</div></div></div>
</div>
<div><label><input type="radio" name="method" value="visvalingam" class="radio">Visvalingam / effective area</label><div class="tip-button">?<div class="tip-anchor">
<div class="tip">Lines are simplified by iteratively
removing the point that forms
the least-area triangle with two
adjacent points.</div></div></div>
</div>
<div><label><input type="radio" name="method" value="weighted_visvalingam" class="radio">Visvalingam / weighted area</label><div class="tip-button">?<div class="tip-anchor">
<div class="tip">Points located at the vertex
of more acute angles are
preferentially removed, for
a smoother appearance.</div></div></div></div>
</div> <!-- option menu -->
<div>
<!-- <div class="cancel-btn btn dialog-btn">Cancel</div> -->
<div class="submit-btn btn dialog-btn">Apply</div>
</div>
</div> <!-- .info-box -->
</div> <!-- simplify-options -->
<div id="import-options" class="main-area popup-dialog">
<div class="info-box">
<div class="cancel-btn close2-btn"></div>
<h3 class="list-header">Import files</h3>
<div class="import-instructions">
<span><input type="checkbox" class="advanced-import-options">with advanced options</span>
<div class="mini-drop-area">
<div class="subtitle">Drop, paste or <span class="add-btn inline-btn btn"><span class="label-text">select</span></span> files to import.</div>
<div class="subtitle">Shapefile, GeoJSON, TopoJSON, GeoPackage, FlatGeobuf, GeoParquet, GeoTIFF, KML, CSV and more are supported. Files can be zipped or gzipped.</div>
</div>
</div>
<div class="queued-file-section">
<!-- <h4>Files</h4> -->
<div class="dropped-file-list"></div>
<div class="option-menu">
<div id="path-import-options">
<div id="gpkg-import-options" class="hidden">
<h4>GeoPackage layers</h4>
<div class="gpkg-layer-list option-menu"></div>
</div>
</div>
<div style="margin-top: 10px"><input type="text" class="text-input advanced-options" placeholder="import options">
<a href="/docs/reference.html#-i-input" target="mapshaper_import_docs">
<div class="tip-button">?<div class="tip-anchor">
<div class="tip">Enter options from the command line
interface. Examples: <span id="import-option-examples">snap no-topology
encoding=big5</span>. Click to see all options.</div></div></div>
</a>
</div>
<!-- <div class="cancel-btn btn dialog-btn">Cancel</div>
<div class="add-btn btn dialog-btn">Select</div> -->
<div class="submit-btn btn dialog-btn default-btn disabled">Submit</div>
</div>
</div>
</div> <!-- .info-box -->
</div> <!-- import-options -->
<!-- TODO: remove #mshp-main-page without causing the map to jitter when resized -->
<div id="mshp-main-page">
<div class="main-area sidebar-panels">
<div class="layer-control layer-area sidebar-panel">
<div class="info-box">
<div class="info-box-scrolled">
<div class="layer-menu">
<div class="layer-add-links">
<span id="add-file-btn" class="layer-menu-link">Add files</span><span class="layer-menu-link-separator"> · </span><span id="add-empty-btn" class="layer-menu-link">Add empty layer</span>
</div>
<div class="layer-item">
<h3>Layers</h3>
<div class="pin-all pinnable">
<img class="eye-btn black-eye" src="images/eye.png" alt="">
<img class="eye-btn green-eye" src="images/eye2.png" alt="">
</div>
</div>
<div class="layer-list"></div>
<div class="no-layer-note">No data has been added</div>
</div>
</div>
</div>
</div>
<div class="console console-area sidebar-panel">
<div class="sidebar-panels-resize-handle" role="separator" aria-orientation="horizontal" aria-label="Resize panels"></div>
<div class="console-window"><div class="console-buffer selectable"></div></div>
</div>
</div>
<div class="sidebar-resize-handle" role="separator" aria-orientation="vertical" aria-label="Resize sidebar"></div>
<div class="sidebar-tabs">
<div class="sidebar-tab layer-tab" role="button" tabindex="0" aria-label="Toggle layers panel" aria-expanded="false">Layers</div>
<div class="sidebar-tab console-tab console-btn" role="button" tabindex="0" aria-label="Toggle console" aria-expanded="false">Console</div>
</div>
<div class="mshp-main-map main-area map-area">
<div class="intersection-display">
<span class="intersection-count">0 line intersections</span>
<span class="repair-btn text-btn colored-text">repair</span>
</div>
<div class="basemap-overlay-buttons basemap-buttons"></div>
<div class="map-layers"></div>
<div class="basemap-container"><div class="basemap"></div></div>
</div>
</div>
<div id="import-options-drop-area" class="main-area drop-area-wrapper hidden">
<div class="drop-area"></div>
</div>
<script src="basemap.js"></script>
<script src="modules.js"></script>
<script src="mapshaper.js"></script>
<script src="manifest.js"></script>
<script src="mapshaper-gui.js"></script>
</body>
</html>