initial wireframe style (key 'w')

(also fix gpx layer, now on top of data, to not steal pointer events)

css/map.css

@@ -1128,16 +1128,18 @@ g.turn circle {
 }
 
 /* GPX Paths */
+div.layer-gpx {
+    pointer-events: none;
+}
+
 path.gpx {
     stroke: #FF26D4;
     stroke-width: 2;
     fill: none;
-    pointer-events: none;
 }
 
-/* GPS Labels */
 text.gpx {
-    fill:#FF26D4;
+    fill: #FF26D4;
 }
 
 /* Mapillary Layer */
@@ -1193,3 +1195,20 @@ text.gpx {
 .mode-drag-node .area.fill {
     pointer-events: none;
 }
+
+
+/* Styles */
+.style-wireframe path.stroke {
+    stroke-width: 1.5;
+    stroke-opacity: 0.5;
+    stroke-dasharray: none;
+    fill: none;
+}
+
+.style-wireframe .point,
+.style-wireframe path.shadow,
+.style-wireframe path.casing,
+.style-wireframe path.fill,
+.style-wireframe path.oneway {
+    display: none;
+}

js/id/ui/map_data.js

@@ -241,8 +241,17 @@ iD.ui.MapData = function(context) {
 
         update();
 
-        var keybinding = d3.keybinding('features');
-        keybinding.on(key, toggle);
+        var keybinding = d3.keybinding('features')
+            .on(key, toggle)
+            .on('w', function toggleWireframe() {
+                if (d3.event) d3.event.preventDefault();
+                var surface = context.surface(),
+                    wf = surface.classed('style-wireframe');
+
+                surface
+                    .classed('style-wireframe', !wf);
+
+            });
 
         d3.select(document)
             .call(keybinding);