Quickie D3-only slippy map of rivers.
Completely cargo-cult hacked from mbostock's OSM vector tile demo
Quickie D3-only slippy map of rivers.
Completely cargo-cult hacked from mbostock's OSM vector tile demo
<!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: #29439c; | |
stroke-linejoin: round; stroke-linecap: 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"]), | |
order = {rail: 0, minor_road: 1, major_road: 2, highway: 3}; | |
var tile = d3.geo.tile() | |
.size([width, height]); | |
var projection = d3.geo.mercator() | |
.scale((1 << 21) / 2 / Math.PI) | |
.translate([-width / 2, -height / 2]); // just temporary | |
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 << 12, 1 << 23]) | |
.translate(projection([-121.036, 38.096]).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://somebits.com:8000/rivers/" + 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.selectAll("path") | |
.data(json.features) | |
.enter().append("path") | |
.attr("style", function(d) { return "stroke-width: " + d.properties.strahler/2 + "px;" }) | |
.attr("d", function(d) { return tilePath(d); }); | |
}); | |
}); | |
} | |
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> |