frogcat/20170714.md

## 20170714.md

      
    Raw
  

              20170714.md
            
          
    TopoJSON simplify demo

  
## 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/leaflet@1.1.0/dist/leaflet.css" />
  <script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
  <script src="https://unpkg.com/topojson@3.0.0/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>
	<!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/leaflet@1.1.0/dist/leaflet.css" />
	<script src="https://unpkg.com/leaflet@1.1.0/dist/leaflet.js"></script>
	<script src="https://unpkg.com/topojson@3.0.0/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: "© <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>