|
<!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; |
|
stroke-linecap: round; |
|
} |
|
|
|
.tile path.path { |
|
stroke: #ccb; |
|
stroke-dasharray:4,2,4; |
|
} |
|
|
|
.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; |
|
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 ids_station = {}; |
|
ids_station |
|
ids_station["Terminal"] = 30042; |
|
ids_station["Station"] = "IDS Center"; |
|
ids_station["Location"] = "80 South 8th Street"; |
|
ids_station["Latitude"] = 44.975641; |
|
ids_station["Longitude"] = -93.272185; |
|
ids_station["Nb docks"] = 23; |
|
var stations = [ |
|
ids_station |
|
]; |
|
|
|
var projection = d3.geo.mercator() |
|
.scale((1 << 23) / 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 << 20, 1 << 23]) |
|
.translate(projection([-93.267202, 44.980991]).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 svg = map.append("svg") |
|
.style("float", "left") |
|
.attr("width", width) |
|
.attr("height", height); |
|
|
|
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.selectAll("path") |
|
.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.properties.kind; }) |
|
.attr("d", function(d){ |
|
return tilePath(d); |
|
}); |
|
}); |
|
}); |
|
|
|
// trying to learn from http://bl.ocks.org/emeeks/6147081 |
|
//var points = svg.append("g").attr("id","points").attr("transform", "translate(" + zoom.translate() + ")scale(" + zoom.scale() + ")"); |
|
|
|
var svg_points = svg.selectAll(".point") |
|
.data(stations) |
|
|
|
svg_points |
|
.attr("transform", function(d) { |
|
return "translate(" + projection([d.Longitude, d.Latitude]) + ")scale(" + projection.scale() + ")" |
|
}) |
|
|
|
svg_points |
|
.data(stations) |
|
.enter() |
|
.append("g") |
|
.attr("class", "point") |
|
.attr("transform", function(d) { |
|
return "translate(" + projection([d.Longitude, d.Latitude]) + ")scale(" + projection.scale() + ")" |
|
}) |
|
.append("circle") |
|
.attr("r", 0.0000017) |
|
|
|
} |
|
|
|
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> |