Skip to content

Instantly share code, notes, and snippets.

@frogcat

frogcat/20170714.md

Created July 14, 2017 04:35
Show Gist options
  • Save frogcat/a06d2649fe91c6df9d278d6fe742a4df to your computer and use it in GitHub Desktop.
Save frogcat/a06d2649fe91c6df9d278d6fe742a4df to your computer and use it in GitHub Desktop.
Download ZIP
TopoJSON simplify demo
Raw
20170714.md

TopoJSON simplify demo

Raw
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>topojson simplify</title>
<meta name="viewport" content="initial-scale=1.0, maximum-scale=1.0" />
<link rel="stylesheet" href="https://unpkg.com/[email protected]/dist/leaflet.css" />
<script src="https://unpkg.com/[email protected]/dist/leaflet.js"></script>
<script src="https://unpkg.com/[email protected]/dist/topojson.min.js"></script>
<script src="https://code.jquery.com/jquery-3.2.1.min.js"></script>
</head>
<body>
<div id="map" style="position:absolute;top:0;left:0;bottom:0;right:0;"></div>
<div id="box" style="position:absolute;top:10;left:10;width:300px;height:auto;background:rgba(0,0,0,0.7);z-index:200000;color:white;padding:3px;">
<dl>
<dt>GeoJSON (source)</dt>
<dd id="v1">-----</dd>
<dt>TopoJSON (before simplify)</dt>
<dd id="v2">-----</dd>
<dt>MinWeight</dt>
<dd>
<form id="f"><input type="text" value="0.00000001" id="mw" size="16" /> <button>update</button></form>
</dd>
<dt>TopoJSON (after simplify)</dt>
<dd id="v3">-----</dd>
<dt>GeoJSON (result)</dt>
<dd id="v4">-----</dd>
<dt>Ratio (result/source)</dt>
<dd id="v5">-----</dd>
</dl>
</div>
<script>
function getSize(json) {
return (new Blob([JSON.stringify(json, null, "")], {
type: "text/plain"
})).size;
}
var map = L.map("map").fitWorld();
map.zoomControl.setPosition("bottomright");
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution: "&copy; <a href='http://osm.org/copyright'>OpenStreetMap</a> contributors"
}).addTo(map);
fetch("https://frogcat.github.io/jp_chome_boundary/geojson_kouchi/39-kouchi-all_pre06.geojson").then(function(a) {
return a.json();
}).then(function(geojson) {
var layer = null;
$("#v1").text(getSize(geojson));
var topology = topojson.topology({
foo: geojson
});
$("#v2").text(getSize(topology));
var ps = topojson.presimplify(topology);
$("#f").on("submit", function() {
try {
var weight = parseFloat($("#mw").val());
var sp = topojson.simplify(ps, weight);
$("#v3").text(getSize(sp));
var feature = topojson.feature(sp, topology.objects.foo);
$("#v4").text(getSize(feature));
$("#v5").text((100 * getSize(feature) / getSize(geojson)).toFixed(2) + "%");
if (layer === null) {
layer = new L.geoJson(feature).addTo(map);
map.fitBounds(layer.getBounds());
} else {
map.removeLayer(layer);
layer = new L.geoJson(feature).addTo(map);
}
} catch (e) {}
return false;
}).submit();
});
</script>
</body>
</html>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment