diff --git a/Makefile b/Makefile
index 0dc46f02e..91b25f8f3 100644
--- a/Makefile
+++ b/Makefile
@@ -98,6 +98,9 @@ translations:
data/locales.js: data/locales/*.js
cat $^ > $@
+img/line-presets.png: svg/line-presets.svg
+ inkscape --export-area-page --export-png=img/line-presets.png svg/line-presets.svg
+
D3_FILES = \
node_modules/d3/src/start.js \
node_modules/d3/src/arrays/index.js \
diff --git a/css/line-presets.css b/css/line-presets.css
new file mode 100644
index 000000000..d779b3dca
--- /dev/null
+++ b/css/line-presets.css
@@ -0,0 +1,54 @@
+.preset-line-icon {
+ background-image: url(../img/line-presets.png);
+ width: 60px;
+ height: 60px;
+ overflow: hidden;
+ text-indent: -9999px;
+}
+
+/* Roads */
+.preset-line-icon.highway-motorway { background-position: -20px -20px;}
+.preset-line-icon.highway-trunk { background-position: -80px -20px;}
+.preset-line-icon.highway-primary { background-position: -140px -20px;}
+.preset-line-icon.highway-secondary { background-position: -200px -20px;}
+.preset-line-icon.highway-tertiary { background-position: -260px -20px;}
+.preset-line-icon.highway-motorway-link { background-position: -320px -20px;}
+.preset-line-icon.highway-trunk-link { background-position: -380px -20px;}
+.preset-line-icon.highway-primary-link { background-position: -440px -20px;}
+.preset-line-icon.highway-secondary-link { background-position: -500px -20px;}
+.preset-line-icon.highway-tertiary-link { background-position: -560px -20px;}
+.preset-line-icon.highway-residential { background-position: -620px -20px;}
+.preset-line-icon.highway-unclassified { background-position: -680px -20px;}
+.preset-line-icon.highway-service { background-position: -740px -20px;}
+.preset-line-icon.highway-road { background-position: -800px -20px;}
+.preset-line-icon.highway-track { background-position: -860px -20px;}
+.preset-line-icon.highway-living-street { background-position: -920px -20px;}
+.preset-line-icon.highway-path { background-position: -980px -20px;}
+.preset-line-icon.highway-cycleway { background-position: -1040px -20px;}
+.preset-line-icon.highway-footway { background-position: -1100px -20px;}
+.preset-line-icon.highway-bridleway { background-position: -1160px -20px;}
+.preset-line-icon.highway-steps { background-position: -1220px -20px;}
+
+/* Railway */
+.preset-line-icon.railway-rail { background-position: -1280px -20px;}
+.preset-line-icon.railway-disused { background-position: -1340px -20px;}
+.preset-line-icon.railway-abandoned { background-position: -1400px -20px;}
+.preset-line-icon.railway-subway { background-position: -1460px -20px;}
+.preset-line-icon.railway-light-rail { background-position: -1520px -20px;}
+.preset-line-icon.railway-monorail { background-position: -1580px -20px;}
+
+/* Waterway */
+.preset-line-icon.waterway-river { background-position: -1640px -20px;}
+.preset-line-icon.waterway-stream { background-position: -1700px -20px;}
+.preset-line-icon.waterway-canal { background-position: -1760px -20px;}
+.preset-line-icon.waterway-ditch { background-position: -1820px -20px;}
+
+.preset-line-icon.power-line { background-position: -1880px -20px;}
+
+.preset-line-icon.other-line { background-position: -1940px -20px;}
+
+.preset-line-icon.category-roads { background-position: -2000px -20px;}
+.preset-line-icon.category-rail { background-position: -2060px -20px;}
+.preset-line-icon.category-path { background-position: -2120px -20px;}
+.preset-line-icon.category-water { background-position: -2180px -20px;}
+
diff --git a/img/line-presets.png b/img/line-presets.png
new file mode 100644
index 000000000..96664a5a3
Binary files /dev/null and b/img/line-presets.png differ
diff --git a/index.html b/index.html
index b03920b1a..ae5a68b76 100644
--- a/index.html
+++ b/index.html
@@ -7,6 +7,7 @@
+
diff --git a/index_packaged.html b/index_packaged.html
index 670280016..1000b5b12 100644
--- a/index_packaged.html
+++ b/index_packaged.html
@@ -7,6 +7,7 @@
+
diff --git a/js/id/ui/preset_icon.js b/js/id/ui/preset_icon.js
index fb3437dae..5877bc262 100644
--- a/js/id/ui/preset_icon.js
+++ b/js/id/ui/preset_icon.js
@@ -13,7 +13,9 @@ iD.ui.PresetIcon = function(geometry) {
selection.append('div')
.attr('class', function(preset) {
- return 'feature-' + (preset.icon || fallbackIcon) + ' icon preset-icon preset-icon-' + geometry;
+ return (geometry === 'line' ? 'preset-line-icon ' : 'feature-') +
+ (preset.icon || fallbackIcon) +
+ ' preset-icon preset-icon-' + geometry;
});
};
};
diff --git a/js/id/ui/tag_editor.js b/js/id/ui/tag_editor.js
index 576b2fa14..ea47aae3c 100644
--- a/js/id/ui/tag_editor.js
+++ b/js/id/ui/tag_editor.js
@@ -36,8 +36,6 @@ iD.ui.TagEditor = function(context, entity) {
.append('span')
.attr('class', 'icon back');
- var icon = preset.icon || (geometry === 'line' ? 'other-line' : 'marker-stroked');
-
messagewrap.append('h3')
.attr('class', 'inspector-inner')
.text(t('inspector.editing_feature', { feature: preset.name() }));
diff --git a/svg/line-presets.svg b/svg/line-presets.svg
index 405d77371..62b471f49 100644
--- a/svg/line-presets.svg
+++ b/svg/line-presets.svg
@@ -10,7 +10,7 @@
xmlns:xlink="http://www.w3.org/1999/xlink"
xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
- width="100"
+ width="3000"
height="100"
id="svg7013"
version="1.1"