Last active
October 8, 2019 04:34
-
-
Save owlfox/ab513bd865eff228547d1ae6f1be1f2c to your computer and use it in GitHub Desktop.
Taiwan map of towns v1
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
<!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