Fix Mapillary sign placement on Chrome, Safari 10

.eslintrc

@@ -22,6 +22,7 @@
         "linebreak-style": ["error", "unix"],
         "no-caller": "error",
         "no-catch-shadow": "error",
+        "no-console": "warn",
         "no-div-regex": "error",
         "no-extend-native": "error",
         "no-extra-bind": "error",

css/map.css

@@ -1529,7 +1529,7 @@ text.gpx {
     pointer-events: none;
 }
 
-.layer-mapillary-signs .icon-sign body {
+.layer-mapillary-signs .icon-sign .icon-sign-body {
     min-width: 20px;
     height: 28px;
     width: 28px;
@@ -1538,14 +1538,15 @@ text.gpx {
     cursor: pointer; /* Opera */
     cursor: url(img/cursor-select-mapillary.png) 6 1, pointer; /* FF */
     z-index: 70;
+    overflow: visible;
 }
 
-.layer-mapillary-signs .icon-sign:hover body {
+.layer-mapillary-signs .icon-sign:hover .icon-sign-body {
     border: 2px solid rgba(255,198,0,0.8);
     z-index: 80;
  }
 
-.layer-mapillary-signs .icon-sign.selected body {
+.layer-mapillary-signs .icon-sign.selected .icon-sign-body {
     border: 2px solid rgba(255,0,0,0.8);
     z-index: 80;
  }
@@ -1553,7 +1554,6 @@ text.gpx {
 .layer-mapillary-signs .icon-sign .t {
     font-size: 28px;
     z-index: 70;
-    position: absolute;
 }
 
 .layer-mapillary-signs .icon-sign:hover .t,

modules/services/mapillary.js

@@ -218,7 +218,9 @@ export default {
 
     signsSupported: function() {
         var detected = utilDetect();
-        return (!(detected.ie || detected.browser.toLowerCase() === 'safari'));
+        if (detected.ie) return false;
+        if ((detected.browser.toLowerCase() === 'safari') && (parseFloat(detected.version) < 10)) return false;
+        return true;
     },
 
 

modules/svg/mapillary_signs.js

@@ -1,7 +1,6 @@
 import * as d3 from 'd3';
 import _ from 'lodash';
 import { utilGetDimensions, utilSetDimensions } from '../util/dimensions';
-import { svgPointTransform } from './point_transform';
 import { services } from '../services/index';
 
 
@@ -87,11 +86,13 @@ export function svgMapillarySigns(projection, context, dispatch) {
 
         enter
             .append('xhtml:body')
+            .attr('class', 'icon-sign-body')
             .html(mapillary.signHTML);
 
         signs
             .merge(enter)
-            .attr('transform', svgPointTransform(projection));
+            .attr('x', function(d) { return projection(d.loc)[0] - 16; })   // offset by -16px to
+            .attr('y', function(d) { return projection(d.loc)[1] - 16; });  // center signs on loc
     }
 
 
@@ -109,7 +110,6 @@ export function svgMapillarySigns(projection, context, dispatch) {
             .append('g')
             .attr('class', 'layer-mapillary-signs')
             .style('display', enabled ? 'block' : 'none')
-            .attr('transform', 'translate(-16, -16)')  // center signs on loc
             .merge(layer);
 
         if (enabled) {

test/spec/services/mapillary.js

@@ -362,11 +362,17 @@ describe('iD.serviceMapillary', function() {
             expect(mapillary.signsSupported()).to.be.false;
         });
 
-        it('returns false for Safari', function() {
+        it('returns false for Safari 9', function() {
             ua = 'Version/9.1 Safari/601';
             iD.Detect(true);  // force redetection
             expect(mapillary.signsSupported()).to.be.false;
         });
+
+        it('returns true for Safari 10', function() {
+            ua = 'Version/10.0 Safari/602';
+            iD.Detect(true);  // force redetection
+            expect(mapillary.signsSupported()).to.be.true;
+        });
     });
 
     describe('#signHTML', function() {