blech · December 25, 2015 17:59 · Oct 17, 2013 · Aug 13, 2013 · Aug 13, 2013 · Aug 13, 2013
diff --git a/.run b/.run
@@ -0,0 +1 @@
+python -m SimpleHTTPServer 5120
diff --git a/index.html b/index.html
@@ -54,7 +54,7 @@
     .size([width, height]);
 
 var projection = d3.geo.mercator()
-    .scale((1 << 18) / 2 / Math.PI)
+    .scale((1 << 21) / 2 / Math.PI)
     .translate([-width / 2, -height / 2]); // just temporary
 
 var tileProjection = d3.geo.mercator();
@@ -64,8 +64,8 @@
 
 var zoom = d3.behavior.zoom()
     .scale(projection.scale() * 2 * Math.PI)
-    .scaleExtent([1 << 16, 1 << 23])
-    .translate(projection([-0.1, 51.5]).map(function(x) { return -x; }))
+    .scaleExtent([1 << 17, 1 << 23])
+    .translate(projection([-0.49416 , 51.4994]).map(function(x) { return -x; }))
     .on("zoom", zoomed);
 
 var map = d3.select("body").append("div")

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -1,3 +1,5 @@
-Forking mbostock's [vector tiles](https://gist.github.com/mbostock/5593150) gist/block.
+Forking mbostock's [vector tiles](https://gist.github.com/mbostock/5593150) gist/block, but 
+for London and with motorways in blue.
 
-I'm not quite sure what I'm going to do with this yet.
+I'm not quite sure what else I'm going to do with this yet. Hack in onHashChange? Realise 
+that polymaps is better for this stuff?
diff --git a/index.html b/index.html
@@ -37,6 +37,7 @@
   position: absolute;
   bottom: 10px;
   left: 10px;
+  font-family: "helvetica neue";
 }
 
 </style>
@@ -53,7 +54,7 @@
     .size([width, height]);
 
 var projection = d3.geo.mercator()
-    .scale((1 << 21) / 2 / Math.PI)
+    .scale((1 << 18) / 2 / Math.PI)
     .translate([-width / 2, -height / 2]); // just temporary
 
 var tileProjection = d3.geo.mercator();

diff --git a/index.html b/index.html
@@ -23,15 +23,15 @@
 
 .tile path {
   fill: none;
-  stroke: #000;
+  stroke: #ccc;
   stroke-linejoin: round;
   stroke-linecap: round;
 }
 
-.tile .major_road { stroke: #776; }
-.tile .minor_road { stroke: #ccb; }
-.tile .highway { stroke: #f39; stroke-width: 1.5px; }
-.tile .rail { stroke: #7de; }
+.tile .major_road { stroke: #eeeeee; }
+.tile .minor_road { stroke: #f6f6f6; }
+.tile .highway { stroke: #0079c1; stroke-width: 1.5px; }
+.tile .rail { stroke: #999; }
 
 .info {
   position: absolute;
@@ -63,8 +63,8 @@
 
 var zoom = d3.behavior.zoom()
     .scale(projection.scale() * 2 * Math.PI)
-    .scaleExtent([1 << 20, 1 << 23])
-    .translate(projection([-74.0064, 40.7142]).map(function(x) { return -x; }))
+    .scaleExtent([1 << 16, 1 << 23])
+    .translate(projection([-0.1, 51.5]).map(function(x) { return -x; }))
     .on("zoom", zoomed);
 
 var map = d3.select("body").append("div")

diff --git a/README.md b/README.md
@@ -1 +1,3 @@
-Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/). See also the [static example](/mbostock/5616813).
+Forking mbostock's [vector tiles](https://gist.github.com/mbostock/5593150) gist/block.
+
+I'm not quite sure what I'm going to do with this yet.
diff --git a/index.html b/index.html
@@ -25,6 +25,7 @@
   fill: none;
   stroke: #000;
   stroke-linejoin: round;
+  stroke-linecap: round;
 }
 
 .tile .major_road { stroke: #776; }
@@ -46,8 +47,7 @@
 
 var width = Math.max(960, window.innerWidth),
     height = Math.max(500, window.innerHeight),
-    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]),
-    order = {rail: 0, minor_road: 1, major_road: 2, highway: 3};
+    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);
 
 var tile = d3.geo.tile()
     .size([width, height]);
@@ -115,13 +115,10 @@
               .scale(k / 2 / Math.PI);
 
           svg.selectAll("path")
-              .data(d3.nest()
-                .key(function(d) { return d.properties.kind; })
-                .sortKeys(function(a, b) { return order[a] - order[b]; })
-                .entries(json.features))
+              .data(json.features.sort(function(a, b) { return a.properties.sort_key - b.properties.sort_key; }))
             .enter().append("path")
-              .attr("class", function(d) { return d.key; })
-              .attr("d", function(d) { return tilePath({type: "FeatureCollection", features: d.values}); });
+              .attr("class", function(d) { return d.properties.kind; })
+              .attr("d", tilePath);
         });
       });
 }

