forked from hkrishna/d3-vector-tiles
-
Notifications
You must be signed in to change notification settings - Fork 21
/
Copy pathgeojson.html
57 lines (48 loc) · 2.32 KB
/
geojson.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
<!DOCTYPE html>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
<link rel="stylesheet" href="styles.css" />
<body>
<script src="d3.v3.min.js"></script>
<script src="d3.geo.tile.v0.min.js"></script>
<script src='//s3.amazonaws.com/assets-staging.mapzen.com/ui/components/bug/bug.min.js'></script>
<script type='text/javascript'>
window.bugTitle = 'Map using d3 and geojson';
var layers = ['water', 'landuse', 'roads', 'buildings'];
window.renderTiles = function(d) {
var svg = d3.select(this);
var zoom = d[2];
this._xhr = d3.json("https://tile.nextzen.org/tilezen/vector/v1/all/" + zoom + "/" + d[0] + "/" + d[1] + ".json?api_key=_HFpZl-VRLKQlgcvQzWTPA", function(error, data) {
var k = Math.pow(2, d[2]) * 256; // size of the world in pixels
tilePath.projection()
.translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256]) // [0°,0°] in pixels
.scale(k / 2 / Math.PI)
.precision(0);
// build up a single concatenated array of all tile features from all tile layers
var features = [];
layers.forEach(function(layer){
if(data[layer])
{
for(var i in data[layer].features)
{
// Don't include any label placement points
if(data[layer].features[i].properties.label_placement) { continue }
// Don't show large buildings at z13 or below.
if(zoom <= 13 && layer == 'buildings') { continue }
// Don't show small buildings at z14 or below.
if(zoom <= 14 && layer == 'buildings' && data[layer].features[i].properties.area < 2000) { continue }
data[layer].features[i].layer_name = layer;
features.push(data[layer].features[i]);
}
}
});
// put all the features into SVG paths
svg.selectAll("path")
.data(features.sort(function(a, b) { return a.properties.sort_rank ? a.properties.sort_rank - b.properties.sort_rank : 0 }))
.enter().append("path")
.attr("class", function(d) { var kind = d.properties.kind || ''; if(d.properties.boundary){kind += '_boundary';} return d.layer_name + '-layer ' + kind; })
.attr("d", tilePath);
});
};
</script>
<script src="scripts.js"></script>