diff --git a/css/app.css b/css/app.css index dc8026d96..55c3db3a1 100644 --- a/css/app.css +++ b/css/app.css @@ -54,101 +54,7 @@ table th { text-align:left; } -path { - fill: none; - cursor: pointer; -} -circle.handle { - cursor: move; - stroke-width: 1; - stroke:#222; - fill:#eee; -} - -path.casing { - stroke: #111; - stroke-width: 3; -} - -path.casing.active { - stroke:#FFF9C9; - stroke-opacity:0.5; - stroke-width:8; -} - -path.stroke { - stroke: #555; - stroke-width: 2; -} - -path.stroke.railway-rail { - stroke: white; - stroke-width: 3; - stroke-dasharray: 12,12; -} - -path.stroke.railway-subway { - stroke: #444; - stroke-width: 3; - stroke-dasharray: 8,8; -} - -path.area.active { - fill-opacity:0.4; -} - -path.area.natural { - stroke: #ADD6A5; - fill: #ADD6A5; - stroke-width:1; - fill-opacity:0.3; -} - -path.area.building { - stroke: #9E176A; - stroke-width: 1; - fill: #ff6ec7; - fill-opacity: 0.3; -} - -path.area.landuse { - stroke: #444; - stroke-width:1; - fill: #444; - opacity:0.2; -} - -path.stroke.highway-residential { - stroke:#E8E8E8; - stroke-width:3; -} - -path.stroke.highway-unclassified, -path.stroke.highway-tertiary { - stroke:#FEFECB; - stroke-width:3; -} - -path.stroke.highway-service { - stroke:#fff; - stroke-width:2; -} - -path.stroke.highway-motorway, -path.stroke.highway-motorway_link { - stroke:#809BC0; -} - -path.stroke.highway-trunk, -path.stroke.highway-trunk_link { - stroke:#7FC97F; -} - -path.stroke.waterway { - stroke: #10539a; - stroke-width: 3; -} .help-pane { position:absolute; diff --git a/index.html b/index.html index c4bd27acf..e8d2f9a7d 100755 --- a/index.html +++ b/index.html @@ -3,9 +3,10 @@ iD + - + diff --git a/js/iD/renderer/Map.js b/js/iD/renderer/Map.js index e9649d9a2..611743314 100755 --- a/js/iD/renderer/Map.js +++ b/js/iD/renderer/Map.js @@ -15,6 +15,9 @@ iD.renderer.Map = function(obj) { connection = obj.connection, layers = {}; + var tagclasses = [ + 'highway', 'railway', 'motorway', 'amenity', 'landuse', 'building']; + var linegen = d3.svg.line() .x(function(d) { return projection(d)[0]; }) .y(function(d) { return projection(d)[1]; }); @@ -39,9 +42,9 @@ iD.renderer.Map = function(obj) { .attr({ width: width, height: height }); var tilegroup = surface.append('g') - .attr('clip-path', 'url(#clip)'); - var container = surface.append('g') - .attr('clip-path', 'url(#clip)'); + .attr('clip-path', 'url(#clip)'), + container = surface.append('g') + .attr('clip-path', 'url(#clip)'); var minlayer = -5, maxlayer = 5; for (var l = minlayer; l <= maxlayer; l++) { @@ -55,10 +58,10 @@ iD.renderer.Map = function(obj) { hit: r.append('g') }; } + var elastic = container.append('g'); var download = _.debounce(function() { - // summary: Ask the connection to download data for the current viewport. connection.loadFromAPI(extent(), drawVector); }, 1000); @@ -74,34 +77,31 @@ iD.renderer.Map = function(obj) { function key(d) { return d._id; } - function drawVector() { - // 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? - function classes(d) { - var tags = d.tags; - var c = []; - function clean(x) { - return x.indexOf(' ') === -1 && x.length < 30; - } - for (var k in tags) { - var v = tags[k]; - if (!clean(k) || !clean(v)) { - continue; - } - c.push(k + '-' + v); - c.push(k); - c.push(v); - } - if (selection.indexOf(d._id) !== -1) { - c.push('active'); - } - return c.join(' '); + function classes(d) { + var tags = d.tags; + var c = []; + function clean(x) { + return tagclasses.indexOf(x) !== -1; } + for (var k in tags) { + if (!clean(k)) continue; + c.push(k + '-' + tags[k]); + c.push(k); + } + if (selection.indexOf(d._id) !== -1) { + c.push('active'); + } + return c.join(' '); + } + var selectClick = function(d) { + select(d); + drawVector(); + }; + + function drawVector() { var all = connection.all(); - var ways = all.filter(function(a) { return a.entityType === 'way' && !a.isClosed(); }); @@ -110,11 +110,6 @@ iD.renderer.Map = function(obj) { return a.entityType === 'way' && a.isClosed(); }); - var selectClick = function(d) { - select(d); - drawVector(); - }; - var fills = layers[0].fill.selectAll('path.area') .data(areas, key); @@ -176,7 +171,6 @@ iD.renderer.Map = function(obj) { return 'translate(' + projection(d) + ')'; }); } - // ------------- // Zoom handling @@ -225,6 +219,20 @@ iD.renderer.Map = function(obj) { 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 @@ -242,20 +250,6 @@ iD.renderer.Map = function(obj) { var tile_origin = [s / 2 - t[0], s / 2 - t[1]], coords = tilesForView(); - var tmpl = 'http://ecn.t0.tiles.virtualearth.net/tiles/a$quadkey.jpeg?g=587&mkt=en-gb&n=z'; - - function tileUrl(coord) { - 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); - } - var tiles = tilegroup.selectAll('image.tile') .data(coords, function(d) { return d.join(','); });