Add border to point icons in top bar

css/80_app.css

@@ -1098,6 +1098,12 @@ a.hide-toggle {
     flex: 0 0 auto;
 }
 
+.preset-icon-point-border path {
+    stroke: #333;
+    stroke-width: 1.5;
+    fill: transparent;
+}
+
 .preset-icon-line {
     margin: auto;
     position: absolute;
@@ -1161,14 +1167,19 @@ a.hide-toggle {
     position: absolute;
     margin: auto;
     top: 26%;
-    left: 26%;
+    left: 0;
+    right: 0;
     width: 48%;
     height: 48%;
 }
+.preset-icon-container.small .preset-icon.point-geom .icon {
+    width: 32%;
+    height: 32%;
+    top: 30%;
+}
 
 .preset-icon.framed .icon {
     top: 30%;
-    left: 30%;
     width: 40%;
     height: 40%;
 }
@@ -1178,14 +1189,12 @@ a.hide-toggle {
 
 .preset-icon-iD .icon {
     top: 0;
-    left: 0;
     height: 100%;
     width: 100%;
 }
 
 .preset-icon-iD.framed .icon {
     top: 13%;
-    left: 13%;
     width: 74%;
     height: 74%;
 }

modules/presets/preset.js

@@ -249,11 +249,12 @@ export function presetPreset(id, preset, fields, visible, rawPresets) {
                 }
             }
         }
-
-        for (var f in preset.fields) {
-            var field = preset.fields[f];
-            if (field.matchGeometry(geometry) && field.key && !tags[field.key] && field.default) {
-                tags[field.key] = field.default;
+        if (geometry) {
+            for (var f in preset.fields) {
+                var field = preset.fields[f];
+                if (field.matchGeometry(geometry) && field.key && !tags[field.key] && field.default) {
+                    tags[field.key] = field.default;
+                }
             }
         }
 

modules/ui/preset_icon.js

@@ -27,6 +27,20 @@ export function uiPresetIcon() {
             return 'maki-marker-stroked';
     }
 
+    function renderPointBorder(enter) {
+        var d = "M20,7 C14.4766667,7 10,10.207551 10,16.6166837 C10,23.0278061 20,33 20,33 C20,33 30,23.0278061 30,16.6166837 C30,10.207551 25.5233333,7 20,7 Z"
+        var w = 40, h = 40;
+        enter = enter
+            .append('svg')
+            .attr('class', 'preset-icon-fill preset-icon-point-border')
+            .attr('width', w)
+            .attr('height', h)
+            .attr('viewBox', '0 0 ' + w + ' ' + h);
+
+        enter.append('path')
+            .attr('d', d);
+    }
+
     function renderCircleFill(fillEnter) {
         var w = 60, h = 60, d = 40;
         fillEnter = fillEnter
@@ -132,7 +146,7 @@ export function uiPresetIcon() {
             .merge(container);
 
         var p = preset.apply(this, arguments);
-        var geom = geometry.apply(this, arguments);
+        var geom = geometry ? geometry.apply(this, arguments) : null;
         var picon = getIcon(p, geom);
         var isMaki = /^maki-/.test(picon);
         var isTemaki = /^temaki-/.test(picon);
@@ -151,6 +165,16 @@ export function uiPresetIcon() {
         }
         var tagClasses = svgTagClasses().getClassesString(tags, '');
 
+        var pointBorder = container.selectAll('.preset-icon-point-border')
+            .data(geom === 'point' && isSmall() ? [0] : []);
+
+        pointBorder.exit()
+            .remove();
+
+        var pointBorderEnter = pointBorder.enter();
+        renderPointBorder(pointBorderEnter);
+        pointBorder = pointBorderEnter.merge(pointBorder);
+
 
         var vertexFill = container.selectAll('.preset-icon-fill-vertex')
             .data(geom === 'vertex' ? [0] : []);
@@ -206,7 +230,7 @@ export function uiPresetIcon() {
             .merge(icon);
 
         icon
-            .attr('class', 'preset-icon ' + geom + '-geom')
+            .attr('class', 'preset-icon ' + (geom ? geom + '-geom' : ''))
             .classed('framed', isFramed)
             .classed('preset-icon-iD', isiDIcon);
 

modules/ui/search_add.js

@@ -88,31 +88,16 @@ export function uiSearchAdd(context) {
         context.features().on('change.search-add', updateForFeatureHiddenState);
     }
 
-    function supportedGeometry(preset) {
-        return preset.geometry.filter(function(geometry) {
-            return ['point', 'line', 'area'].indexOf(geometry) !== -1;
-        }).sort();
-    }
-    function defaultGeometry(item) {
-        if (item.geometry.filter) {
-            var supportedGeom = supportedGeometry(item);
-            if (supportedGeom.length === 1) {
-                return supportedGeom[0];
-            }
-        } else {
-            return item.geometry;
-        }
-        return 'point';
-    }
-
     function drawList(list, presets) {
 
         var collection = presets.collection.map(function(preset) {
             if (preset.members) {
                 return CategoryItem(preset);
             } else if (preset.visible()) {
-                var supportedGeom = supportedGeometry(preset);
-                if (supportedGeom.length === 1) {
+                var supportedGeometry = preset.geometry.filter(function(geometry) {
+                    return ['point', 'line', 'area'].indexOf(geometry) !== -1;
+                }).sort();
+                if (supportedGeometry.length === 1) {
                     return AddablePresetItem(preset, supportedGeom[0]);
                 }
                 return MultiGeometryPresetItem(preset, supportedGeom);
@@ -155,7 +140,7 @@ export function uiSearchAdd(context) {
         row.each(function(d) {
             d3_select(this).call(
                 uiPresetIcon()
-                    .geometry(d.geometry || defaultGeometry(d.preset))
+                    .geometry(d.geometry)
                     .preset(d.preset)
                     .sizeClass('small')
             );