From 4637d401efccc4dbac13fab6b422326915b059fc Mon Sep 17 00:00:00 2001 From: Tom MacWright Date: Wed, 24 Oct 2012 10:58:46 -0400 Subject: [PATCH] Correctly separate areas and paths, start re-supporting nodes. --- css/app.css | 11 +++---- icons/generic.png | Bin 0 -> 734 bytes index.html | 2 +- js/iD/Connection.js | 12 ++------ js/iD/Node.js | 14 +++------ js/iD/renderer/Map.js | 17 ++++++----- js/iD/renderer/NodeUI.js | 35 ++++++++++++++++------- js/iD/renderer/WayUI.js | 60 +++++++++++++++++++++++---------------- 8 files changed, 82 insertions(+), 69 deletions(-) create mode 100644 icons/generic.png diff --git a/css/app.css b/css/app.css index ecda086d4..1b0e49b0b 100644 --- a/css/app.css +++ b/css/app.css @@ -52,10 +52,6 @@ path.stroke { stroke-width: 2; } -path.casing.natural { - display:none; -} - path.stroke.railway-rail { stroke: white; stroke-width: 3; @@ -68,20 +64,21 @@ path.stroke.railway-subway { stroke-dasharray: 8,8; } -path.stroke.natural { +path.area.natural { stroke: #ADD6A5; fill: #ADD6A5; stroke-width:1; fill-opacity:0.3; } -path.stroke.building { +path.area.building { stroke: #9E176A; + stroke-width: 1; fill: #ff6ec7; fill-opacity: 0.3; } -path.stroke.landuse { +path.area.landuse { stroke: #444; stroke-width:1; fill: #444; diff --git a/icons/generic.png b/icons/generic.png new file mode 100644 index 0000000000000000000000000000000000000000..e53102a501a6fac72fdb220be6f9c14336024d3a GIT binary patch literal 734 zcmV<40wMj0P)EZ7MK1y98wijY7sSJ)+ClbtKfLJG5PqIa?IZD;m< zA77M`}0YL3$b4cIxnpz_wEg6=AFtFHKIu(+9#u&KUjSzPK9&|{m=8=b7nlOz_sty_ zH+P(zUvXKuw?92>s45*6IjB zv0+*vCkV$&=uwrVluQJtC&{LEUkwLXjp}4my9B2vk&+3I=K1EdzvBr6mp4`fB0DrV zKsL3@_}Iv+;q5AwE5zbERBLr4GS=x%ym$g3ebcKTQUHmqwXVYf#>YlTY^}9IL@K0j zdR+sUS|cK1bk^^4b?lwA8r7Ng`;ahdYK@3%0BOlEz|z7@&*8Rg58Klnz;lyfzEx&# zk?mo7x&olp;pW}}pv`0PrS-nQ1)Ts+;km=TRc#)pt^tH34{-4g0Jewi=?*{= extent.west) && - (this.lon <= extent.east) && - (this.lat >= extent.south) && - (this.lat <= extent.north); + return (this.lon >= extent[0][0]) && + (this.lon <= extent[1][0]) && + (this.lat <= extent[0][1]) && + (this.lat >= extent[1][1]); }, refresh: function() { diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js index 806de43a1..e2f762acd 100755 --- a/js/iD/renderer/Map.js +++ b/js/iD/renderer/Map.js @@ -26,8 +26,9 @@ iD.renderer.Map = function(obj) { this.zoombehavior = d3.behavior.zoom() .translate(this.projection.translate()) - .scale(this.projection.scale()) - .on("zoom", _.bind(this.redraw, this)); + .scale(this.projection.scale()); + + this.zoombehavior.on("zoom", _.bind(this.redraw, this)); this.surface = d3.selectAll(obj.selector) .append('svg') @@ -150,8 +151,9 @@ iD.renderer.Map.prototype = { // summary: Draw/refresh all EntityUIs within the bbox, and remove any others. // redraw: Boolean Should we redraw any UIs that are already present? // remove: Boolean Should we delete any UIs that are no longer in the bbox? - var o = this.connection.getObjectsByBbox(this.extent); - var touch = _(o.inside).chain() + var o = this.connection.getObjectsByBbox(this.extent()); + + var touch = _(o).chain() .filter(function(w) { return w.loaded; }) .map(_.bind(function(e) { if (!this.uis[e.id]) { @@ -161,9 +163,10 @@ iD.renderer.Map.prototype = { } return '' + e.id; }, this)).value(); - _.each(_.difference(_.keys(this.uis), touch), _.bind(function(k) { - this.deleteUI(k); - }, this)); + + _.each(_.difference(_.keys(this.uis), touch), _.bind(function(k) { + this.deleteUI(k); + }, this)); }, // ------------- diff --git a/js/iD/renderer/NodeUI.js b/js/iD/renderer/NodeUI.js index af861fa17..2d3bb5c8c 100755 --- a/js/iD/renderer/NodeUI.js +++ b/js/iD/renderer/NodeUI.js @@ -13,18 +13,31 @@ iD.renderer.NodeUI.prototype = { draw: function() { // summary: Draw the object (mostly icons) and add hitzone sprites. // Tags, position and styleList - var x = Math.floor(this.map.lon2coord(this.node.lon)); - var y = Math.floor(this.map.latp2coord(this.node.latp)); var tags = this.getEnhancedTags(); - var im = this.map.layers[0].hit.append("image") - .attr('class', 'poi') - .attr('x', x) - .attr('y', y) - .attr('width', 16) - .attr('height', 16) - .attr("xlink:href", function() { - return tags.amenity ? 'icons/' + tags.amenity + '.png' : ''; - }); + function getIcon(tags) { + if (tags.amenity) { + return 'icons/' + tags.amenity + '.png'; + } + if (tags.shop) { + return 'icons/' + tags.shop + '.png'; + } + if (tags.highway === 'bus_stop') { + return 'icons/bus_stop.png'; + } + } + + var icon = getIcon(tags); + if (!icon) return; + + if (!this.marker) { + this.marker = this.map.layers[0].hit.append("image") + .attr('class', 'poi') + .attr('width', 16) + .attr('height', 16) + .attr("xlink:href", icon); + } + this.marker.attr('transform', + 'translate(' + this.map.projection(this.node) + ')'); } }; diff --git a/js/iD/renderer/WayUI.js b/js/iD/renderer/WayUI.js index 45a4de7df..bf7f4c6a4 100755 --- a/js/iD/renderer/WayUI.js +++ b/js/iD/renderer/WayUI.js @@ -15,11 +15,6 @@ iD.renderer.WayUI = function(entity, map) { }; iD.renderer.WayUI.prototype = { - getEnhancedTags: function() { - var tags = this.entity.tags; - if (this.entity.isClosed()) { tags[':area']='yes'; } - return tags; - }, getClasses: function() { var classes = []; @@ -45,29 +40,46 @@ iD.renderer.WayUI.prototype = { if (!way.nodes.length) { return; } // Create tags and calculate styleList - var tags = this.getEnhancedTags(); + var tags = this.entity.tags; var classes = this.getClasses(); - if (!this.casing) { - this.casing = this.map.layers[0].casing.append("path") - .data([way.nodes]) - .attr('class', function() { - return 'casing ' + classes; - }); + // This is an area + if (this.entity.isClosed()) { + + if (!this.stroke) { + this.stroke = this.map.layers[0].fill.append("path") + .data([way.nodes]) + .attr('class', function() { + return 'area ' + classes; + }); + } + + this.stroke.attr("d", this.map.linegen); + + } else { + + if (!this.casing) { + this.casing = this.map.layers[0].casing.append("path") + .data([way.nodes]) + .attr('class', function() { + return 'casing ' + classes; + }); + } + + this.casing.attr("d", this.map.linegen); + + if (!this.stroke) { + this.stroke = this.map.layers[0].stroke.append("path") + .data([way.nodes]) + .attr('class', function() { + return 'stroke ' + classes; + }); + } + + this.stroke.attr("d", this.map.linegen); + } - this.casing.attr("d", this.map.linegen); - - if (!this.stroke) { - this.stroke = this.map.layers[0].stroke.append("path") - .data([way.nodes]) - .attr('class', function() { - return 'stroke ' + classes; - }); - } - - this.stroke.attr("d", this.map.linegen); - return this; },