diff --git a/css/app.css b/css/app.css
index 49e6c9314..520a7566d 100644
--- a/css/app.css
+++ b/css/app.css
@@ -6,7 +6,7 @@ body {
margin:0;
padding:0;
color:#222;
- /* text-rendering: optimizeLegibility; */
+ /* text-rendering: optimizeLegibility; */
-webkit-font-smoothing: subpixel-antialiased;
}
@@ -42,6 +42,10 @@ em {
font-style: italic;
}
+strong {
+ font-style: bold;
+}
+
a:visited, a {
color: #b0b0b0;
}
@@ -118,7 +122,6 @@ button:hover form.hide {
/* Buttons */
button {
- border:0;
line-height:20px;
cursor:pointer;
border:1px solid #aaa;
@@ -245,17 +248,23 @@ button.action .label {
margin-right: 3px;
}
+/* Definitions for every icon */
.icon.browse { background-position: 0px 0px;}
.icon.add-place { background-position: -20px 0px;}
.icon.add-road { background-position: -40px 0px;}
.icon.add-area { background-position: -60px 0px;}
.icon.undo { background-position: -80px 0px;}
.icon.redo { background-position: -100px 0px;}
-.apply.icon { background-position: -120px 0px;}
-.save.icon { background-position: -140px 0px;}
-.close.icon { background-position: -160px 0px;}
-.delete.icon { background-position: -180px 0px;}
-.toggle.icon { background-position: 0px -180px;}
+.icon.apply { background-position: -120px 0px;}
+.icon.save { background-position: -140px 0px;}
+.icon.close { background-position: -160px 0px;}
+.icon.delete { background-position: -180px 0px;}
+.icon.remove { background-position: -200px 0px;}
+.icon.inspect { background-position: -220px 0px;}
+.icon.zoom-in { background-position: -240px 0px;}
+.icon.zoom-out { background-position: -260px 0px;}
+.icon.geocode { background-position: -280px 0px;}
+.icon.layers { background-position: -300px 0px;}
.active .icon.browse { background-position: 0px -20px;}
.active .icon.add-place { background-position: -20px -20px;}
@@ -263,15 +272,16 @@ button.action .label {
.active .icon.add-area { background-position: -60px -20px;}
.active .icon.undo { background-position: -80px -20px;}
.active .icon.redo { background-position: -100px -20px;}
-.active .apply.icon { background-position: -120px -20px;}
-.active .save.icon { background-position: -140px -20px;}
-.active .close.icon { background-position: -160px -20px;}
-.active .delete.icon { background-position: -180px -20px;}
-
-a:hover .toggle.icon { background-position: -20px -180px;}
-.selected .toggle.icon,
-a.selected:hover .toggle.icon { background-position: -40px -180px;}
-
+.active .icon.apply { background-position: -120px -20px;}
+.active .icon.save { background-position: -140px -20px;}
+.active .icon.close { background-position: -160px -20px;}
+.active .icon.delete { background-position: -180px -20px;}
+.active .icon.remove { background-position: -200px -20px;}
+.active .icon.inspect { background-position: -220px -20px;}
+.active .icon.zoom-in { background-position: -240px -20px;}
+.active .icon.zoom-out { background-position: -260px -20px;}
+.active .icon.geocode { background-position: -280px -20px;}
+.active .icon.layers { background-position: -300px -20px;}
button[disabled] .icon.browse { background-position: 0px -40px;}
button[disabled] .icon.add-place { background-position: -20px -40px;}
@@ -283,6 +293,18 @@ button[disabled] .apply.icon { background-position: -120px -40px;}
button[disabled] .save.icon { background-position: -140px -40px;}
button[disabled] .close.icon { background-position: -160px -40px;}
button[disabled] .delete.icon { background-position: -180px -40px;}
+button[disabled] .icon.remove { background-position: -200px -40px;}
+button[disabled] .icon.inspect { background-position: -220px -40px;}
+button[disabled] .icon.zoom-in { background-position: -240px -40px;}
+button[disabled] .icon.zoom-out { background-position: -260px -40px;}
+button[disabled] .icon.geocode { background-position: -280px -40px;}
+button[disabled] .icon.layers { background-position: -300px -40px;}
+
+/* Toggle Icon is special */
+.toggle.icon { background-position: 0px -180px;}
+a:hover .toggle.icon { background-position: -20px -180px;}
+.selected .toggle.icon,
+a.selected:hover .toggle.icon { background-position: -40px -180px;}
/* ToolBar / Persistent UI Elements
------------------------------------------------------- */
@@ -372,17 +394,6 @@ button.Browse .label {
position:absolute;
}
-.map-control button {
- text-indent: -9999px;
- overflow: hidden;
- background-image: url(../img/sprite.png);
-}
-
-.layerswitcher-control button {background-position: -110px -90px;}
-.layerswitcher-control button.active {background-position: -110px -130px;}
-.geocode-control button {background-position: -70px -90px;}
-.geocode-control button.active {background-position: -70px -130px;}
-
.map-overlay {
width: 150px;
position:absolute;
@@ -405,13 +416,11 @@ button.Browse .label {
}
.zoombuttons button.zoom-in {
- background-position: 10px -90px;
- border-bottom:0;
border-radius:4px 4px 0 0;
}
.zoombuttons button.zoom-out {
- background-position: -30px -90px;
+ border-top:0;
border-radius:0 0 4px 4px;
}
diff --git a/img/source/design.svg b/img/source/design.svg
index 370519793..e21c2513c 100644
--- a/img/source/design.svg
+++ b/img/source/design.svg
@@ -21,6 +21,11 @@
inkscape:export-ydpi="90">
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ empopacity="0.1254902" />
-
-
+ style="display:inline">
Contribute to OpenStreetMap by adding points, points, lines or lines or areas. areas.
+ style="color:#000000;fill:#1a1a1a;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;" />
+ style="display:inline;">
Tags
+ x="595"
+ y="115">Edit Tags
Things like restaurants, monuments, and postal boxes are points. Add a point of interest to the map.
+ transform="translate(-115,-50)">
+ transform="translate(125,-50)">
+ x="585.50006"
+ y="130.5" />
- Values
-
-
-
-
-
-
-
- t
- Highway
- Tertiary Road
-
@@ -2546,60 +2442,60 @@
sodipodi:nodetypes="ccccccc"
inkscape:connector-curvature="0"
id="path43425"
- d="m 725,210 0,1 215,0 0,-0.5 0,-0.5 0,0 z"
+ d="m 705,190 0,1 175,0 0,-0.5 0,-0.5 0,0 z"
style="font-size:medium;font-style:normal;font-variant:normal;font-weight:normal;font-stretch:normal;text-indent:0;text-align:start;text-decoration:none;line-height:normal;letter-spacing:normal;word-spacing:normal;text-transform:none;direction:ltr;block-progression:tb;writing-mode:lr-tb;text-anchor:start;baseline-shift:baseline;color:#000000;fill:#cccccc;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.00000012;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate;font-family:Sans;-inkscape-font-specification:Sans" />
Name
+ x="595"
+ y="179">Name
10th Avenue Southeast
Source
Bing
+ x="714"
+ y="209">Bing
+ id="g44675"
+ transform="translate(-20,-20)">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ transform="translate(-30,81.00001)"
+ style="fill:#7092ff;fill-opacity:1;display:inline">
+
+
+
+
+ Key: Highway
+ Common Values
+
+
+
+
+
+
+
+
+
+
+ Highway
+ Tertiary Road
+ id="path44421-6"
+ d="m 869,143 -3.99999,6 -4,-6 z"
+ style="color:#000000;fill:#ffffff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Key: Highway
+
+ The highway tag is the primary tag used for highways. It is a very general and sometimes vague description of the importance of the highway for the road grid.
+ view wiki.openstreetmap.org entry
+
+ Description
+
+
+
+
+
+
+
+
+
+ Common Values
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+ Tertiary Road
+ Tertiary Road
+
-
+ id="path44421"
+ d="m 869,143 -3.99999,6 -4,-6 z"
+ style="color:#000000;fill:#7092ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
-
-
-
-
-
-
-
-
-
-
-
+ ry="0"
+ rx="0"
+ style="color:#000000;fill:#d6e0ff;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1.00000012;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="rect45841"
+ width="116"
+ height="27"
+ x="587"
+ y="132" />
+ Highway
+ Highway
+ id="g45989">
-
-
-
-
-
+ style="opacity:0.9;color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.99999994;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate"
+ id="rect45865-3"
+ width="454"
+ height="180"
+ x="90.5"
+ y="289.5" />
-
-
+ y="110.5"
+ x="90.5"
+ height="179"
+ width="454"
+ id="rect45875-1"
+ style="opacity:0.9;color:#000000;fill:#393939;fill-opacity:1;fill-rule:nonzero;stroke:#000000;stroke-width:0.99999988;stroke-linecap:butt;stroke-linejoin:miter;stroke-miterlimit:4;stroke-opacity:1;stroke-dasharray:none;stroke-dashoffset:0;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+
+
+ Key: Highway
+ The highway tag is the primary tag used for highways. It is a very general and sometimes vague description of the importance of the highway for the road grid.
+ view wiki.openstreetmap.org entry
+ Description
+ Common Values
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
+ style="display:none">
Tags
- Values
+ y="155">Edit Tags
@@ -125,6 +125,26 @@
orientation="0,1"
position="15,20"
id="guide32247" />
+
+
+
+
+
@@ -143,22 +163,68 @@
inkscape:groupmode="layer"
id="layer1"
transform="translate(-25,-62.362183)"
- style="display:none">
-
-
+ style="display:inline" />
+ transform="translate(-25,1.9140625e-6)">
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
-
+ style="opacity:0.2;color:#000000;fill:#222222;fill-opacity:1;fill-rule:nonzero;stroke:none;stroke-width:1;marker:none;visibility:visible;display:inline;overflow:visible;filter:url(#filter8013-4);enable-background:accumulate" />
+ style="color:#000000;fill:#e7e7e7;fill-opacity:1;stroke:none;stroke-width:0.99999988;marker:none;visibility:visible;display:inline;overflow:visible;enable-background:accumulate" />
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/img/sprite.png b/img/sprite.png
index 31e194461..581045621 100644
Binary files a/img/sprite.png and b/img/sprite.png differ
diff --git a/js/id/id.js b/js/id/id.js
index f879a803f..4af92b870 100644
--- a/js/id/id.js
+++ b/js/id/id.js
@@ -128,11 +128,16 @@ window.iD = function(container) {
.selectAll('button')
.data([['zoom-in', '+', map.zoomIn], ['zoom-out', '-', map.zoomOut]])
.enter().append('button').attr('class', function(d) { return d[0] + ' narrow'; })
- .text(function(d) { return d[1]; })
- .on('click', function(d) { return d[2](); });
+ .on('click', function(d) { return d[2](); })
+ .append('span')
+ .attr('class', function(d) {
+ return d[0] + ' icon'
+ });
var gc = this.append('div').attr('class', 'geocode-control map-control');
- gc.append('button').text('geocode').attr('class','narrow')
+ gc.append('button')
+ .attr('class','narrow')
+ .html("")
.on('click', function() {
d3.select(this)
.classed('active', function() {
diff --git a/js/id/ui/layerswitcher.js b/js/id/ui/layerswitcher.js
index 64f37a886..266106d3d 100644
--- a/js/id/ui/layerswitcher.js
+++ b/js/id/ui/layerswitcher.js
@@ -32,7 +32,7 @@ iD.layerswitcher = function(map) {
var toggle = selection
.append('button')
.attr('class', 'narrow')
- .text('Layers')
+ .html("")
.on('click.toggle', function() {
d3.select(this)
.classed('active', function() {