feat: add Mapillary Map Features layer

modules/renderer/background.js

@@ -194,6 +194,7 @@ export function rendererBackground(context) {
         var photoOverlayLayers = {
             streetside: 'Bing Streetside',
             mapillary: 'Mapillary Images',
+            'mapillary-map-features': 'Mapillary Map Features',
             'mapillary-signs': 'Mapillary Signs',
             openstreetcam: 'OpenStreetCam Images'
         };

modules/renderer/photos.js

@@ -6,7 +6,7 @@ import { utilQsString, utilStringQs } from '../util';
 
 export function rendererPhotos(context) {
     var dispatch = d3_dispatch('change');
-    var _layerIDs = ['streetside', 'mapillary', 'mapillary-signs', 'openstreetcam'];
+    var _layerIDs = ['streetside', 'mapillary', 'mapillary-map-features', 'mapillary-signs', 'openstreetcam'];
     var _allPhotoTypes = ['flat', 'panoramic'];
     var _shownPhotoTypes = _allPhotoTypes.slice();   // shallow copy
 

modules/services/mapillary.js

@@ -13,10 +13,35 @@ var apibase = 'https://a.mapillary.com/v3/';
 var viewercss = 'mapillary-js/mapillary.min.css';
 var viewerjs = 'mapillary-js/mapillary.min.js';
 var clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi';
+var mapFeatureConfig = {
+    organizationKey: 'FI3NAFfzQQgdF081TRdgTy',
+    values: [
+        'object--bench',
+        'object--bike-rack',
+        'object--billboard',
+        'object--fire-hydrant',
+        'object--mailbox',
+        'object--phone-booth',
+        'object--street-light',
+        'object--support--utility-pole',
+        'object--traffic-light--pedestrians',
+        'object--trash-can',
+        'construction--flat--crosswalk-plain',
+        'object--cctv-camera',
+        'object--banner',
+        'object--catch-basin',
+        'object--manhole',
+        'object--sign--advertisement',
+        'object--sign--information',
+        'object--sign--store',
+        'object--traffic-light--*',
+        'marking--discrete--crosswalk-zebra'
+    ].join(',')
+};
 var maxResults = 1000;
 var tileZoom = 14;
 var tiler = utilTiler().zoomExtent([tileZoom, tileZoom]).skipNullIsland(true);
-var dispatch = d3_dispatch('loadedImages', 'loadedSigns', 'bearingChanged');
+var dispatch = d3_dispatch('loadedImages', 'loadedSigns', 'loadedMapFeatures', 'bearingChanged');
 var _mlyFallback = false;
 var _mlyCache;
 var _mlyClicks;
@@ -160,7 +185,7 @@ function loadNextTilePage(which, currZoom, url, tile) {
                 // A map feature is a real world object that can be shown on a map. It could be any object
                 // recognized from images, manually added in images, or added on the map.
                 // Each map feature is a GeoJSON Point (located where the feature is)
-                } else if (which === 'map_features') {
+                } else if (which === 'map_features' || which === 'points') {
                     d = {
                         loc: loc,
                         key: feature.properties.key,
@@ -191,6 +216,8 @@ function loadNextTilePage(which, currZoom, url, tile) {
                 dispatch.call('loadedImages');
             } else if (which === 'map_features') {
                 dispatch.call('loadedSigns');
+            } else if (which === 'points') {
+                dispatch.call('loadedMapFeatures');
             }
         })
         .catch(function() {
@@ -260,6 +287,7 @@ export default {
             Object.values(_mlyCache.images.inflight).forEach(abortRequest);
             Object.values(_mlyCache.image_detections.inflight).forEach(abortRequest);
             Object.values(_mlyCache.map_features.inflight).forEach(abortRequest);
+            Object.values(_mlyCache.points.inflight).forEach(abortRequest);
             Object.values(_mlyCache.sequences.inflight).forEach(abortRequest);
         }
 
@@ -267,6 +295,7 @@ export default {
             images: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {} },
             image_detections: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, forImageKey: {} },
             map_features: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush() },
+            points: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush() },
             sequences: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, lineString: {} }
         };
 
@@ -287,6 +316,12 @@ export default {
     },
 
 
