Load traffico stylesheet dynamically

index.html

@@ -6,7 +6,6 @@
         <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='dist/traffico/stylesheets/traffico.css'>
 
         <!-- mobile devices -->
         <meta name='viewport' content='initial-scale=1.0 maximum-scale=1.0'>

js/id/services/mapillary.js

@@ -9,6 +9,16 @@ iD.services.mapillary = function() {
         tileZoom = 14;
 
 
+    function loadSignStyles(context) {
+        d3.select('head').selectAll('#traffico')
+            .data([0])
+            .enter()
+            .append('link')
+            .attr('id', 'traffico')
+            .attr('rel', 'stylesheet')
+            .attr('href', context.assetPath() + 'traffico/stylesheets/traffico.css');
+    }
+
     function loadSignDefs(context) {
         if (!iD.services.mapillary.sign_defs) {
             iD.services.mapillary.sign_defs = {};
@@ -121,6 +131,7 @@ iD.services.mapillary = function() {
 
     mapillary.loadSigns = function(context, projection, dimensions) {
         var url = apibase + 'search/im/geojson/or?';
+        loadSignStyles(context);
         loadSignDefs(context);
         loadTiles('signs', url, projection, dimensions);
     };

test/spec/services/mapillary.js

@@ -3,7 +3,7 @@ describe('iD.services.mapillary', function() {
         context, server, mapillary;
 
     beforeEach(function() {
-        context = iD();
+        context = iD().assetPath('../dist/');
         context.projection.scale(667544.214430109);  // z14
 
         server = sinon.fakeServer.create();