added simple keepRight button under photoItems

data/core.yaml

@@ -643,6 +643,9 @@ en:
     out: Zoom out
   cannot_zoom: "Cannot zoom out further in current mode."
   full_screen: Toggle Full Screen
+  keepRight:
+    tooltip: Q/A data from keepright.at
+    title: Keep Right
   streetside:
     tooltip: "Streetside photos from Microsoft"
     title: "Photo Overlay (Bing Streetside)"

dist/locales/en.json

@@ -782,6 +782,10 @@
         },
         "cannot_zoom": "Cannot zoom out further in current mode.",
         "full_screen": "Toggle Full Screen",
+        "keepRight": {
+            "tooltip": "Q/A data from keepright.at",
+            "title": "Keep Right"
+        },
         "streetside": {
             "tooltip": "Streetside photos from Microsoft",
             "title": "Photo Overlay (Bing Streetside)",
@@ -8730,4 +8734,4 @@
             }
         }
     }
-}
+}

modules/svg/keepRight.js

@@ -0,0 +1,175 @@
+import _some from 'lodash-es/some';
+import _throttle from 'lodash-es/throttle';
+import { select as d3_select } from 'd3-selection';
+import { svgPointTransform } from './index';
+import { services } from '../services';
+
+
+export function svgKeepRight(projection, context, dispatch) {
+    var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000);
+    var minZoom = 12;
+    var layer = d3_select(null);
+    var _keepRight;
+
+
+    function init() {
+        if (svgKeepRight.initialized) return;  // run once
+        svgKeepRight.enabled = false;
+        svgKeepRight.initialized = true;
+    }
+
+
+    function getService() {
+        if (services.mapillary && !_keepRight) {
+            _keepRight = services.mapillary;
+            _keepRight.event.on('loadedSigns', throttledRedraw);
+        } else if (!services.mapillary && _keepRight) {
+            _keepRight = null;
+        }
+        return _keepRight;
+    }
+
+
+    function showLayer() {
+        var service = getService();
+        if (!service) return;
+
+        service.loadViewer(context);
+        editOn();
+    }
+
+
+    function hideLayer() {
+        throttledRedraw.cancel();
+        editOff();
+    }
+
+
+    function editOn() {
+        layer.style('display', 'block');
+    }
+
+
+    function editOff() {
+        layer.selectAll('.icon-sign').remove();
+        layer.style('display', 'none');
+    }
+
+
+    function click(d) {
+        var service = getService();
+        if (!service) return;
+
+        context.map().centerEase(d.loc);
+
+        var selected = service.getSelectedImage();
+        var selectedImageKey = selected && selected.key;
+        var imageKey;
+
+        // Pick one of the images the sign was detected in,
+        // preference given to an image already selected.
+        d.detections.forEach(function(detection) {
+            if (!imageKey || selectedImageKey === detection.image_key) {
+                imageKey = detection.image_key;
+            }
+        });
+
+        service
+            .selectImage(null, imageKey)
+            .updateViewer(imageKey, context)
+            .showViewer();
+    }
+
+
+    function update() {
+        var service = getService();
+        var data = (service ? service.signs(projection) : []);
+        var viewer = d3_select('#photoviewer');
+        var selected = viewer.empty() ? undefined : viewer.datum();
+        var selectedImageKey = selected && selected.key;
+        var transform = svgPointTransform(projection);
+
+        var signs = layer.selectAll('.icon-sign')
+            .data(data, function(d) { return d.key; });
+
+        // exit
+        signs.exit()
+            .remove();
+
+        // enter
+        var enter = signs.enter()
+            .append('use')
+            .attr('class', 'icon-sign')
+            .attr('width', '24px')
+            .attr('height', '24px')
+            .attr('x', '-12px')
+            .attr('y', '-12px')
+            .attr('xlink:href', function(d) { return '#' + d.value; })
+            .classed('selected', function(d) {
+                return _some(d.detections, function(detection) {
+                    return detection.image_key === selectedImageKey;
+                });
+            })
+            .on('click', click);
+
+        // update
+        signs
+            .merge(enter)
+            .sort(function(a, b) {
+                return (a === selected) ? 1
+                    : (b === selected) ? -1
+                    : b.loc[1] - a.loc[1];  // sort Y
+            })
+            .attr('transform', transform);
+    }
+
+
+    function drawKeepRight(selection) {
+        var enabled = svgKeepRight.enabled;
+        var service = getService();
+
+        layer = selection.selectAll('.layer-keepRight')
+            .data(service ? [0] : []);
+
+        layer.exit()
+            .remove();
+
+        layer = layer.enter()
+            .append('g')
+            .attr('class', 'layer-keepRight')
+            .style('display', enabled ? 'block' : 'none')
+            .merge(layer);
+
+        if (enabled) {
+            if (service && ~~context.map().zoom() >= minZoom) {
+                editOn();
+                update();
+                service.loadSigns(context, projection);
+            } else {
+                editOff();
+            }
+        }
+    }
+
+
+    drawKeepRight.enabled = function(_) {
+        if (!arguments.length) return svgKeepRight.enabled;
+        svgKeepRight.enabled = _;
+        if (svgKeepRight.enabled) {
+            showLayer();
+        } else {
+            hideLayer();
+        }
+        dispatch.call('change');
+        return this;
+    };
+
+
+    drawKeepRight.supported = function() {
+        return !!getService();
+    };
+
+
+    init();
+    return drawKeepRight;
+}

modules/svg/layers.js

@@ -9,7 +9,12 @@ import { select as d3_select } from 'd3-selection';
 
 import { svgData } from './data';
 import { svgDebug } from './debug';
+<<<<<<< HEAD
 import { svgGeolocate } from './geolocate';
+=======
+import { svgGpx } from './gpx';
+import { svgKeepRight } from './keepRight';
+>>>>>>> added simple keepRight button under photoItems
 import { svgStreetside } from './streetside';
 import { svgMapillaryImages } from './mapillary_images';
 import { svgMapillarySigns } from './mapillary_signs';
@@ -28,6 +33,7 @@ export function svgLayers(projection, context) {
         { id: 'osm', layer: svgOsm(projection, context, dispatch) },
         { id: 'notes', layer: svgNotes(projection, context, dispatch) },
         { id: 'data', layer: svgData(projection, context, dispatch) },
+        { id: 'keepRight', layer: svgKeepRight(projection, context, dispatch) },
         { id: 'streetside', layer: svgStreetside(projection, context, dispatch)},
         { id: 'mapillary-images', layer: svgMapillaryImages(projection, context, dispatch) },
         { id: 'mapillary-signs',  layer: svgMapillarySigns(projection, context, dispatch) },

modules/ui/map_data.js

@@ -95,7 +95,7 @@ export function uiMapData(context) {
 
 
     function drawPhotoItems(selection) {
-        var photoKeys = ['streetside', 'mapillary-images', 'mapillary-signs', 'openstreetcam-images'];
+        var photoKeys = ['streetside', 'mapillary-images', 'mapillary-signs', 'openstreetcam-images', 'keepRight'];
         var photoLayers = layers.all().filter(function(obj) { return photoKeys.indexOf(obj.id) !== -1; });
         var data = photoLayers.filter(function(obj) { return obj.layer.supported(); });