Style improvements, fix more road styles

This commit is contained in:
Tom MacWright
2012-10-24 15:59:09 -04:00
parent 82278bad85
commit d1d1413e19
3 changed files with 44 additions and 143 deletions

View File

@@ -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;

View File

@@ -3,9 +3,10 @@
<head>
<meta charset="utf-8">
<title>iD</title>
<link rel="stylesheet" href="css/map.css">
<link rel="stylesheet" href="css/app.css">
</head>
<body class="claro">
<body>
<script type="text/javascript" src="js/lib/underscore-min.js"></script>
<script type="text/javascript" src="js/lib/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="js/lib/d3.v2.min.js"></script>

View File

@@ -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(','); });