CalvinBackup/iD
1
0
Fork 0
mirror of https://github.com/FoggedLens/iD.git synced 2026-05-15 13:38:26 +02:00
Code Issues Packages Projects Releases Wiki Activity

Make map tile client an external. Fixes #48

Browse Source
This commit is contained in:
Tom MacWright
2012-10-28 12:41:42 -04:00
parent f85b8241a7
commit c61feeb154
3 changed files with 74 additions and 66 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+1
View File
@@ -24,6 +24,7 @@
<script type="text/javascript" src="js/iD/controller/edit/SelectedWay.js"></script>
<script type="text/javascript" src="js/iD/controller/edit/SelectedWayNode.js"></script>
<script type="text/javascript" src="js/iD/renderer/tiles.js"></script>
<script type="text/javascript" src="js/iD/renderer/Map.js"></script>
<script type="text/javascript" src="js/iD/renderer/markers.js"></script>
<script type="text/javascript" src="js/iD/ui/Inspector.js"></script>
js/iD/renderer/Map.js
+4 -66
View File
@@ -52,13 +52,7 @@ iD.Map = function(obj) {
var surface = d3.selectAll(obj.selector)
.append('svg')
.attr({ width: width, height: height })
.call(zoombehavior).on('dblclick', function() {
// TODO: round zooms
/*
var s = projection.scale();
projection.scale(Math.round(Math.max(Math.log(s) / Math.log(2) - 7, 0)));
*/
});
.call(zoombehavior);
var defs = surface.append('defs');
@@ -75,6 +69,8 @@ iD.Map = function(obj) {
container = surface.append('g')
.attr('clip-path', 'url(#clip)');
var tileclient = iD.Tiles(tilegroup, width, height);
var r = container.append('g');
layers[0] = {
@@ -269,71 +265,13 @@ iD.Map = function(obj) {
return map;
}
function tilesForView() {
var t = projection.translate(),
s = projection.scale(),
z = Math.max(Math.log(s) / Math.log(2) - 8, 0);
rz = Math.floor(z),
ts = 256 * Math.pow(2, z - rz);
// This is the 0, 0 px of the projection
var tile_origin = [s / 2 - t[0], s / 2 - t[1]],
coords = [],
cols = d3.range(Math.max(0, Math.floor((tile_origin[0] - width) / ts)),
Math.max(0, Math.ceil((tile_origin[0] + width) / ts))),
rows = d3.range(Math.max(0, Math.floor((tile_origin[1] - height) / ts)),
Math.max(0, Math.ceil((tile_origin[1] + height) / ts)));
cols.forEach(function(x) {
rows.forEach(function(y) { coords.push([Math.floor(z), x, y]); });
});
return coords;
}
function tileUrl(coord) {
var tmpl = 'http://ecn.t0.tiles.virtualearth.net/tiles/a$quadkey.jpeg?g=587&mkt=en-gb&n=z';
var u = '';
for (var zoom = coord[0]; zoom > 0; zoom--) {
var byte = 0;
var mask = 1 << (zoom - 1);
if ((coord[1] & mask) !== 0) byte++;
if ((coord[2] & mask) !== 0) byte += 2;
u += byte.toString();
}
return tmpl.replace('$quadkey', u);
}
function redraw() {
if (d3.event) {
projection
.translate(d3.event.translate)
.scale(d3.event.scale);
}
var t = projection.translate(),
s = projection.scale(),
z = Math.max(Math.log(s) / Math.log(2) - 8, 0);
rz = Math.floor(z),
ts = 256 * Math.pow(2, z - rz);
// This is the 0, 0 px of the projection
var tile_origin = [s / 2 - t[0], s / 2 - t[1]],
coords = tilesForView();
var tiles = tilegroup.selectAll('image.tile')
.data(coords, function(d) { return d.join(','); });
tiles.exit().remove();
tiles.enter().append('image')
.attr('class', 'tile')
.attr('xlink:href', tileUrl);
tiles.attr({ width: Math.ceil(ts), height: Math.ceil(ts) })
.attr('transform', function(d) {
return 'translate(' + [
Math.round((d[1] * ts) - tile_origin[0]),
Math.round((d[2] * ts) - tile_origin[1])
] + ')';
});
tileclient.redraw(projection);
drawVector();
download();
}
js/iD/renderer/tiles.js
+69
View File
@@ -0,0 +1,69 @@
// a minimal map tile client, to be turned on and off etc.
iD.Tiles = function(selection, width, height) {
var tiles = {};
function tilesForView(projection) {
var t = projection.translate(),
s = projection.scale(),
z = Math.max(Math.log(s) / Math.log(2) - 8, 0);
rz = Math.floor(z),
ts = 256 * Math.pow(2, z - rz);
// This is the 0, 0 px of the projection
var tile_origin = [s / 2 - t[0], s / 2 - t[1]],
coords = [],
cols = d3.range(Math.max(0, Math.floor((tile_origin[0] - width) / ts)),
Math.max(0, Math.ceil((tile_origin[0] + width) / ts))),
rows = d3.range(Math.max(0, Math.floor((tile_origin[1] - height) / ts)),
Math.max(0, Math.ceil((tile_origin[1] + height) / ts)));
cols.forEach(function(x) {
rows.forEach(function(y) { coords.push([Math.floor(z), x, y, Math.floor(z) + '-' + x + '-' + y]); });
});
return coords;
}
function tileUrl(coord) {
var tmpl = 'http://ecn.t0.tiles.virtualearth.net/tiles/a$quadkey.jpeg?g=587&mkt=en-gb&n=z';
var u = '';
for (var zoom = coord[0]; zoom > 0; zoom--) {
var byte = 0;
var mask = 1 << (zoom - 1);
if ((coord[1] & mask) !== 0) byte++;
if ((coord[2] & mask) !== 0) byte += 2;
u += byte.toString();
}
return tmpl.replace('$quadkey', u);
}
function redraw(projection) {
var t = projection.translate(),
s = projection.scale(),
z = Math.max(Math.log(s) / Math.log(2) - 8, 0);
rz = Math.floor(z),
ts = 256 * Math.pow(2, z - rz);
// This is the 0, 0 px of the projection
var tile_origin = [s / 2 - t[0], s / 2 - t[1]],
coords = tilesForView(projection);
var tiles = selection.selectAll('image.tile')
.data(coords, function(d) { return d[3]; });
tiles.exit().remove();
tiles.enter().append('image')
.attr('class', 'tile')
.attr('xlink:href', tileUrl);
tiles.attr({ width: Math.ceil(ts), height: Math.ceil(ts) })
.attr('transform', function(d) {
return 'translate(' + [
Math.round((d[1] * ts) - tile_origin[0]),
Math.round((d[2] * ts) - tile_origin[1])
] + ')';
});
}
tiles.redraw = redraw;
return tiles;
};