+    mapFeatures: function(projection) {
+        var limit = 5;
+        return searchLimited(limit, projection, _mlyCache.points.rtree);
+    },
+
+
     cachedImage: function(imageKey) {
         return _mlyCache.images.forImageKey[imageKey];
     },
@@ -334,6 +369,14 @@ export default {
     },
 
 
+    loadMapFeatures: function(projection) {
+        // if we are looking at signs, we'll actually need to fetch images too
+        loadTiles('images', apibase + 'images?', projection);
+        loadTiles('points', apibase + 'map_features?layers=points&min_nbr_image_detections=1&&shapes_by_organization_keys=' + mapFeatureConfig.organizationKey + '&' + 'values=' + mapFeatureConfig.values + '&', projection);
+        loadTiles('image_detections', apibase + 'image_detections?layers=points&shapes_by_organization_keys=' + mapFeatureConfig.organizationKey + '&' + 'values=' + mapFeatureConfig.values + '&', projection);
+    },
+
+
     loadViewer: function(context) {
         // add mly-wrapper
         var wrap = d3_select('#photoviewer').selectAll('.mly-wrapper')
@@ -364,7 +407,7 @@ export default {
 
         // load mapillary signs sprite
         var defs = context.container().select('defs');
-        defs.call(svgDefs(context).addSprites, ['mapillary-sprite'], false /* don't override colors */ );
+        defs.call(svgDefs(context).addSprites, ['mapillary-sprite', 'mapillary-object-sprite'], false /* don't override colors */ );
 
         // Register viewer resize handler
         context.ui().photoviewer.on('resize.mapillary', function() {

modules/svg/layers.js

@@ -9,6 +9,7 @@ import { svgImproveOSM } from './improveOSM';
 import { svgStreetside } from './streetside';
 import { svgMapillaryImages } from './mapillary_images';
 import { svgMapillarySigns } from './mapillary_signs';
+import { svgMapillaryMapFeatures } from './mapillary_map_features';
 import { svgOpenstreetcamImages } from './openstreetcam_images';
 import { svgOsm } from './osm';
 import { svgNotes } from './notes';
@@ -28,6 +29,7 @@ export function svgLayers(projection, context) {
         { id: 'improveOSM', layer: svgImproveOSM(projection, context, dispatch) },
         { id: 'streetside', layer: svgStreetside(projection, context, dispatch)},
         { id: 'mapillary', layer: svgMapillaryImages(projection, context, dispatch) },
+        { id: 'mapillary-map-features',  layer: svgMapillaryMapFeatures(projection, context, dispatch) },
         { id: 'mapillary-signs',  layer: svgMapillarySigns(projection, context, dispatch) },
         { id: 'openstreetcam', layer: svgOpenstreetcamImages(projection, context, dispatch) },
         { id: 'debug', layer: svgDebug(projection, context, dispatch) },

modules/svg/mapillary_map_features.js

@@ -0,0 +1,173 @@
+import _throttle from 'lodash-es/throttle';
+import { select as d3_select } from 'd3-selection';
+import { svgPointTransform } from './helpers';
+import { services } from '../services';
+
+
+export function svgMapillaryMapFeatures(projection, context, dispatch) {
+    var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000);
+    var minZoom = 12;
+    var layer = d3_select(null);
+    var _mapillary;
+
+
+    function init() {
+        if (svgMapillaryMapFeatures.initialized) return;  // run once
+        svgMapillaryMapFeatures.enabled = false;
+        svgMapillaryMapFeatures.initialized = true;
+    }
+
+
+    function getService() {
+        if (services.mapillary && !_mapillary) {
+            _mapillary = services.mapillary;
+            _mapillary.event.on('loadedMapFeatures', throttledRedraw);
+        } else if (!services.mapillary && _mapillary) {
+            _mapillary = null;
+        }
+        return _mapillary;
+    }
+
+
+    function showLayer() {
+        var service = getService();
+        if (!service) return;
+
+        editOn();
+    }
+
+
+    function hideLayer() {
+        throttledRedraw.cancel();
+        editOff();
+    }
+
+
+    function editOn() {
+        layer.style('display', 'block');
+    }
+
+
+    function editOff() {
+        layer.selectAll('.icon-map-feature').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 map feature 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.mapFeatures(projection) : []);
+        var viewer = d3_select('#photoviewer');
+        var selected = viewer.empty() ? undefined : viewer.datum();
+        var selectedImageKey = selected && selected.key;
+        var transform = svgPointTransform(projection);
+
+        var mapFeatures = layer.selectAll('.icon-map-feature')
+            .data(data, function(d) { return d.key; });
+
+        // exit
+        mapFeatures.exit()
+            .remove();
+
+        // enter
+        var enter = mapFeatures.enter()
+            .append('use')
+            .attr('class', 'icon-map-feature')
+            .attr('width', '24px')
+            .attr('height', '24px')
+            .attr('x', '-12px')
+            .attr('y', '-12px')
+            .attr('xlink:href', function(d) { return '#' + d.value; })
+            .classed('currentView', function(d) {
+                return d.detections.some(function(detection) {
+                    return detection.image_key === selectedImageKey;
+                });
+            })
+            .on('click', click);
+
+        // update
+        mapFeatures
+            .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 drawMapFeatures(selection) {
+        var enabled = svgMapillaryMapFeatures.enabled;
+        var service = getService();
+
+        layer = selection.selectAll('.layer-mapillary-map-features')
+            .data(service ? [0] : []);
+
+        layer.exit()
+            .remove();
+
+        layer = layer.enter()
+            .append('g')
+            .attr('class', 'layer-mapillary-map-features')
+            .style('display', enabled ? 'block' : 'none')
+            .merge(layer);
+
+        if (enabled) {
+            if (service && ~~context.map().zoom() >= minZoom) {
+                editOn();
+                update();
+                service.loadMapFeatures(projection);
+            } else {
+                editOff();
+            }
+        }
+    }
+
+
+    drawMapFeatures.enabled = function(_) {
+        if (!arguments.length) return svgMapillaryMapFeatures.enabled;
+        svgMapillaryMapFeatures.enabled = _;
+        if (svgMapillaryMapFeatures.enabled) {
+            showLayer();
+        } else {
+            hideLayer();
+        }
+        dispatch.call('change');
+        return this;
+    };
+
+
+    drawMapFeatures.supported = function() {
+        return !!getService();
+    };
+
+
+    init();
+    return drawMapFeatures;
+}

modules/ui/map_data.js

@@ -149,7 +149,7 @@ export function uiMapData(context) {
             .append('li')
             .attr('class', function(d) {
                 var classes = 'list-item-photos list-item-' + d.id;
-                if (d.id === 'mapillary-signs') {
+                if (d.id === 'mapillary-signs' || d.id === 'mapillary-map-features') {
                     classes += ' indented';
                 }
                 return classes;
@@ -162,7 +162,7 @@ export function uiMapData(context) {
                 if (d.id === 'mapillary-signs') titleID = 'mapillary.signs.tooltip';
                 else if (d.id === 'mapillary') titleID = 'mapillary_images.tooltip';
                 else if (d.id === 'openstreetcam') titleID = 'openstreetcam_images.tooltip';
-                else titleID = d.id.replace('-', '_') + '.tooltip';
+                else titleID = d.id.replace(/-/g, '_') + '.tooltip';
                 d3_select(this)
                     .call(tooltip()
                         .title(t(titleID))
@@ -180,9 +180,20 @@ export function uiMapData(context) {
             .text(function(d) {
                 var id = d.id;
                 if (id === 'mapillary-signs') id = 'photo_overlays.traffic_signs';
-                return t(id.replace('-', '_') + '.title');
+                return t(id.replace(/-/g, '_') + '.title');
             });
 
+        labelEnter
+            .filter(function(d) { return d.id === 'mapillary-map-features'; })
+            .append('a')
+            .attr('class', 'request-data-link')
+            .attr('target', '_blank')
+            .attr('tabindex', -1)
+            .call(svgIcon('#iD-icon-out-link', 'inline'))
+            .attr('href', 'https://mapillary.github.io/mapillary_solutions/data-request')
+            .append('span')
+            .text(t('mapillary_map_features.request_data'));
+
 
         // Update
         li
@@ -520,7 +531,7 @@ export function uiMapData(context) {
         labelEnter
             .append('span')
             .text(t('map_data.layers.custom.title'));
-    
+
         liEnter
             .append('button')
             .call(tooltip()