Skip to content

Instantly share code, notes, and snippets.

@owlfox
Last active October 8, 2019 04:34
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save owlfox/ab513bd865eff228547d1ae6f1be1f2c to your computer and use it in GitHub Desktop.
Save owlfox/ab513bd865eff228547d1ae6f1be1f2c to your computer and use it in GitHub Desktop.
Taiwan map of towns v1
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>Taiwan</title>
<style>
.boundary {
fill: none;
stroke: #888;
stroke-linejoin: round;
}
svg {
border-style: solid 1px #ccc;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://d3js.org/d3.v5.min.js" charset="utf-8"></script>
<script src="https://unpkg.com/topojson@3.0.2/dist/topojson.js"></script>
<script>
const jsonUrl = "https://raw.githubusercontent.com/owlfox/twgeojson/update_town_geojson/json/twTown2019-07-26.topo.json"
const height = 600, width = 800
const projection = d3.geoMercator();
const path = d3.geoPath().projection(projection);
const svg = d3.select("#map")
.append("svg")
.attr("width", width)
.attr("height", height);
d3.json(jsonUrl).then(function(data) {//0
console.log("topojson", data)
const geojson = topojson.feature(data, data.objects.towns);
console.log("geojson", geojson)
let b, s, t; //border, scale, translate
projection.scale(1).translate([0, 0]); //1
b = path.bounds(geojson); //2
s = .9 / Math.max((b[1][0] - b[0][0]) / width, (b[1][1] - b[0][1]) / height);
t = [(width - s * (b[1][0] + b[0][0])) / 2, (height - s * (b[1][1] + b[0][1])) / 2];
projection.scale(s).translate(t);
const map = svg.append('g').attr('class', 'boundary');
map.selectAll("path")//3
.data(geojson.features)
.enter().append("path")
.attr("d", path);
});
</script>
</body>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment