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

Add map resize API, bind to window onresize event. Fixes #39

Browse Source
This commit is contained in:
Tom MacWright
2012-10-31 21:57:15 -04:00
parent 8bca85d3b2
commit 9f00f0fee2
6 changed files with 77 additions and 62 deletions
Download Patch File Download Diff File Expand all files Collapse all files
index.html
+5
View File
@@ -77,6 +77,11 @@
map.setZoom(18)
.setCentre({ lat: 40.7965621, lon: -74.4773184 });
window.onresize = function() {
map.setSize(m.node().offsetWidth,
m.node().offsetHeight);
};
// ----------------------------------------------------
// Data is loaded and app ready to go
// Set initial controllerState
js/iD/Node.js
+5 -2
View File
@@ -1,22 +1,25 @@
iD.Node = function(id, lat, lon, tags, loaded) {
this.type = 'node';
this.id = id;
this._id = iD.Util.id();
this.lat = lat;
this.lon = lon;
this[0] = lon;
this[1] = lat;
this.tags = tags;
this.tags = tags || {};
this.loaded = (loaded === undefined) ? true : loaded;
};
iD.Node.prototype = {
type: 'node',
intersects: function(extent) {
return (this.lon >= extent[0][0]) &&
(this.lon <= extent[1][0]) &&
(this.lat <= extent[0][1]) &&
(this.lat >= extent[1][1]);
}
};
iD.Util.extend(iD.Node, iD.Entity);
js/iD/Relation.js
+4 -7
View File
@@ -1,17 +1,14 @@
iD.Relation = function(id, children, tags, loaded) {
members = members || [];
tags = tags || {};
this.type = 'relation';
this.id = id;
this._id = iD.Util.id();
this.entity = new iD.Entity();
this.children = children;
this.tags = tags;
this.modified = this.id < 0;
this.children = children || [];
this.tags = tags || {};
this.loaded = (loaded === undefined) ? true : loaded;
};
iD.Relation.prototype = {
type: 'relation',
intersects: function() { return true; }
};
js/iD/Way.js
+5 -6
View File
@@ -6,20 +6,19 @@
//
// If a a way is _closed_, it is assumed to be an area unless it has a
// `highway` or `barrier` tag and is not also tagged `area`.
iD.Way = function(id, nodes, tags, loaded) {
nodes = nodes || [];
tags = tags || {};
this.type = 'way';
iD.Way = function(id, children, tags, loaded) {
this.id = id;
this._id = iD.Util.id();
this.tags = tags;
this.children = nodes;
this.tags = tags || {};
this.children = children || [];
this.loaded = (loaded === undefined) ? true : loaded;
this.extent = {};
};
iD.Way.prototype = {
type: 'way',
// JOSM: http://josm.openstreetmap.de/browser/josm/trunk/src/org/openstreetmap/josm/data/osm/Way.java#L466
isClosed: function() {
// summary: Is this a closed way (first and last nodes the same)?
js/iD/renderer/Map.js
+47 -44
View File
@@ -11,8 +11,7 @@ iD.Map = function(obj) {
height = obj.height || 400,
projection = d3.geo.mercator()
.scale(512).translate([512, 512]),
connection = obj.connection,
layers = {};
connection = obj.connection;
var inspector = iD.Inspector();
@@ -34,20 +33,19 @@ iD.Map = function(obj) {
// http://bl.ocks.org/1557377
function dragmove(d) {
d3.select(this).attr('transform', function() {
return 'translate(' + d3.event.x + ',' + d3.event.y + ')';
});
var ll = projection.invert([d3.event.x, d3.event.y]);
d[0] = ll[0];
d[1] = ll[1];
drawVector();
d3.select(this).attr('transform', function() {
return 'translate(' + d3.event.x + ',' + d3.event.y + ')';
});
var ll = projection.invert([d3.event.x, d3.event.y]);
d[0] = ll[0];
d[1] = ll[1];
drawVector();
}
zoombehavior.on('zoom', redraw);
var surface = d3.selectAll(obj.selector)
.append('svg')
.attr({ width: width, height: height })
.call(zoombehavior);
var defs = surface.append('defs');
@@ -56,29 +54,28 @@ iD.Map = function(obj) {
.attr('id', 'clip')
.append('rect')
.attr('id', 'clip-rect')
.attr({ x: 0, y: 0 })
.attr({ width: width, height: height });
.attr({ x: 0, y: 0 });
var tilegroup = surface.append('g')
.attr('clip-path', 'url(#clip)')
.on('click', deselectClick),
container = surface.append('g')
r = surface.append('g')
.attr('clip-path', 'url(#clip)');
var tileclient = iD.Tiles(tilegroup, width, height);
var tileclient = iD.Tiles(tilegroup, projection, width, height);
var r = container.append('g');
function setSize(width, height) {
surface.attr({ width: width, height: height });
clipPath.attr({ width: width, height: height });
tileclient.setSize(width, height);
}
layers[0] = {
root: r,
fill: r.append('g'),
casing: r.append('g'),
stroke: r.append('g'),
text: r.append('g'),
hit: r.append('g')
};
var elastic = container.append('g');
var fill_g = r.append('g'),
casing_g = r.append('g'),
stroke_g = r.append('g'),
text_g = r.append('g'),
hit_g = r.append('g'),
elastic = r.append('g');
var download = _.debounce(function() {
connection.loadFromAPI(extent(), drawVector);
@@ -148,24 +145,35 @@ iD.Map = function(obj) {
return a.type === 'node';
});
var fills = layers[0].fill.selectAll('path.area')
var fills = fill_g.selectAll('path.area')
.data(areas, key),
casings = layers[0].casing.selectAll('path.casing')
casings = casing_g.selectAll('path.casing')
.data(ways, key),
strokes = layers[0].stroke.selectAll('path.stroke')
strokes = stroke_g.selectAll('path.stroke')
.data(ways, key),
markers = layers[0].hit.selectAll('image.marker')
markers = hit_g.selectAll('image.marker')
.data(points.filter(iD.markerimage), key);
var _id = selection[0];
var active_entity = all.filter(function(a) {
return a._id === _id && a.entityType === 'way';
});
if (selection.length) {
var _id = selection[0];
var active_entity = all.filter(function(a) {
return a._id === _id && a.entityType === 'way';
});
var handles = layers[0].hit.selectAll('circle.handle')
.data(active_entity.length ? active_entity[0].children : [], key);
var handles = hit_g.selectAll('circle.handle')
.data(active_entity.length ? active_entity[0].children : [], key);
handles.exit().remove();
handles.enter().append('circle')
.attr('class', 'handle')
.attr('r', 5)
.call(dragbehavior);
handles.attr('transform', function(d) {
return 'translate(' + projection(d) + ')';
});
}
handles.exit().remove();
fills.exit().remove();
markers.exit().remove();
casings.exit().remove();
@@ -201,13 +209,6 @@ iD.Map = function(obj) {
return 'translate(' + projection(d) + ')';
});
handles.enter().append('circle')
.attr('class', 'handle')
.attr('r', 5)
.call(dragbehavior);
handles.attr('transform', function(d) {
return 'translate(' + projection(d) + ')';
});
}
function zoomIn() {
@@ -238,7 +239,7 @@ iD.Map = function(obj) {
.translate(d3.event.translate)
.scale(d3.event.scale);
}
tileclient.redraw(projection);
tileclient.redraw();
drawVector();
download();
}
@@ -267,7 +268,9 @@ iD.Map = function(obj) {
map.connection = connection;
map.projection = projection;
map.setSize = setSize;
setSize(width, height);
redraw();
return map;
};
js/iD/renderer/tiles.js
+11 -3
View File
@@ -1,8 +1,8 @@
// a minimal map tile client, to be turned on and off etc.
iD.Tiles = function(selection, width, height) {
iD.Tiles = function(selection, projection, width, height) {
var tiles = {};
function tilesForView(projection) {
function tilesForView() {
var t = projection.translate(),
s = projection.scale(),
z = Math.max(Math.log(s) / Math.log(2) - 8, 0);
@@ -36,7 +36,7 @@ iD.Tiles = function(selection, width, height) {
return tmpl.replace('$quadkey', u);
}
function redraw(projection) {
function redraw() {
var t = projection.translate(),
s = projection.scale(),
z = Math.max(Math.log(s) / Math.log(2) - 8, 0);
@@ -63,6 +63,14 @@ iD.Tiles = function(selection, width, height) {
});
}
function setSize(w, h) {
width = w;
height = h;
redraw();
return tiles;
}
tiles.setSize = setSize;
tiles.redraw = redraw;
return tiles;