d3-vector-tiles/index.html at gh-pages · nextzen/d3-vector-tiles · GitHub

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
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
<!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="https://cdn.rawgit.com/devTristan/pbf/master/dist/pbf.min.js"></script>
<script src="https://rawgit.com/devTristan/vector-tile-js/master/dist/vectortile.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 vector PBF';

  var layers = ['water', 'landuse', 'roads', 'buildings'];
  window.renderTiles = function(d) {
    var svg = d3.select(this);
    var zoom = d[2];
    this._xhr = d3.xhr("https://tile.nextzen.org/tilezen/vector/v1/all/" + zoom + "/" + d[0] + "/" + d[1] + ".mvt?api_key=_HFpZl-VRLKQlgcvQzWTPA").responseType('arraybuffer').get(function(error, json) {

      var tile = new VectorTile( new pbf( new Uint8Array(json.response) ) );
      var extents = 4096;

      var data = {};
      for (var key in tile.layers) {
        data[key] = tile.layers[key].toGeoJSON();
      }

      var tile_projection = d3.geo.transform({
        point: function(x, y) {
          // Sometimes PBF points in a mixed-geometry layer are corrupted
          if(!isNaN(y)){
            x = x/extents*256;
            y = y/extents*256;
          } else {
            y = x[0][1]/extents * 256;
            x = x[0][0]/extents * 256;
          }

          this.stream.point(x, y);
        }
      })

      var tilePath = d3.geo.path()
      .projection(tile_projection)

      // 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>