Make map pointer targets larger for pen and touch input (close #7643)

css/20_map.css

@@ -65,6 +65,17 @@
     stroke-linejoin: round;
 }
 
+.ideditor[pointer='pen'] .way.target {
+    stroke-width: 18;
+}
+.ideditor[pointer='touch'] .way.target {
+    stroke-width: 32;
+}
+.ideditor[pointer='touch'] .node.vertex.target {
+    pointer-events: painted;
+    stroke: currentColor;
+    stroke-width: 10;
+}
 
 /* `.target-nope` objects are explicitly forbidden to join to */
 .surface:not(.nope-disabled) .node.target.target-nope,

modules/ui/init.js

@@ -75,6 +75,20 @@ export function uiInit(context) {
                 d3_event.preventDefault();
             });
 
+        if ('PointerEvent' in window) {
+            d3_select(window)
+                .on('pointerdown.ui pointerup.ui', function() {
+                    var pointerType =  d3_event.pointerType || 'mouse';
+                    if (container.attr('pointer') !== pointerType) {
+                        container
+                            .attr('pointer', pointerType);
+                    }
+                }, true);
+        } else {
+            container
+                .attr('pointer', 'mouse');
+        }
+
         container
             .attr('dir', localizer.textDirection());