mapshaper
Version:
A tool for editing vector datasets for mapping and GIS.
323 lines (279 loc) • 13 kB
HTML
<html>
<head>
<title>mapshaper</title>
<meta name="Description" content="A tool for topologically aware shape simplification. Reads and writes Shapefile, GeoJSON and TopoJSON formats.">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<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>
<!-- 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>
<defs>
<style>
.cls-1 {
fill: #0c0a0a;
}
</style>
</defs>
<g id="left_arrow">
<polygon class="cls-1" points="0.5 6 6.5 11.5 6.5 0.5 0.5 6"/>
</g>
</svg>
<svg id="info-menu-icon" xmlns="http://www.w3.org/2000/svg" width="8" height="12" viewBox="0 0 8 12">
<g id="left_arrow">
<polygon class="cls-1" points="0.5 6 6.5 11.5 6.5 0.5 0.5 6"/>
</g>
</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="btn header-btn layer-name"></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></div>
<div id="mode-buttons" class="page-header-buttons">
<span class="console-btn header-btn btn">Console</span><span class="display-btn header-btn btn">Display</span><span class="separator"></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>
</div>
<div id="splash-buttons" class="page-header-buttons">
<a href="https://github.com/mbloch/mapshaper/wiki"><span id="wiki-btn" class="header-btn btn">Wiki</span></a><span class="separator"></span><a href="https://github.com/mbloch/mapshaper"><span id="github-btn" class="header-btn btn">GitHub</span></a>
</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="layer-control main-area popup-dialog">
<div class="info-box">
<div class="info-box-scrolled">
<div class="layer-menu">
<h3>Layers</h3>
<div class="pin-all pinnable">
<img class="eye-btn black-eye" src="images/eye.png">
<img class="eye-btn green-eye" src="images/eye2.png">
</div>
<div class="layer-list"></div>
<!-- <h4>Sources</h4> -->
<div class="no-layer-note">No data has been added</div>
<div class="source-file-section">
<h4>Source files</h4>
<div class="file-list"></div>
</div>
<div>
<div id="add-file-btn" class="dialog-btn btn">Add files</div>
<div id="add-empty-btn" class="dialog-btn btn">Add empty layer</div>
</div>
</div>
</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="https://github.com/mbloch/mapshaper/wiki/Command-Reference#-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="display-options main-area popup-dialog">
<div class="info-box">
<div class="close2-btn"></div>
<h3>Display options</h3>
<div class=""><label for="intersections-opt"><input type="checkbox" id="intersections-opt" class="checkbox intersections-opt"/>detect line intersections</label></div>
<div class=""><label for="ghost-opt"><input type="checkbox" id="ghost-opt" class="checkbox ghost-opt"/>show reference lines</label></div>
<div class="basemap-opts">
<h4>Basemaps</h4>
<p class="basemap-warning"></p>
<div class="basemap-styles basemap-buttons"></div>
<p class="basemap-note"></p>
<div>
<!-- <div class="close-btn btn dialog-btn">Close</div> -->
<div class="clear-btn btn dialog-btn disabled">Clear</div>
<div class="fade-btn btn dialog-btn disabled">Fade</div>
<!-- <div class="hide-btn btn dialog-btn disabled">Hide</div> -->
</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 for="import-retain-opt"><input type="checkbox" class="checkbox 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 for="planar-opt"><input type="checkbox" class="checkbox 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, KML and CSV formats 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">
<!-- <h4>Options</h4> -->
</div>
<div style="margin-top: 10px"><input type="text" class="text-input advanced-options" placeholder="import options" />
<a href="https://github.com/mbloch/mapshaper/wiki/Command-Reference#-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></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> <!-- .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="console main-area console-area">
<div class="console-window"><div class="console-buffer selectable"></div></div>
</div>
<div class="mshp-main-map main-area map-area">
<div class="intersection-display">
<span class="intersection-count">0 line intersections</span>
<div class="repair-btn text-btn colored-text">Repair</div>
</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" type="text/javascript"></script>
<script src="modules.js" type="text/javascript"></script>
<script src="mapshaper.js" type="text/javascript"></script>
<script src="manifest.js" type="text/javascript"></script>
<script src="mapshaper-gui.js" type="text/javascript"></script>
</body>
</html>