diff --git a/css/map.css b/css/map.css
index 3e3458793..9e72ab0cf 100644
--- a/css/map.css
+++ b/css/map.css
@@ -1514,74 +1514,73 @@ text.gpx {
     fill: #FF26D4;
 }
 
-/* Mapillary Layer */
+/* Mapillary Image Layer */
 
-.layer-mapillary {
+.layer-mapillary-images {
     pointer-events: none;
 }
 
-.layer-mapillary g {
+.layer-mapillary-images g {
     pointer-events: visible;
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
 }
 
-.layer-mapillary g * {
+.layer-mapillary-images g * {
     stroke-width: 1;
     stroke: #444;
     fill: #ffc600;
 }
 
-.layer-mapillary g:hover * {
+.layer-mapillary-images g:hover * {
     stroke-width: 1;
     stroke: #333;
     fill: #ff9900;
 }
 
-.layer-mapillary g.selected  * {
+.layer-mapillary-images g.selected  * {
     stroke-width: 2;
     stroke: #222;
     fill: #ff5800;
 }
 
-.layer-mapillary g:hover path.viewfield,
-.layer-mapillary g.selected path.viewfield,
-.layer-mapillary g path.viewfield {
+.layer-mapillary-images g:hover path.viewfield,
+.layer-mapillary-images g.selected path.viewfield,
+.layer-mapillary-images g path.viewfield {
     stroke-width: 0;
     fill-opacity: 0.6;
-
-/* Mapillary sign Layer */
-
-.t {
-    font-size: 28px;
-    z-index: 100;
 }
 
-.node body {
-    min-width: 30px;
-}
+/* Mapillary Sign Layer */
 
 .layer-mapillary-signs {
     pointer-events: none;
 }
 
 .layer-mapillary-signs body {
+    min-width: 30px;
     pointer-events: visible;
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
 }
 
+.layer-mapillary-signs .icon-sign {
+    height: 30px;
+    width: 30px;
+}
 
 .layer-mapillary-signs body:hover {
     border: 1px solid red;
 }
 
-.layer-mapillary-signs .node.selected {
+.layer-mapillary-signs .icon-sign.selected {
     stroke-width: 4;
     border: 1px solid yellow;
 }
 
 .layer-mapillary-signs .t {
+    font-size: 28px;
+    z-index: 100;
     position: absolute;
 }
 
diff --git a/data/core.yaml b/data/core.yaml
index 7440c3e5b..dbe4f06bf 100644
--- a/data/core.yaml
+++ b/data/core.yaml
@@ -414,14 +414,14 @@ en:
     drag_drop: "Drag and drop a .gpx file on the page, or click the button to the right to browse"
     zoom: "Zoom to GPX track"
     browse: "Browse for a .gpx file"
-  mapillary:
+  mapillary_images:
     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"
+    tooltip: "Traffic signs from Mapillary"
+    title: "Traffic Sign Overlay (Mapillary)"
+    view_on_mapillary: "View this image on Mapillary"
   help:
     title: "Help"
     help: |
diff --git a/dist/locales/en.json b/dist/locales/en.json
index b8e9edc46..47161545e 100644
--- a/dist/locales/en.json
+++ b/dist/locales/en.json
@@ -500,14 +500,14 @@
         "zoom": "Zoom to GPX track",
         "browse": "Browse for a .gpx file"
     },
-    "mapillary": {
+    "mapillary_images": {
         "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)",
+        "title": "Traffic Sign Overlay (Mapillary)",
         "view_on_mapillary": "View this image on Mapillary"
     },
     "help": {
diff --git a/index.html b/index.html
index 83009e4c9..3ba91340d 100644
--- a/index.html
+++ b/index.html
@@ -59,9 +59,8 @@
         <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/renderer/mapillary_image_layer.js'></script>
+        <script src='js/id/renderer/mapillary_sign_layer.js'></script>
 
         <script src="js/id/svg.js"></script>
         <script src="js/id/svg/areas.js"></script>
diff --git a/js/id/renderer/background.js b/js/id/renderer/background.js
index bbd2e69ed..b5fc14135 100644
--- a/js/id/renderer/background.js
+++ b/js/id/renderer/background.js
@@ -4,8 +4,8 @@ iD.Background = function(context) {
             .projection(context.projection),
         gpxLayer = iD.GpxLayer(context, dispatch)
             .projection(context.projection),
-        mapillaryLayer = iD.MapillaryLayer(context),
-        mapillarySignsLayer = iD.MapillarySignsLayer(context),
+        mapillaryImageLayer = iD.MapillaryImageLayer(context),
+        mapillarySignLayer = iD.MapillarySignLayer(context),
         overlayLayers = [];
 
     var backgroundSources;
@@ -86,20 +86,21 @@ iD.Background = function(context) {
 
         gpx.call(gpxLayer);
 
-        var mapillary = selection.selectAll('.layer-mapillary')
+        var mapillaryImages = selection.selectAll('.layer-mapillary-images')
             .data([0]);
 
-        mapillary.enter().insert('div')
-            .attr('class', 'layer-layer layer-mapillary');
+        mapillaryImages.enter().insert('div')
+            .attr('class', 'layer-layer layer-mapillary-images');
 
-        mapillary.call(mapillaryLayer);
-        var mapillary_signs = selection.selectAll('.layer-mapillary-signs')
+        mapillaryImages.call(mapillaryImageLayer);
+
+        var mapillarySigns = selection.selectAll('.layer-mapillary-signs')
             .data([0]);
 
-        mapillary_signs.enter().insert('div')
+        mapillarySigns.enter().insert('div')
             .attr('class', 'layer-layer layer-mapillary-signs');
 
-        mapillary_signs.call(mapillarySignsLayer);
+        mapillarySigns.call(mapillarySignLayer);
     }
 
     background.sources = function(extent) {
@@ -111,8 +112,8 @@ iD.Background = function(context) {
     background.dimensions = function(_) {
         baseLayer.dimensions(_);
         gpxLayer.dimensions(_);
-        mapillaryLayer.dimensions(_);
-        mapillarySignsLayer.dimensions(_);
+        mapillaryImageLayer.dimensions(_);
+        mapillarySignLayer.dimensions(_);
 
         overlayLayers.forEach(function(layer) {
             layer.dimensions(_);
@@ -181,21 +182,21 @@ iD.Background = function(context) {
         dispatch.change();
     };
 
-    background.showsMapillaryLayer = function() {
-        return mapillaryLayer.enable();
+    background.showsMapillaryImageLayer = function() {
+        return mapillaryImageLayer.enable();
     };
 
-    background.showsMapillarySignsLayer = function() {
-        return mapillarySignsLayer.enable();
+    background.showsMapillarySignLayer = function() {
+        return mapillarySignLayer.enable();
     };
 
-    background.toggleMapillaryLayer = function() {
-        mapillaryLayer.enable(!mapillaryLayer.enable());
+    background.toggleMapillaryImageLayer = function() {
+        mapillaryImageLayer.enable(!mapillaryImageLayer.enable());
         dispatch.change();
     };
 
-    background.toggleMapillarySignsLayer = function() {
-        mapillarySignsLayer.enable(!mapillarySignsLayer.enable());
+    background.toggleMapillarySignLayer = function() {
+        mapillarySignLayer.enable(!mapillarySignLayer.enable());
         dispatch.change();
     };
     background.showsLayer = function(d) {
diff --git a/js/id/renderer/mapillary_layer.js b/js/id/renderer/mapillary_image_layer.js
similarity index 83%
rename from js/id/renderer/mapillary_layer.js
rename to js/id/renderer/mapillary_image_layer.js
index 05b6e4ed7..f00d7ee14 100644
--- a/js/id/renderer/mapillary_layer.js
+++ b/js/id/renderer/mapillary_image_layer.js
@@ -1,5 +1,10 @@
-iD.MapillaryLayer = function (context) {
-    var enable = false,
+iD.MapillaryImageLayer = function (context) {
+    var roundedProjection = iD.svg.RoundProjection(context.projection),
+        urlSearch = 'https://a.mapillary.com/v2/search/s/geojson',
+        urlImage = 'https://www.mapillary.com/map/im/',
+        urlThumb = 'https://d1cuyjsrcm0gby.cloudfront.net/',
+        clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzoxNjQ3MDY4ZTUxY2QzNGI2',
+        enable = false,
         currentImage,
         svg, div, request;
 
@@ -13,10 +18,10 @@ iD.MapillaryLayer = function (context) {
             .classed('temp', image !== currentImage);
 
         div.selectAll('img')
-            .attr('src', 'https://d1cuyjsrcm0gby.cloudfront.net/' + image.key + '/thumb-320.jpg');
+            .attr('src', urlThumb + image.key + '/thumb-320.jpg');
 
         div.selectAll('a')
-            .attr('href', 'https://www.mapillary.com/map/im/' + image.key);
+            .attr('href', urlImage + image.key);
     }
 
     function hide() {
@@ -28,9 +33,9 @@ iD.MapillaryLayer = function (context) {
         div.classed('hidden', true);
     }
 
-    function transform(image) {
-        var t = 'translate(' + context.projection(image.loc) + ')';
-        if (image.ca) t += 'rotate(' + image.ca + ',0,0)';
+    function transform(d) {
+        var t = iD.svg.PointTransform(roundedProjection)(d);
+        if (d.ca) t += ' rotate(' + Math.floor(d.ca) + ',0,0)';
         return t;
     }
 
@@ -80,7 +85,7 @@ iD.MapillaryLayer = function (context) {
             .attr('target', '_blank')
             .call(iD.svg.Icon('#icon-out-link', 'inline'))
             .append('span')
-            .text(t('mapillary.view_on_mapillary'));
+            .text(t('mapillary_images.view_on_mapillary'));
 
         if (!enable) {
             hide();
@@ -100,7 +105,7 @@ iD.MapillaryLayer = function (context) {
         if (request)
             request.abort();
 
-        request = d3.json('https://a.mapillary.com/v2/search/s/geojson?client_id=NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzoxNjQ3MDY4ZTUxY2QzNGI2&min_lat=' +
+        request = d3.json(urlSearch + '?client_id=' + clientId + '&min_lat=' +
             extent[0][1] + '&max_lat=' + extent[1][1] + '&min_lon=' +
             extent[0][0] + '&max_lon=' + extent[1][0] + '&max_results=100&geojson=true',
             function (error, data) {
diff --git a/js/id/renderer/mapillary_trafficsign_layer.js b/js/id/renderer/mapillary_sign_layer.js
similarity index 70%
rename from js/id/renderer/mapillary_trafficsign_layer.js
rename to js/id/renderer/mapillary_sign_layer.js
index c7565cf03..b19e05927 100644
--- a/js/id/renderer/mapillary_trafficsign_layer.js
+++ b/js/id/renderer/mapillary_sign_layer.js
@@ -1,17 +1,21 @@
-iD.MapillarySignsLayer = function(context) {
-    var enable = false,
+iD.MapillarySignLayer = function(context) {
+    var roundedProjection = iD.svg.RoundProjection(context.projection),
+        urlSearch = 'https://a.mapillary.com/v2/search/im/geojson/or',
+        urlImage = 'http://mapillary.com/map/im/',
+        urlThumb = 'https://d1cuyjsrcm0gby.cloudfront.net/',
+        clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzoxNjQ3MDY4ZTUxY2QzNGI2',
+        enable = false,
         initiated = false,
         currentImage,
         svg, image_preview_div, request, signs_defs;
 
     request = d3.json('css/traffico-release-0.1.5/global-patched.json', function(error, data) {
-        // console.error(arguments);
         if (error) return;
         signs_defs = data;
     });
 
     function show(image) {
-        svg.selectAll('.node')
+        svg.selectAll('.icon-sign')
             .classed('selected', function(d) {
                 return currentImage && d.key === currentImage.key;
             });
@@ -20,24 +24,19 @@ iD.MapillarySignsLayer = function(context) {
             .classed('temp', image !== currentImage);
 
         image_preview_div.selectAll('img')
-            .attr('src', 'https://d1cuyjsrcm0gby.cloudfront.net/' + image.key + '/thumb-320.jpg');
+            .attr('src', urlThumb + image.key + '/thumb-320.jpg');
 
         image_preview_div.selectAll('a')
-            .attr('href', 'http://mapillary.com/map/im/' + image.key);
+            .attr('href', urlImage + image.key);
     }
 
     function hide() {
         currentImage = undefined;
-        svg.selectAll('.node')
+        svg.selectAll('.icon-sign')
             .classed('selected', false);
         image_preview_div.classed('hidden', true);
     }
 
-    function transform(image) {
-        var t = 'translate(' + context.projection(image.loc) + ')';
-        return t;
-    }
-
     function render(selection) {
         svg = selection.selectAll('svg')
             .data([0]);
@@ -67,18 +66,19 @@ iD.MapillarySignsLayer = function(context) {
             .attr('class', 'icon icon-pre-text out-link');
 
         link.append('span')
-            .text(t('mapillary.view_on_mapillary'));
+            .text(t('mapillary_signs.view_on_mapillary'));
 
         if (!enable) {
             hide();
 
-            svg.selectAll('.node')
+            svg.selectAll('.icon-sign')
                 .remove();
 
             return;
         }
 
-        svg.selectAll('.node')
+        // hack
+        svg.selectAll('.icon-sign')
             .remove();
 
         var extent = context.map().extent();
@@ -86,13 +86,11 @@ iD.MapillarySignsLayer = function(context) {
         if (request)
             request.abort();
 
-        request = d3.json('https://a.mapillary.com/v2/search/im/geojson/or?' +
-            'client_id=NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzoxNjQ3MDY4ZTUxY2QzNGI2&min_lat=' +
+        request = d3.json(urlSearch + '?client_id=' + clientId + '&min_lat=' +
             extent[0][1] + '&max_lat=' + extent[1][1] + '&min_lon=' +
             extent[0][0] + '&max_lon=' + extent[1][0] + '&limit=100&geojson=true',
             function(error, data) {
                 if (error) return;
-                // console.log(data);
                 var images = [];
 
                 for (var i = 0; i < data.features.length; i++) {
@@ -106,37 +104,32 @@ iD.MapillarySignsLayer = function(context) {
                 }
 
                 var foreignObjects = svg.selectAll('foreignObject')
-                    .data(images, function(d) {
-                        return d.key;
-                    });
+                    .data(images, function(d) { return d.key; });
 
                 var enter = foreignObjects.enter();
 
                 enter.append('foreignObject')
-                    .attr('x', '0')
-                    .attr('y', '0')
-                    .attr('width', '30px')
-                    .attr('height', '30px')
-                    .attr('class', 'node')
+                    .attr('class', 'icon-sign')
                     .append('xhtml:body')
                     .html(function(d) {
                         var sign_html = signs_defs[d.signs[0].type];
                         return sign_html;
                     });
 
-                foreignObjects.on('click', function(data) {
-                    if (!data) {
-                        d3.event.preventDefault();
-                        return;
-                    }
-                    var image = data;
-                    if (currentImage === image) {
-                        hide();
-                    } else {
-                        currentImage = image;
-                        show(image);
-                    }
-                })
+                foreignObjects
+                    .on('click', function(data) {
+                        if (!data) {
+                            d3.event.preventDefault();
+                            return;
+                        }
+                        var image = data;
+                        if (currentImage === image) {
+                            hide();
+                        } else {
+                            currentImage = image;
+                            show(image);
+                        }
+                    })
                     .on('mouseover', function(data) {
                         if (!data) {
                             d3.event.preventDefault();
@@ -156,14 +149,14 @@ iD.MapillarySignsLayer = function(context) {
                         }
                     });
 
-                foreignObjects.attr('transform', transform);
+                foreignObjects
+                    .attr('transform', iD.svg.PointTransform(roundedProjection));
 
                 foreignObjects.exit()
                     .remove();
-                // console.log(images);
+
                 if(!initiated) {
                     initiated = true;
-                    //context.map().zoomOut();
                 }
             });
     }
diff --git a/js/id/ui/map_data.js b/js/id/ui/map_data.js
index d35283eb0..b232ffb79 100644
--- a/js/id/ui/map_data.js
+++ b/js/id/ui/map_data.js
@@ -42,12 +42,12 @@ iD.ui.MapData = function(context) {
             update();
         }
 
-        function clickMapillary() {
-            context.background().toggleMapillaryLayer();
+        function clickMapillaryImages() {
+            context.background().toggleMapillaryImageLayer();
             update();
         }
         function clickMapillarySigns() {
-            context.background().toggleMapillarySignsLayer();
+            context.background().toggleMapillarySignLayer();
             update();
         }
 
@@ -103,8 +103,8 @@ iD.ui.MapData = function(context) {
 
             var hasGpx = context.background().hasGpxLayer(),
                 showsGpx = context.background().showsGpxLayer(),
-                showsMapillary = context.background().showsMapillaryLayer(),
-                showsMapillarySigns = context.background().showsMapillarySignsLayer();
+                showsMapillaryImages = context.background().showsMapillaryImageLayer(),
+                showsMapillarySigns = context.background().showsMapillarySignLayer();
 
             gpxLayerItem
                 .classed('active', showsGpx)
@@ -112,12 +112,12 @@ iD.ui.MapData = function(context) {
                 .property('disabled', !hasGpx)
                 .property('checked', showsGpx);
 
-            mapillaryLayerItem
-                .classed('active', showsMapillary)
+            mapillaryImageLayerItem
+                .classed('active', showsMapillaryImages)
                 .selectAll('input')
-                .property('checked', showsMapillary);
+                .property('checked', showsMapillaryImages);
 
-            mapillarySignsLayerItem
+            mapillarySignLayerItem
                 .classed('active', showsMapillarySigns)
                 .selectAll('input')
                 .property('checked', showsMapillarySigns);
@@ -203,41 +203,44 @@ iD.ui.MapData = function(context) {
             .attr('class', 'filters')
             .style('display', 'block');
 
-        // mapillary
-        var mapillaryLayerItem = layerContainer.append('ul')
+
+        // Mapillary Image Layer
+        var mapillaryImageLayerItem = layerContainer.append('ul')
             .attr('class', 'layer-list')
             .append('li');
 
-        var label = mapillaryLayerItem.append('label')
+        var labelImage = mapillaryImageLayerItem.append('label')
             .call(bootstrap.tooltip()
-                .title(t('mapillary.tooltip'))
+                .title(t('mapillary_images.tooltip'))
                 .placement('top'));
 
-        label.append('input')
+        labelImage.append('input')
             .attr('type', 'checkbox')
-            .on('change', clickMapillary);
+            .on('change', clickMapillaryImages);
 
-        label.append('span')
-            .text(t('mapillary.title'));
+        labelImage.append('span')
+            .text(t('mapillary_images.title'));
 
-        // mapillary signs
-        var mapillarySignsLayerItem = layerContainer.append('ul')
+
+        // Mapillary Sign Layer
+        var mapillarySignLayerItem = layerContainer.append('ul')
             .attr('class', 'layer-list')
             .append('li');
 
-        var label_signs = mapillarySignsLayerItem.append('label')
+        var labelSigns = mapillarySignLayerItem.append('label')
             .call(bootstrap.tooltip()
                 .title(t('mapillary_signs.tooltip'))
                 .placement('top'));
 
-        label_signs.append('input')
+        labelSigns.append('input')
             .attr('type', 'checkbox')
             .on('change', clickMapillarySigns);
 
-        label_signs.append('span')
+        labelSigns.append('span')
             .text(t('mapillary_signs.title'));
 
-         //gpx
+
+        // GPX Layer
         var gpxLayerItem = layerContainer.append('ul')
             .style('display', iD.detect().filedrop ? 'block' : 'none')
             .attr('class', 'layer-list')
@@ -271,17 +274,17 @@ iD.ui.MapData = function(context) {
             })
             .call(iD.svg.Icon('#icon-geolocate'));
 
-        label = gpxLayerItem.append('label')
+        var labelGpx = gpxLayerItem.append('label')
             .call(bootstrap.tooltip()
                 .title(t('gpx.drag_drop'))
                 .placement('top'));
 
-        label.append('input')
+        labelGpx.append('input')
             .attr('type', 'checkbox')
             .property('disabled', true)
             .on('change', clickGpx);
 
-        label.append('span')
+        labelGpx.append('span')
             .text(t('gpx.local_layer'));
 
 
diff --git a/test/index.html b/test/index.html
index 04f3c5ce4..bc932e87a 100644
--- a/test/index.html
+++ b/test/index.html
@@ -56,8 +56,8 @@
     <script src='../js/id/renderer/map.js'></script>
     <script src='../js/id/renderer/gpx_layer.js'></script>
     <script src='../js/id/renderer/tile_layer.js'></script>
-    <script src='../js/id/renderer/mapillary_layer.js'></script>
-    <script src='../js/id/renderer/mapillary_trafficsign_layer.js'></script>
+    <script src='../js/id/renderer/mapillary_image_layer.js'></script>
+    <script src='../js/id/renderer/mapillary_sign_layer.js'></script>
 
     <script src="../js/id/svg.js"></script>
     <script src="../js/id/svg/areas.js"></script>