Fix icons for lines that use maki (fixes #1371)

Generate a single feature-icons.json and feature-icons.css.
In the JSON, features with a line icon are indicated by the
presence of a `line` property. PresetIcon looks for this to
determine whether or not to add the `preset-icon-line` class.
New line icons may be added by editing line-icons.json.

data/data_dev.js

@@ -14,7 +14,7 @@ iD.data = {
             path + 'data/presets/categories.json',
             path + 'data/presets/fields.json',
             path + 'data/imperial.json',
-            path + 'data/maki-sprite.json',
+            path + 'data/feature-icons.json',
             path + 'data/operations-sprite.json',
             path + 'data/locales.json',
             path + 'dist/locales/en.json'
@@ -32,7 +32,7 @@ iD.data = {
                     fields: data[7]
                 },
                 imperial: data[8],
-                maki: data[9],
+                featureIcons: data[9],
                 operations: data[10],
                 locales: data[11],
                 en: data[12]

data/line-icons.json

@@ -0,0 +1,44 @@
+{
+    "highway-motorway": [20, 25],
+    "highway-trunk": [80, 25],
+    "highway-primary": [140, 25],
+    "highway-secondary": [200, 25],
+    "highway-tertiary": [260, 25],
+    "highway-motorway-link": [320, 25],
+    "highway-trunk-link": [380, 25],
+    "highway-primary-link": [440, 25],
+    "highway-secondary-link": [500, 25],
+    "highway-tertiary-link": [560, 25],
+    "highway-residential": [620, 25],
+    "highway-unclassified": [680, 25],
+    "highway-service": [740, 25],
+    "highway-road": [800, 25],
+    "highway-track": [860, 25],
+    "highway-living-street": [920, 25],
+    "highway-path": [980, 25],
+    "highway-cycleway": [1040, 25],
+    "highway-footway": [1100, 25],
+    "highway-bridleway": [1160, 25],
+    "highway-steps": [1220, 25],
+
+    "railway-rail": [1280, 25],
+    "railway-disused": [1340, 25],
+    "railway-abandoned": [1400, 25],
+    "railway-subway": [1460, 25],
+    "railway-light-rail": [1520, 25],
+    "railway-monorail": [1580, 25],
+
+    "waterway-river": [1640, 25],
+    "waterway-stream": [1700, 25],
+    "waterway-canal": [1760, 25],
+    "waterway-ditch": [1820, 25],
+
+    "power-line": [1880, 25],
+
+    "other-line": [1940, 25],
+
+    "category-roads": [2000, 25],
+    "category-rail": [2060, 25],
+    "category-path": [2120, 25],
+    "category-water": [2180, 25]
+}

data/maki_sprite.js

@@ -1,8 +1,10 @@
 var fs = require('fs');
 var path = require('path');
 var sprite = require('node-sprite');
+var _ = require('../js/lib/lodash');
 
 var makipath = './node_modules/maki';
+var lineIcons = require('./line-icons.json');
 
 sprite.sprite('renders', { path: makipath }, function(err, makiSprite) {
     if (err) process.exit(1);
@@ -11,30 +13,38 @@ sprite.sprite('renders', { path: makipath }, function(err, makiSprite) {
     fs.renameSync(path.join(makipath, makiSprite.filename()), './dist/img/maki-sprite.png');
 
     // Generate CSS
-    var template = '.maki-{name}{background-position:{x} {y};width:{w};height:{h};}\n';
+    var template = '.feature-{name}{background-position:-{x}px -{y}px;}\n';
     var css = "/* This file is generated by make. Do NOT edit manually. */\n\n";
-    css += ".maki-icon{background-image:url(img/maki-sprite.png);background-repeat:no-repeat;}\n";
+    css += ".preset-icon{background-image:url(img/maki-sprite.png);background-repeat:no-repeat;width:24px;height:24px;}\n";
+    css += ".preset-icon-line{background-image:url(img/line-presets.png);background-repeat:no-repeat;width:60px;height:60px;}\n";
 
-    makiSprite.images.forEach(function(image) {
-        if (image.width !== 24) return;
-        css += template.replace('{name}', image.name.replace('-24', ''))
-            .replace('{x}', '-' + image.positionX + 'px')
-            .replace('{y}', '-' + image.positionY + 'px')
-            .replace('{w}', image.width + 'px')
-            .replace('{h}', image.height + 'px');
-    });
-
-    fs.writeFileSync('./css/maki-sprite.css', css);
-
-    // Generate JSON
     var images = {};
+
     makiSprite.images.forEach(function(image) {
         var match = image.name.match(/(.*)-(12|18|24)/),
             name = match[1],
             size = match[2],
             group = images[name] = images[name] || {};
         group[size] = [image.positionX, image.positionY];
+
+        if (image.width === 24) {
+            css += template.replace('{name}', image.name.replace('-24', ''))
+                .replace('{x}', image.positionX)
+                .replace('{y}', image.positionY);
+        }
     });
 
-    fs.writeFileSync('./data/maki-sprite.json', JSON.stringify(images));
+    template = '.preset-icon-line.feature-{name}{background-position:-{x}px -{y}px;}\n';
+
+    _.forEach(lineIcons, function(position, name) {
+        css += template.replace('{name}', name)
+            .replace('{x}', position[0])
+            .replace('{y}', position[1]);
+
+        images[name] = images[name] || {};
+        images[name].line = position;
+    });
+
+    fs.writeFileSync('./css/feature-icons.css', css);
+    fs.writeFileSync('./data/feature-icons.json', JSON.stringify(images));
 });