Skip to content

Instantly share code, notes, and snippets.

@larsbouwens
Last active September 2, 2024 20:09
Show Gist options
  • Save larsbouwens/1afef9beb0c3df0e4b24 to your computer and use it in GitHub Desktop.
Save larsbouwens/1afef9beb0c3df0e4b24 to your computer and use it in GitHub Desktop.
The Netherlands GeoJSON
<!DOCTYPE html>
<meta charset="utf-8">
<head>
<title>The Netherlands gejson map</title>
<script src="js/d3.v3.min.js"></script>
<style type="text/css">
path {fill: #000; stroke: #fff; stroke-width: 1;}}
</style>
</head>
<body>
<script>
// Parameters
var width = 750,
height = 750,
scale = 8500,
centerLat = 5.5,
centerLong = 52.2;
// Append svg to body
var svg = d3.select("body").append("svg")
.attr("width", width)
.attr("height", height)
.append("g")
// Adjust projection based on scale and center of the map
var projection = d3.geo.mercator()
.scale(scale).translate([width / 2, height / 2]).center([centerLat, centerLong]);
var path = d3.geo.path()
.projection(projection);
// Add the data
d3.json("nl.json", function(json) {
svg.selectAll("path")
.data(json.features).enter()
.append("path")
.attr("d", path)
});
</script>
<body>
Display the source blob
Display the rendered blob
Raw
Loading
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
@larsbouwens
Copy link
Author

Simplified version of the "Wijk- en Buurtkaart 2013" shapefile provided by CBS.

@xiaoguangwei
Copy link

+1

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment