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 000000000..e53102a50 Binary files /dev/null and b/icons/generic.png differ diff --git a/index.html b/index.html index 7af5c5871..35bb7e607 100755 --- a/index.html +++ b/index.html @@ -92,7 +92,7 @@ height: 700 }); map.setZoom(18); - map.setCentre({ lat: 40.786, lon: -74.691 }); + map.setCentre({ lat: 40.796, lon: -74.691 }); // Initialise controller var controller = new iD.Controller(map); diff --git a/js/iD/Connection.js b/js/iD/Connection.js index 70e2a54ce..e7478b822 100755 --- a/js/iD/Connection.js +++ b/js/iD/Connection.js @@ -60,18 +60,12 @@ iD.Connection = function(apiURL) { return relation; } - function getObjectsByBbox(left,right,top,bottom) { + function getObjectsByBbox(extent) { // summary: Find all drawable entities that are within a given bounding box. // Each one is an array of entities. - var o = { - inside: [], - outside: [] - }; - _.each(this.entities, function(e, id) { - if (e.within(left, right, top, bottom)) { o.inside.push(e); } - else { o.outside.push(e); } + return _.filter(this.entities, function(e, id) { + return e.within(extent); }); - return o; } // ------------ diff --git a/js/iD/Node.js b/js/iD/Node.js index 68200f47e..66ea0b904 100644 --- a/js/iD/Node.js +++ b/js/iD/Node.js @@ -29,17 +29,11 @@ iD.Node.prototype = { }; }, - latp2lat: function(a) { - // summary: Get a latitude from a projected latitude. - // returns: Latitude. - return 180/Math.PI * (2 * Math.atan(Math.exp(a*Math.PI/180)) - Math.PI/2); - }, - within: function(extent) { - return (this.lon >= 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; },