mirror of
https://github.com/FoggedLens/iD.git
synced 2026-02-12 16:52:50 +00:00
Style improvements, fix more road styles
This commit is contained in:
94
css/app.css
94
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;
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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(','); });
|
||||
|
||||
|
||||
Reference in New Issue
Block a user