adding a first traffic sign layer, rendering not working properly yet.

css/map.css

@@ -1549,6 +1549,44 @@ text.gpx {
 .layer-mapillary g path.viewfield {
     stroke-width: 0;
     fill-opacity: 0.6;
+
+/* Mapillary sign Layer */
+
+.node {
+    border: 1px solid green;
+    //background-color: white;
+}
+
+.node body {
+    min-width: 20px;
+}
+
+.layer-mapillary-signs {
+    pointer-events: none;
+}
+
+.layer-mapillary-signs g {
+    pointer-events: visible;
+    cursor: pointer; /* Opera */
+    cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
+}
+
+.layer-mapillary-signs g * {
+    stroke-width: 2;
+    stroke: red;
+    fill: red;
+}
+
+.layer-mapillary-signs g:hover * {
+    stroke-width: 2;
+    stroke: red;
+    fill: red;
+}
+
+.layer-mapillary-signs g.selected * {
+    stroke-width: 4;
+    stroke: red;
+    fill: red;
 }
 
 /* Modes */

data/core.yaml

@@ -418,6 +418,10 @@ en:
     tooltip: "Street-level photos from Mapillary"
     title: "Photo Overlay (Mapillary)"
     view_on_mapillary: "View this image on Mapillary"
+  mapillary_signs:
+        tooltip: "Traffic signs from Mapillary"
+        title: "Traffic sign Overlay (Mapillary)"
+        view_on_mapillary: "View this image on Mapillary"
   help:
     title: "Help"
     help: |

dist/locales/en.json

@@ -505,6 +505,11 @@
         "title": "Photo Overlay (Mapillary)",
         "view_on_mapillary": "View this image on Mapillary"
     },
+    "mapillary_signs": {
+        "tooltip": "Traffic signs from Mapillary",
+        "title": "Traffic sign Overlay (Mapillary)",
+        "view_on_mapillary": "View this image on Mapillary"
+    },
     "help": {
         "title": "Help",
         "help": "# Help\n\nThis is an editor for [OpenStreetMap](http://www.openstreetmap.org/), the\nfree and editable map of the world. You can use it to add and update\ndata in your area, making an open-source and open-data map of the world\nbetter for everyone.\n\nEdits that you make on this map will be visible to everyone who uses\nOpenStreetMap. In order to make an edit, you'll need to\n[log in](https://www.openstreetmap.org/login).\n\nThe [iD editor](http://ideditor.com/) is a collaborative project with [source\ncode available on GitHub](https://github.com/openstreetmap/iD).\n",

index.html

@@ -6,6 +6,7 @@
         <link rel='stylesheet' href='css/reset.css'>
         <link rel='stylesheet' href='css/map.css'>
         <link rel='stylesheet' href='css/app.css'>
+        <link rel='stylesheet' href='css/traffico/stylesheets/traffico.css'>
 
         <!-- mobile devices -->
         <meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>
@@ -57,8 +58,10 @@
         <script src='js/id/renderer/gpx_layer.js'></script>
         <script src='js/id/renderer/tile_layer.js'></script>
         <script src='js/id/renderer/map.js'></script>
+        <script src='js/id/renderer/mapillary_trafficsign_layer.js'></script>
         <script src='js/id/renderer/mapillary_layer.js'></script>
 
+
         <script src="js/id/svg.js"></script>
         <script src="js/id/svg/areas.js"></script>
         <script src="js/id/svg/defs.js"></script>

js/id/renderer/background.js

@@ -5,6 +5,7 @@ iD.Background = function(context) {
         gpxLayer = iD.GpxLayer(context, dispatch)
             .projection(context.projection),
         mapillaryLayer = iD.MapillaryLayer(context),
+        mapillarySignsLayer = iD.MapillarySignsLayer(context),
         overlayLayers = [];
 
     var backgroundSources;
@@ -92,6 +93,13 @@ iD.Background = function(context) {
             .attr('class', 'layer-layer layer-mapillary');
 
         mapillary.call(mapillaryLayer);
+        var mapillary_signs = selection.selectAll('.layer-mapillary-signs')
+            .data([0]);
+
+        mapillary_signs.enter().insert('div')
+            .attr('class', 'layer-layer layer-mapillary-signs');
+
+        mapillary_signs.call(mapillarySignsLayer);
     }
 
     background.sources = function(extent) {
@@ -104,6 +112,7 @@ iD.Background = function(context) {
         baseLayer.dimensions(_);
         gpxLayer.dimensions(_);
         mapillaryLayer.dimensions(_);
+        mapillarySignsLayer.dimensions(_);
 
         overlayLayers.forEach(function(layer) {
             layer.dimensions(_);
@@ -176,11 +185,19 @@ iD.Background = function(context) {
         return mapillaryLayer.enable();
     };
 
+    background.showsMapillarySignsLayer = function() {
+        return mapillarySignsLayer.enable();
+    };
+
     background.toggleMapillaryLayer = function() {
         mapillaryLayer.enable(!mapillaryLayer.enable());
         dispatch.change();
     };
 
+    background.toggleMapillarySignsLayer = function() {
+        mapillarySignsLayer.enable(!mapillarySignsLayer.enable());
+        dispatch.change();
+    };
     background.showsLayer = function(d) {
         return d === baseLayer.source() ||
             (d.id === 'custom' && baseLayer.source().id === 'custom') ||

js/id/ui/map_data.js

@@ -46,6 +46,10 @@ iD.ui.MapData = function(context) {
             context.background().toggleMapillaryLayer();
             update();
         }
+        function clickMapillarySigns() {
+            context.background().toggleMapillarySignsLayer();
+            update();
+        }
 
         function drawList(selection, data, type, name, change, active) {
             var items = selection.selectAll('li')
@@ -99,7 +103,8 @@ iD.ui.MapData = function(context) {
 
             var hasGpx = context.background().hasGpxLayer(),
                 showsGpx = context.background().showsGpxLayer(),
-                showsMapillary = context.background().showsMapillaryLayer();
+                showsMapillary = context.background().showsMapillaryLayer(),
+                showsMapillarySigns = context.background().showsMapillarySignsLayer();
 
             gpxLayerItem
                 .classed('active', showsGpx)
@@ -111,6 +116,11 @@ iD.ui.MapData = function(context) {
                 .classed('active', showsMapillary)
                 .selectAll('input')
                 .property('checked', showsMapillary);
+
+            mapillarySignsLayerItem
+                .classed('active', showsMapillarySigns)
+                .selectAll('input')
+                .property('checked', showsMapillarySigns);
         }
 
         function hidePanel() { setVisible(false); }
@@ -210,7 +220,24 @@ iD.ui.MapData = function(context) {
         label.append('span')
             .text(t('mapillary.title'));
 
-        // gpx
+        // mapillary signs
+        var mapillarySignsLayerItem = layerContainer.append('ul')
+            .attr('class', 'layer-list')
+            .append('li');
+
+        var label_signs = mapillarySignsLayerItem.append('label')
+            .call(bootstrap.tooltip()
+                .title(t('mapillary_signs.tooltip'))
+                .placement('top'));
+
+        label_signs.append('input')
+            .attr('type', 'checkbox')
+            .on('change', clickMapillarySigns);
+
+        label_signs.append('span')
+            .text(t('mapillary_signs.title'));
+
+         //gpx
         var gpxLayerItem = layerContainer.append('ul')
             .style('display', iD.detect().filedrop ? 'block' : 'none')
             .attr('class', 'layer-list')