diff --git a/index.html b/index.html
index fb5c184ff..b5706274f 100644
--- a/index.html
+++ b/index.html
@@ -69,6 +69,7 @@
+
diff --git a/js/id/renderer/background.js b/js/id/renderer/background.js
index 7a420e014..8bed81f87 100644
--- a/js/id/renderer/background.js
+++ b/js/id/renderer/background.js
@@ -78,56 +78,48 @@ iD.Background = function(context) {
- // var gpx = selection.selectAll('.layer-gpx')
- // .data([0]);
-
- // gpx.enter().insert('div')
- // .attr('class', 'layer-layer layer-gpx');
-
- // gpx.call(gpxLayer);
-
- selection.selectAll('#surface')
- .call(gpxLayer);
+ // selection.selectAll('#surface')
+ // .call(gpxLayer);
- var mapillary = iD.services.mapillary,
- supportsMapillaryImages = !!mapillary,
- supportsMapillarySigns = !!mapillary && mapillary().signsSupported();
+ // var mapillary = iD.services.mapillary,
+ // supportsMapillaryImages = !!mapillary,
+ // supportsMapillarySigns = !!mapillary && mapillary().signsSupported();
- var mapillaryImages = selection.selectAll('.layer-mapillary-images')
- .data(supportsMapillaryImages ? [0] : []);
+ // var mapillaryImages = selection.selectAll('.layer-mapillary-images')
+ // .data(supportsMapillaryImages ? [0] : []);
- mapillaryImages.enter().insert('div')
- .attr('class', 'layer-layer layer-mapillary-images');
+ // mapillaryImages.enter().insert('div')
+ // .attr('class', 'layer-layer layer-mapillary-images');
- if (supportsMapillaryImages) {
- if (!mapillaryImageLayer) { mapillaryImageLayer = iD.svg.MapillaryImages(context); }
- mapillaryImages.call(mapillaryImageLayer);
- } else {
- mapillaryImageLayer = null;
- }
+ // if (supportsMapillaryImages) {
+ // if (!mapillaryImageLayer) { mapillaryImageLayer = iD.svg.MapillaryImages(context); }
+ // mapillaryImages.call(mapillaryImageLayer);
+ // } else {
+ // mapillaryImageLayer = null;
+ // }
- mapillaryImages.exit()
- .remove();
+ // mapillaryImages.exit()
+ // .remove();
- var mapillarySigns = selection.selectAll('.layer-mapillary-signs')
- .data(supportsMapillarySigns ? [0] : []);
+ // var mapillarySigns = selection.selectAll('.layer-mapillary-signs')
+ // .data(supportsMapillarySigns ? [0] : []);
- mapillarySigns.enter().insert('div')
- .attr('class', 'layer-layer layer-mapillary-signs');
+ // mapillarySigns.enter().insert('div')
+ // .attr('class', 'layer-layer layer-mapillary-signs');
- if (supportsMapillarySigns) {
- if (!mapillarySignLayer) { mapillarySignLayer = iD.svg.MapillarySigns(context); }
- mapillarySigns.call(mapillarySignLayer);
- } else {
- mapillarySignLayer = null;
- }
+ // if (supportsMapillarySigns) {
+ // if (!mapillarySignLayer) { mapillarySignLayer = iD.svg.MapillarySigns(context); }
+ // mapillarySigns.call(mapillarySignLayer);
+ // } else {
+ // mapillarySignLayer = null;
+ // }
- mapillarySigns.exit()
- .remove();
+ // mapillarySigns.exit()
+ // .remove();
}
background.sources = function(extent) {
diff --git a/js/id/renderer/map.js b/js/id/renderer/map.js
index 3c606061f..bb3ca1d50 100644
--- a/js/id/renderer/map.js
+++ b/js/id/renderer/map.js
@@ -56,7 +56,7 @@ iD.Map = function(context) {
if (resetTransform()) redraw();
})
.attr('id', 'surface')
- .call(iD.svg.Surface(context));
+ .call(iD.svg.Surface(projection, context));
supersurface.call(context.background());
diff --git a/js/id/svg/gpx.js b/js/id/svg/gpx.js
index bc4699fef..8bf4ab9cd 100644
--- a/js/id/svg/gpx.js
+++ b/js/id/svg/gpx.js
@@ -93,6 +93,9 @@ iD.svg.Gpx = function(projection, context) {
return (new DOMParser()).parseFromString(x, 'text/xml');
}
+ function redraw() {
+ context.pan([0,0]);
+ }
gpx.showLabels = function(_) {
if (!arguments.length) return showLabels;
@@ -117,7 +120,7 @@ iD.svg.Gpx = function(projection, context) {
d3.text(url, function(err, data) {
if (!err) {
gpx.geojson(toGeoJSON.gpx(toDom(data)));
- // dispatch.change();
+ redraw();
}
});
return gpx;
@@ -129,7 +132,7 @@ iD.svg.Gpx = function(projection, context) {
reader.onload = function(e) {
gpx.geojson(toGeoJSON.gpx(toDom(e.target.result))).fitZoom();
- // dispatch.change();
+ redraw();
};
reader.readAsText(f);
diff --git a/js/id/svg/mapillary_images.js b/js/id/svg/mapillary_images.js
index 6f061cd8b..075828cd8 100644
--- a/js/id/svg/mapillary_images.js
+++ b/js/id/svg/mapillary_images.js
@@ -1,4 +1,4 @@
-iD.svg.MapillaryImages = function(context) {
+iD.svg.MapillaryImages = function(projection, context) {
var debouncedRedraw = _.debounce(function () { context.pan([0,0]); }, 1000),
enabled = false,
minZoom = 12,
@@ -19,7 +19,7 @@ iD.svg.MapillaryImages = function(context) {
if (!mapillary) return;
var thumb = mapillary.selectedThumbnail(),
- posX = context.projection(image.loc)[0],
+ posX = projection(image.loc)[0],
width = layer.dimensions()[0],
position = (posX < width / 2) ? 'right' : 'left';
@@ -71,14 +71,14 @@ iD.svg.MapillaryImages = function(context) {
}
function transform(d) {
- var t = iD.svg.PointTransform(context.projection)(d);
+ var t = iD.svg.PointTransform(projection)(d);
if (d.ca) t += ' rotate(' + Math.floor(d.ca) + ',0,0)';
return t;
}
function drawMarkers() {
var mapillary = getMapillary(),
- data = (mapillary ? mapillary.images(context.projection, layer.dimensions()) : []);
+ data = (mapillary ? mapillary.images(projection, layer.dimensions()) : []);
var markers = layer.selectAll('.viewfield-group')
.data(data, function(d) { return d.key; });
@@ -153,7 +153,7 @@ iD.svg.MapillaryImages = function(context) {
if (mapillary && ~~context.map().zoom() >= minZoom) {
editOn();
drawMarkers();
- mapillary.loadImages(context.projection, layer.dimensions());
+ mapillary.loadImages(projection, layer.dimensions());
} else {
editOff();
}
diff --git a/js/id/svg/mapillary_signs.js b/js/id/svg/mapillary_signs.js
index 56375bd42..98a25115b 100644
--- a/js/id/svg/mapillary_signs.js
+++ b/js/id/svg/mapillary_signs.js
@@ -1,4 +1,4 @@
-iD.svg.MapillarySigns = function(context) {
+iD.svg.MapillarySigns = function(projection, context) {
var debouncedRedraw = _.debounce(function () { context.pan([0,0]); }, 1000),
enabled = false,
minZoom = 12,
@@ -19,7 +19,7 @@ iD.svg.MapillarySigns = function(context) {
if (!mapillary) return;
var thumb = mapillary.selectedThumbnail(),
- posX = context.projection(image.loc)[0],
+ posX = projection(image.loc)[0],
width = layer.dimensions()[0],
position = (posX < width / 2) ? 'right' : 'left';
@@ -63,7 +63,7 @@ iD.svg.MapillarySigns = function(context) {
function drawSigns() {
var mapillary = getMapillary(),
- data = (mapillary ? mapillary.signs(context.projection, layer.dimensions()) : []);
+ data = (mapillary ? mapillary.signs(projection, layer.dimensions()) : []);
var signs = layer.select('.mapillary-sign-offset')
.selectAll('.icon-sign')
@@ -111,7 +111,7 @@ iD.svg.MapillarySigns = function(context) {
// Update
signs
- .attr('transform', iD.svg.PointTransform(context.projection));
+ .attr('transform', iD.svg.PointTransform(projection));
}
function render(selection) {
@@ -135,7 +135,7 @@ iD.svg.MapillarySigns = function(context) {
if (mapillary && ~~context.map().zoom() >= minZoom) {
editOn();
drawSigns();
- mapillary.loadSigns(context, context.projection, layer.dimensions());
+ mapillary.loadSigns(context, projection, layer.dimensions());
} else {
editOff();
}
diff --git a/js/id/svg/osm.js b/js/id/svg/osm.js
new file mode 100644
index 000000000..31ba891ac
--- /dev/null
+++ b/js/id/svg/osm.js
@@ -0,0 +1,9 @@
+iD.svg.Osm = function() {
+ return function (selection) {
+ var layers = selection.selectAll('.layer-osm')
+ .data(['areas', 'lines', 'hit', 'halo', 'label']);
+
+ layers.enter().append('g')
+ .attr('class', function(d) { return 'layer layer-osm layer-' + d; });
+ };
+};
diff --git a/js/id/svg/surface.js b/js/id/svg/surface.js
index 0aafadd1b..06df27eac 100644
--- a/js/id/svg/surface.js
+++ b/js/id/svg/surface.js
@@ -1,14 +1,58 @@
-iD.svg.Surface = function() {
- return function (selection) {
+iD.svg.Surface = function (projection, context) {
+ var all = [
+ { order: 1, id: 'osm', render: iD.svg.Osm(projection, context) },
+ { order: 2, id: 'gpx', render: iD.svg.Gpx(projection, context) },
+ { order: 3, id: 'mapillary-images', render: iD.svg.MapillaryImages(projection, context) },
+ { order: 4, id: 'mapillary-signs', render: iD.svg.MapillarySigns(projection, context) }
+ ];
+
+
+ function surface (selection) {
selection.selectAll('defs')
.data([0])
.enter()
.append('defs');
- var layers = selection.selectAll('.layer')
- .data(['areas', 'lines', 'hit', 'halo', 'label']);
+ var groups = selection.selectAll('.data-layer')
+ .data(all);
- layers.enter().append('g')
- .attr('class', function(d) { return 'layer layer-osm layer-' + d; });
+ groups.enter()
+ .append('g')
+ .attr('class', function(d) { return 'layer data-layer data-layer-' + d.id; });
+
+ groups
+ .sort(function(a, b) { return a.order - b.order; })
+ .each(function(d) { d3.select(this).call(d.render); });
+
+ groups.exit()
+ .remove();
+ }
+
+
+ surface.only = function (what) {
+ var arr = [].concat(what);
+ surface.remove(_.difference(_.pluck(all, 'id'), arr));
+ return surface;
};
+
+ surface.remove = function (what) {
+ var arr = [].concat(what);
+ _.each(arr, function(id) {
+ all = _.reject(all, function(d) { return d.id === id; });
+ });
+ return surface;
+ };
+
+ surface.add = function (what) {
+ var arr = [].concat(what);
+ _.each(arr, function(obj) {
+ if ('order' in obj && 'id' in obj && 'render' in obj) {
+ all.push(obj);
+ }
+ });
+ return surface;
+ };
+
+
+ return surface;
};
diff --git a/js/id/ui/preset/restrictions.js b/js/id/ui/preset/restrictions.js
index aa0b91ee6..6a57ecbf9 100644
--- a/js/id/ui/preset/restrictions.js
+++ b/js/id/ui/preset/restrictions.js
@@ -7,21 +7,19 @@ iD.ui.preset.restrictions = function(field, context) {
var wrap = selection.selectAll('.preset-input-wrap')
.data([0]);
- var enter = wrap.enter().append('div')
+ var enter = wrap.enter()
+ .append('div')
.attr('class', 'preset-input-wrap');
- enter.append('div')
+ enter
+ .append('div')
.attr('class', 'restriction-help');
- enter.append('svg')
- .call(iD.svg.Surface(context))
- .call(iD.behavior.Hover(context));
var intersection = iD.geo.Intersection(context.graph(), vertexID),
graph = intersection.graph,
vertex = graph.entity(vertexID),
- surface = wrap.selectAll('svg'),
- filter = function () { return true; },
+ filter = d3.functor(true),
extent = iD.geo.Extent(),
projection = iD.geo.RawMercator(),
lines = iD.svg.Lines(projection, context),
@@ -30,7 +28,7 @@ iD.ui.preset.restrictions = function(field, context) {
var d = wrap.dimensions(),
c = [d[0] / 2, d[1] / 2],
- z = 21;
+ z = 24;
projection
.scale(256 * Math.pow(2, z) / (2 * Math.PI));
@@ -41,6 +39,13 @@ iD.ui.preset.restrictions = function(field, context) {
.translate([c[0] - s[0], c[1] - s[1]])
.clipExtent([[0, 0], d]);
+ enter
+ .append('svg')
+ .call(iD.svg.Surface(projection, context).only('osm'))
+ .call(iD.behavior.Hover(context));
+
+ var surface = wrap.selectAll('svg');
+
surface
.call(vertices, graph, [vertex], filter, extent, z)
.call(lines, graph, intersection.ways, filter)
diff --git a/test/index.html b/test/index.html
index febd5a40a..abd89e8ea 100644
--- a/test/index.html
+++ b/test/index.html
@@ -74,6 +74,7 @@
+
diff --git a/test/rendering.html b/test/rendering.html
index c6a7f9437..dfe463a48 100644
--- a/test/rendering.html
+++ b/test/rendering.html
@@ -21,6 +21,7 @@
+