diff --git a/README.md b/README.md
@@ -1 +1 @@
-Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/).
+Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/). See also the [static example](/mbostock/5616813).
diff --git a/README.md b/README.md
@@ -1 +1 @@
-Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show vector tiles from [OpenStreetMap](http://www.openstreetmap.org/).
+Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/).
diff --git a/index.html b/index.html
@@ -30,6 +30,7 @@
 .tile .major_road { stroke: #776; }
 .tile .minor_road { stroke: #ccb; }
 .tile .highway { stroke: #f39; stroke-width: 1.5px; }
+.tile .rail { stroke: #7de; }
 
 .info {
   position: absolute;
@@ -46,7 +47,7 @@
 var width = Math.max(960, window.innerWidth),
     height = Math.max(500, window.innerHeight),
     prefix = prefixMatch(["webkit", "ms", "Moz", "O"]),
-    order = {minor_road: 0, major_road: 1, highway: 2};
+    order = {rail: 0, minor_road: 1, major_road: 2, highway: 3};
 
 var tile = d3.geo.tile()
     .size([width, height]);

diff --git a/index.html b/index.html
@@ -27,9 +27,9 @@
   stroke-linejoin: round;
 }
 
-.tile .major_road { stroke: #1f77b4; }
-.tile .minor_road { stroke: #aec7e8; }
-.tile .highway { stroke: #ff7f0e; }
+.tile .major_road { stroke: #776; }
+.tile .minor_road { stroke: #ccb; }
+.tile .highway { stroke: #f39; stroke-width: 1.5px; }
 
 .info {
   position: absolute;
@@ -45,7 +45,8 @@
 
 var width = Math.max(960, window.innerWidth),
     height = Math.max(500, window.innerHeight),
-    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);
+    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]),
+    order = {minor_road: 0, major_road: 1, highway: 2};
 
 var tile = d3.geo.tile()
     .size([width, height]);
@@ -113,7 +114,10 @@
               .scale(k / 2 / Math.PI);
 
           svg.selectAll("path")
-              .data(d3.nest().key(function(d) { return d.properties.kind; }).entries(json.features))
+              .data(d3.nest()
+                .key(function(d) { return d.properties.kind; })
+                .sortKeys(function(a, b) { return order[a] - order[b]; })
+                .entries(json.features))
             .enter().append("path")
               .attr("class", function(d) { return d.key; })
               .attr("d", function(d) { return tilePath({type: "FeatureCollection", features: d.values}); });

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/index.html b/index.html
@@ -27,6 +27,10 @@
   stroke-linejoin: round;
 }
 
+.tile .major_road { stroke: #1f77b4; }
+.tile .minor_road { stroke: #aec7e8; }
+.tile .highway { stroke: #ff7f0e; }
+
 .info {
   position: absolute;
   bottom: 10px;
@@ -108,9 +112,11 @@
               .translate([k / 2 - d[0] * 256, k / 2 - d[1] * 256]) // [0°,0°] in pixels
               .scale(k / 2 / Math.PI);
 
-          svg.append("path")
-              .datum(json)
-              .attr("d", tilePath);
+          svg.selectAll("path")
+              .data(d3.nest().key(function(d) { return d.properties.kind; }).entries(json.features))
+            .enter().append("path")
+              .attr("class", function(d) { return d.key; })
+              .attr("d", function(d) { return tilePath({type: "FeatureCollection", features: d.values}); });
         });
       });
 }

diff --git a/index.html b/index.html
@@ -48,7 +48,7 @@
 
 var projection = d3.geo.mercator()
     .scale((1 << 21) / 2 / Math.PI)
-    .translate([-width / 2, -height / 2]);
+    .translate([-width / 2, -height / 2]); // just temporary
 
 var tileProjection = d3.geo.mercator();
 

diff --git a/thumbnail.png b/thumbnail.png
diff --git a/README.md b/README.md
@@ -0,0 +1 @@
+Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show vector tiles from [OpenStreetMap](http://www.openstreetmap.org/).
diff --git a/index.html b/index.html
@@ -0,0 +1,139 @@
+<!DOCTYPE html>
+<meta charset="utf-8">
+<style>
+
+body {
+  margin: 0;
+}
+
+.map {
+  position: relative;
+  overflow: hidden;
+}
+
+.layer {
+  position: absolute;
+}
+
+.tile {
+  position: absolute;
+  width: 256px;
+  height: 256px;
+}
+
+.tile path {
+  fill: none;
+  stroke: #000;
+  stroke-linejoin: round;
+}
+
+.info {
+  position: absolute;
+  bottom: 10px;
+  left: 10px;
+}
+
+</style>
+<body>
+<script src="http://d3js.org/d3.v3.min.js"></script>
+<script src="http://d3js.org/d3.geo.tile.v0.min.js"></script>
+<script>
+
+var width = Math.max(960, window.innerWidth),
+    height = Math.max(500, window.innerHeight),
+    prefix = prefixMatch(["webkit", "ms", "Moz", "O"]);
+
+var tile = d3.geo.tile()
+    .size([width, height]);
+
+var projection = d3.geo.mercator()
+    .scale((1 << 21) / 2 / Math.PI)
+    .translate([-width / 2, -height / 2]);
+
+var tileProjection = d3.geo.mercator();
+
+var tilePath = d3.geo.path()
+    .projection(tileProjection);
+
+var zoom = d3.behavior.zoom()
+    .scale(projection.scale() * 2 * Math.PI)
+    .scaleExtent([1 << 20, 1 << 23])
+    .translate(projection([-74.0064, 40.7142]).map(function(x) { return -x; }))
+    .on("zoom", zoomed);
+
+var map = d3.select("body").append("div")
+    .attr("class", "map")
+    .style("width", width + "px")
+    .style("height", height + "px")
+    .call(zoom)
+    .on("mousemove", mousemoved);
+
+var layer = map.append("div")
+    .attr("class", "layer");
+
+var info = map.append("div")
+    .attr("class", "info");
+
+zoomed();
+
+function zoomed() {
+  var tiles = tile
+      .scale(zoom.scale())
+      .translate(zoom.translate())
+      ();
+
+  projection
+      .scale(zoom.scale() / 2 / Math.PI)
+      .translate(zoom.translate());
+
+  var image = layer
+      .style(prefix + "transform", matrix3d(tiles.scale, tiles.translate))
+    .selectAll(".tile")
+      .data(tiles, function(d) { return d; });
+
+  image.exit()
+      .each(function(d) { this._xhr.abort(); })
+      .remove();
+
+  image.enter().append("svg")
+      .attr("class", "tile")
+      .style("left", function(d) { return d[0] * 256 + "px"; })
+      .style("top", function(d) { return d[1] * 256 + "px"; })
+      .each(function(d) {
+        var svg = d3.select(this);
+        this._xhr = d3.json("http://" + ["a", "b", "c"][(d[0] * 31 + d[1]) % 3] + ".tile.openstreetmap.us/vectiles-highroad/" + d[2] + "/" + d[0] + "/" + d[1] + ".json", function(error, json) {
+          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);
+
+          svg.append("path")
+              .datum(json)
+              .attr("d", tilePath);
+        });
+      });
+}
+
+function mousemoved() {
+  info.text(formatLocation(projection.invert(d3.mouse(this)), zoom.scale()));
+}
+
+function matrix3d(scale, translate) {
+  var k = scale / 256, r = scale % 1 ? Number : Math.round;
+  return "matrix3d(" + [k, 0, 0, 0, 0, k, 0, 0, 0, 0, k, 0, r(translate[0] * scale), r(translate[1] * scale), 0, 1 ] + ")";
+}
+
+function prefixMatch(p) {
+  var i = -1, n = p.length, s = document.body.style;
+  while (++i < n) if (p[i] + "Transform" in s) return "-" + p[i].toLowerCase() + "-";
+  return "";
+}
+
+function formatLocation(p, k) {
+  var format = d3.format("." + Math.floor(Math.log(k) / 2 - 2) + "f");
+  return (p[1] < 0 ? format(-p[1]) + "°S" : format(p[1]) + "°N") + " "
+       + (p[0] < 0 ? format(-p[0]) + "°W" : format(p[0]) + "°E");
+}
+
+</script>
Original file line number	Diff line number	Diff line change
		@@ -1 +1 @@
		Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/).
		Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show [OpenStreetMap vector tiles](http://openstreetmap.us/~migurski/vector-datasource/). See also the [static example](/mbostock/5616813).
Original file line number	Diff line number	Diff line change
		@@ -0,0 +1 @@
		Adapting [d3.geo.tile](https://github.com/d3/d3-plugins/tree/master/geo/tile) to show vector tiles from [OpenStreetMap](http://www.openstreetmap.org/).