fix maki icons, tweak rendering of icons

* maki v7+ doesn't have provide "11px" icons anymore
* use 12px for icons on points & vertices on map (instead of 11px)
* use 12px for icons on QA tool (improveOSM, osmose) markers (instead of 13px)
* drop some unused code

modules/svg/improveOSM.js

@@ -127,20 +127,11 @@ export function svgImproveOSM(projection, context, dispatch) {
 
     markersEnter
       .append('use')
-        .attr('transform', 'translate(-6.5, -23)')
         .attr('class', 'icon-annotation')
-        .attr('width', '13px')
-        .attr('height', '13px')
-        .attr('xlink:href', d => {
-          const picon = d.icon;
-
-          if (!picon) {
-          return '';
-          } else {
-          const isMaki = /^maki-/.test(picon);
-          return `#${picon}${isMaki ? '-11' : ''}`;
-          }
-        });
+        .attr('transform', 'translate(-6, -22)')
+        .attr('width', '12px')
+        .attr('height', '12px')
+        .attr('xlink:href', d => d.icon ? '#' + d.icon : '');
 
     // update
     markers

modules/svg/labels.js

@@ -202,13 +202,7 @@ export function svgLabels(projection, context) {
             .attr('xlink:href', function(d) {
                 var preset = presetManager.match(d, context.graph());
                 var picon = preset && preset.icon;
-
-                if (!picon) {
-                    return '';
-                } else {
-                    var isMaki = /^maki-/.test(picon);
-                    return '#' + picon + (isMaki ? '-15' : '');
-                }
+                return picon ? '#' + picon : '';
             });
     }
 

modules/svg/osmose.js

@@ -127,20 +127,11 @@ export function svgOsmose(projection, context, dispatch) {
 
     markersEnter
       .append('use')
-        .attr('transform', 'translate(-6.5, -23)')
         .attr('class', 'icon-annotation')
-        .attr('width', '13px')
-        .attr('height', '13px')
-        .attr('xlink:href', d => {
-          const picon = d.icon;
-
-          if (!picon) {
-            return '';
-          } else {
-            const isMaki = /^maki-/.test(picon);
-            return `#${picon}${isMaki ? '-11' : ''}`;
-          }
-        });
+        .attr('transform', 'translate(-6, -22)')
+        .attr('width', '12px')
+        .attr('height', '12px')
+        .attr('xlink:href', d => d.icon ? '#' + d.icon : '');
 
     // update
     markers

modules/svg/points.js

@@ -119,10 +119,10 @@ export function svgPoints(projection, context) {
 
         enter
             .append('use')
-            .attr('transform', 'translate(-5, -19)')
+            .attr('transform', 'translate(-5.5, -20)')
             .attr('class', 'icon')
-            .attr('width', '11px')
-            .attr('height', '11px');
+            .attr('width', '12px')
+            .attr('height', '12px');
 
         groups = groups
             .merge(enter)
@@ -144,13 +144,7 @@ export function svgPoints(projection, context) {
             .attr('xlink:href', function(entity) {
                 var preset = presetManager.match(entity, graph);
                 var picon = preset && preset.icon;
-
-                if (!picon) {
-                    return '';
-                } else {
-                    var isMaki = /^maki-/.test(picon);
-                    return '#' + picon + (isMaki ? '-11' : '');
-                }
+                return picon ? '#' + picon : '';
             });
 
 

modules/svg/vertices.js

@@ -155,13 +155,12 @@ export function svgVertices(projection, context) {
         iconUse.enter()
             .append('use')
             .attr('class', 'icon')
-            .attr('width', '11px')
-            .attr('height', '11px')
-            .attr('transform', 'translate(-5.5, -5.5)')
+            .attr('width', '12px')
+            .attr('height', '12px')
+            .attr('transform', 'translate(-6, -6)')
             .attr('xlink:href', function(d) {
                 var picon = getIcon(d);
-                var isMaki = /^maki-/.test(picon);
-                return '#' + picon + (isMaki ? '-11' : '');
+                return picon ? '#' + picon : '';
             });
 
 

modules/ui/improveOSM_header.js

@@ -46,18 +46,10 @@ export function uiImproveOsmHeader() {
     svgEnter
       .append('use')
         .attr('class', 'icon-annotation')
-        .attr('width', '13px')
-        .attr('height', '13px')
-        .attr('transform', 'translate(3.5, 5)')
-        .attr('xlink:href', d => {
-          const picon = d.icon;
-          if (!picon) {
-            return '';
-          } else {
-            const isMaki = /^maki-/.test(picon);
-            return `#${picon}${isMaki ? '-11' : ''}`;
-          }
-        });
+        .attr('width', '12px')
+        .attr('height', '12px')
+        .attr('transform', 'translate(4, 5.5)')
+        .attr('xlink:href', d => d.icon ? '#' + d.icon : '');
 
     headerEnter
       .append('div')

modules/ui/osmose_header.js

@@ -48,19 +48,10 @@ export function uiOsmoseHeader() {
     svgEnter
       .append('use')
         .attr('class', 'icon-annotation')
-        .attr('width', '13px')
-        .attr('height', '13px')
-        .attr('transform', 'translate(3.5, 5)')
-        .attr('xlink:href', d => {
-          const picon = d.icon;
-
-          if (!picon) {
-            return '';
-          } else {
-            const isMaki = /^maki-/.test(picon);
-            return `#${picon}${isMaki ? '-11' : ''}`;
-          }
-        });
+        .attr('width', '12px')
+        .attr('height', '12px')
+        .attr('transform', 'translate(4, 5.5)')
+        .attr('xlink:href', d => d.icon ? '#' + d.icon : '');
 
     headerEnter
       .append('div')

modules/ui/preset_icon.js

@@ -9,12 +9,6 @@ import { utilFunctor } from '../util';
 export function uiPresetIcon() {
   let _preset;
   let _geometry;
-  let _sizeClass = 'medium';
-
-
-  function isSmall() {
-    return _sizeClass === 'small';
-  }
 
 
   function presetIcon(selection) {
@@ -23,11 +17,9 @@ export function uiPresetIcon() {
 
 
   function getIcon(p, geom) {
-    if (isSmall() && p.isFallback && p.isFallback()) return 'iD-icon-' + p.id;
     if (p.icon) return p.icon;
     if (geom === 'line') return 'iD-other-line';
     if (geom === 'vertex') return p.isFallback() ? '' : 'temaki-vertex';
-    if (isSmall() && geom === 'point') return '';
     return 'maki-marker-stroked';
   }
 
@@ -129,7 +121,7 @@ export function uiPresetIcon() {
 
     let fillEnter = fill.enter();
 
-    const d = isSmall() ? 40 : 60;
+    const d = 60;
     const w = d;
     const h = d;
     const l = d * 2/3;
@@ -160,17 +152,15 @@ export function uiPresetIcon() {
         .attr('r', rVertex);
     });
 
-    if (!isSmall()) {
-      const rMidpoint = 1.25;
-      [[c1, w/2], [c2, w/2], [h/2, c1], [h/2, c2]].forEach(point => {
-        fillEnter
-          .append('circle')
-          .attr('class', 'midpoint')
-          .attr('cx', point[0])
-          .attr('cy', point[1])
-          .attr('r', rMidpoint);
-      });
-    }
+    const rMidpoint = 1.25;
+    [[c1, w/2], [c2, w/2], [h/2, c1], [h/2, c2]].forEach(point => {
+      fillEnter
+        .append('circle')
+        .attr('class', 'midpoint')
+        .attr('cx', point[0])
+        .attr('cy', point[1])
+        .attr('r', rMidpoint);
+    });
 
     fill = fillEnter.merge(fill);
 
@@ -191,7 +181,7 @@ export function uiPresetIcon() {
 
     let lineEnter = line.enter();
 
-    const d = isSmall() ? 40 : 60;
+    const d = 60;
     // draw the line parametrically
     const w = d;
     const h = d;
@@ -243,7 +233,7 @@ export function uiPresetIcon() {
 
     let routeEnter = route.enter();
 
-    const d = isSmall() ? 40 : 60;
+    const d = 60;
     // draw the route parametrically
     const w = d;
     const h = d;
@@ -330,13 +320,8 @@ export function uiPresetIcon() {
     icon.selectAll('svg')
       .attr('class', 'icon ' + picon + ' ' + (!isiDIcon && geom !== 'line'  ? '' : tagClasses));
 
-    var suffix = '';
-    if (isMaki) {
-      suffix = isSmall() && geom === 'point' ? '-11' : '-15';
-    }
-
     icon.selectAll('use')
-      .attr('href', '#' + picon + suffix);
+      .attr('href', '#' + picon);
   }
 
 
@@ -396,12 +381,12 @@ export function uiPresetIcon() {
     }
 
     const showThirdPartyIcons = prefs('preferences.privacy.thirdpartyicons') || 'true';
-    const isFallback = isSmall() && p.isFallback && p.isFallback();
+    const isFallback = p.isFallback && p.isFallback();
     const imageURL = (showThirdPartyIcons === 'true') && p.imageURL;
     const picon = getIcon(p, geom);
     const isCategory = !p.setTags;
-    const drawPoint = picon && geom === 'point' && isSmall() && !isFallback;
-    const drawVertex = picon !== null && geom === 'vertex' && (!isSmall() || !isFallback);
+    const drawPoint = false;
+    const drawVertex = picon !== null && geom === 'vertex' && (!isFallback);
     const drawLine = picon && geom === 'line' && !isFallback && !isCategory;
     const drawArea = picon && geom === 'area' && !isFallback && !isCategory;
     const drawRoute = picon && geom === 'route';
@@ -422,7 +407,7 @@ export function uiPresetIcon() {
 
     container = container.enter()
       .append('div')
-      .attr('class', `preset-icon-container ${_sizeClass}`)
+      .attr('class', 'preset-icon-container')
       .merge(container);
 
     container
@@ -453,12 +438,5 @@ export function uiPresetIcon() {
     return presetIcon;
   };
 
-
-  presetIcon.sizeClass = function(val) {
-    if (!arguments.length) return _sizeClass;
-    _sizeClass = val;
-    return presetIcon;
-  };
-
   return presetIcon;
 }