Merge branch 'streetside' of https://github.com/jharpster/iD into jharpster-streetside

(also cleanup whitespace and lint)

modules/services/index.js

@@ -2,6 +2,7 @@ import serviceMapillary from './mapillary';
 import serviceNominatim from './nominatim';
 import serviceOpenstreetcam from './openstreetcam';
 import serviceOsm from './osm';
+import serviceStreetside from './streetside';
 import serviceTaginfo from './taginfo';
 import serviceWikidata from './wikidata';
 import serviceWikipedia from './wikipedia';
@@ -11,6 +12,7 @@ export var services = {
     mapillary: serviceMapillary,
     openstreetcam: serviceOpenstreetcam,
     osm: serviceOsm,
+    streetside: serviceStreetside,
     taginfo: serviceTaginfo,
     wikidata: serviceWikidata,
     wikipedia: serviceWikipedia
@@ -21,6 +23,7 @@ export {
     serviceNominatim,
     serviceOpenstreetcam,
     serviceOsm,
+    serviceStreetside,
     serviceTaginfo,
     serviceWikidata,
     serviceWikipedia

modules/services/mapillary.js

@@ -28,21 +28,20 @@ import { geoExtent } from '../geo';
 import { utilDetect } from '../util/detect';
 import { utilQsString, utilRebind } from '../util';
 
-
-var apibase = 'https://a.mapillary.com/v3/',
-    viewercss = 'mapillary-js/mapillary.min.css',
-    viewerjs = 'mapillary-js/mapillary.min.js',
-    clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi',
-    maxResults = 1000,
-    tileZoom = 14,
-    dispatch = d3_dispatch('loadedImages', 'loadedSigns'),
-    _mlyFallback = false,
-    _mlyCache,
-    _mlyClicks,
-    _mlySelectedImage,
-    _mlySignDefs,
-    _mlySignSprite,
-    _mlyViewer;
+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 maxResults = 1000;
+var tileZoom = 14;
+var dispatch = d3_dispatch('loadedImages', 'loadedSigns');
+var _mlyFallback = false;
+var _mlyCache;
+var _mlyClicks;
+var _mlySelectedImage;
+var _mlySignDefs;
+var _mlySignSprite;
+var _mlyViewer;
 
 
 function abortRequest(i) {
@@ -52,10 +51,10 @@ function abortRequest(i) {
 
 function nearNullIsland(x, y, z) {
     if (z >= 7) {
-        var center = Math.pow(2, z - 1),
-            width = Math.pow(2, z - 6),
-            min = center - (width / 2),
-            max = center + (width / 2) - 1;
+        var center = Math.pow(2, z - 1);
+        var width = Math.pow(2, z - 6);
+        var min = center - (width / 2);
+        var max = center + (width / 2) - 1;
         return x >= min && x <= max && y >= min && y <= max;
     }
     return false;
@@ -87,12 +86,13 @@ function localeTimestamp(s) {
 
 
 function getTiles(projection) {
-    var s = projection.scale() * 2 * Math.PI,
-        z = Math.max(Math.log(s) / Math.log(2) - 8, 0),
-        ts = 256 * Math.pow(2, z - tileZoom),
-        origin = [
-            s / 2 - projection.translate()[0],
-            s / 2 - projection.translate()[1]];
+    var s = projection.scale() * 2 * Math.PI;
+    var z = Math.max(Math.log(s) / Math.log(2) - 8, 0);
+    var ts = 256 * Math.pow(2, z - tileZoom);
+    var origin = [
+        s / 2 - projection.translate()[0],
+        s / 2 - projection.translate()[1]
+    ];
 
     return d3_geoTile()
         .scaleExtent([tileZoom, tileZoom])
@@ -100,8 +100,8 @@ function getTiles(projection) {
         .size(projection.clipExtent()[1])
         .translate(projection.translate())()
         .map(function(tile) {
-            var x = tile[0] * ts - origin[0],
-                y = tile[1] * ts - origin[1];
+            var x = tile[0] * ts - origin[0];
+            var y = tile[1] * ts - origin[1];
 
             return {
                 id: tile.toString(),
@@ -116,12 +116,12 @@ function getTiles(projection) {
 
 
 function loadTiles(which, url, projection) {
-    var s = projection.scale() * 2 * Math.PI,
-        currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0));
+    var s = projection.scale() * 2 * Math.PI;
+    var currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0));
 
     var tiles = getTiles(projection).filter(function(t) {
-            return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]);
-        });
+        return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]);
+    });
 
     _filter(which.inflight, function(v, k) {
         var wanted = _find(tiles, function(tile) { return k === (tile.id + ',0'); });
@@ -136,17 +136,17 @@ function loadTiles(which, url, projection) {
 
 
 function loadNextTilePage(which, currZoom, url, tile) {
-    var cache = _mlyCache[which],
-        rect = tile.extent.rectangle(),
-        maxPages = maxPageAtZoom(currZoom),
-        nextPage = cache.nextPage[tile.id] || 0,
-        nextURL = cache.nextURL[tile.id] || url +
-            utilQsString({
-                per_page: maxResults,
-                page: nextPage,
-                client_id: clientId,
-                bbox: [rect[0], rect[1], rect[2], rect[3]].join(','),
-            });
+    var cache = _mlyCache[which];
+    var rect = tile.extent.rectangle();
+    var maxPages = maxPageAtZoom(currZoom);
+    var nextPage = cache.nextPage[tile.id] || 0;
+    var nextURL = cache.nextURL[tile.id] || url +
+        utilQsString({
+            per_page: maxResults,
+            page: nextPage,
+            client_id: clientId,
+            bbox: [rect[0], rect[1], rect[2], rect[3]].join(','),
+        });
 
     if (nextPage > maxPages) return;
 
@@ -170,8 +170,8 @@ function loadNextTilePage(which, currZoom, url, tile) {
             if (err || !data.features || !data.features.length) return;
 
             var features = data.features.map(function(feature) {
-                var loc = feature.geometry.coordinates,
-                    d;
+                var loc = feature.geometry.coordinates;
+                var d;
 
                 if (which === 'images') {
                     d = {
@@ -245,7 +245,7 @@ function parsePagination(links) {
             return [
                 /<(.+)>/.exec(elements[0])[1],
                 /rel="(.+)"/.exec(elements[1])[1]
-                ];
+            ];
         } else {
             return ['',''];
         }
@@ -260,14 +260,14 @@ function parsePagination(links) {
 function partitionViewport(psize, projection) {
     var dimensions = projection.clipExtent()[1];
     psize = psize || 16;
-    var cols = d3_range(0, dimensions[0], psize),
-        rows = d3_range(0, dimensions[1], psize),
-        partitions = [];
+    var cols = d3_range(0, dimensions[0], psize);
+    var rows = d3_range(0, dimensions[1], psize);
+    var partitions = [];
 
     rows.forEach(function(y) {
         cols.forEach(function(x) {
-            var min = [x, y + psize],
-                max = [x + psize, y];
+            var min = [x, y + psize];
+            var max = [x + psize, y];
             partitions.push(
                 geoExtent(projection.invert(min), projection.invert(max)));
         });

modules/services/streetside.js

@@ -0,0 +1,489 @@
+import _filter from 'lodash-es/filter';
+import _find from 'lodash-es/find';
+import _flatten from 'lodash-es/flatten';
+import _forEach from 'lodash-es/forEach';
+import _isEmpty from 'lodash-es/isEmpty';
+import _map from 'lodash-es/map';
+import _some from 'lodash-es/some';
+import _union from 'lodash-es/union';
+
+import { range as d3_range } from 'd3-array';
+import { dispatch as d3_dispatch } from 'd3-dispatch';
+
+import {
+    request as d3_request,
+    json as d3_json
+} from 'd3-request';
+
+import {
+    select as d3_select,
+    selectAll as d3_selectAll
+} from 'd3-selection';
+
+import rbush from 'rbush';
+import { jsonpRequest } from '../util/jsonp_request';
+import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile';
+import { geoExtent } from '../geo';
+import { utilDetect } from '../util/detect';
+import { utilQsString, utilRebind } from '../util';
+
+
+var bubbleApi = 'https://dev.virtualearth.net/mapcontrol/HumanScaleServices/GetBubbles.ashx?';
+var streetsideImagesApi = 'https://t.ssl.ak.tiles.virtualearth.net/tiles/';
+var bubbleAppKey = 'AuftgJsO0Xs8Ts4M1xZUQJQXJNsvmh3IV8DkNieCiy3tCwCUMq76-WpkrBtNAuEm';
+var acctId = '1402191';
+var pannellumViewerCss = 'pannellum-streetside/pannellum.css';
+var pannellumViewer = 'pannellum-streetside/pannellum.js';
+var tileZoom = 16.5;
+var dispatch = d3_dispatch('loadedBubbles');
+var _bubbleCache;
+
+/**
+ * abortRequest().
+ */
+function abortRequest(i) {
+    i.abort();
+}
+
+/**
+ * nearNullIsland().
+ */
+function nearNullIsland(x, y, z) {
+    if (z >= 7) {
+        var center = Math.pow(2, z - 1),
+            width = Math.pow(2, z - 6),
+            min = center - (width / 2),
+            max = center + (width / 2) - 1;
+        return x >= min && x <= max && y >= min && y <= max;
+    }
+    return false;
+}
+
+/**
+ * localeTimeStamp().
+ */
+function localeTimestamp(s) {
+    if (!s) return null;
+    var detected = utilDetect();
+    var options = {
+        day: 'numeric', month: 'short', year: 'numeric'
+        //hour: 'numeric', minute: 'numeric', second: 'numeric',
+        //timeZone: 'UTC'
+    };
+    var d = new Date(s);
+    if (isNaN(d.getTime())) return null;
+    return d.toLocaleString(detected.locale, options);
+}
+
+/**
+ * getTiles() returns array of d3 geo tiles.
+ * Using d3.geo.tiles.js from lib, gets tile extents for each grid tile in a grid created from
+ * an area around (and including) the current map view extents.
+ */
+function getTiles(projection) {
+    // s is the current map scale
+    // z is the 'Level of Detail', or zoom-level, where Level 1 is far from the earth, and Level 23 is close to the ground.
+    // ts ('tile size') here is the formula for determining the width/height of the map in pixels, but with a modification.
+    // See 'Ground Resolution and Map Scale': //https://msdn.microsoft.com/en-us/library/bb259689.aspx.
+    // As used here, by subtracting constant 'tileZoom' from z (the level), you end up with a much smaller value for the tile size (in pixels).
+    var s = projection.scale() * 2 * Math.PI;
+    var z = Math.max(Math.log(s) / Math.log(2) - 8, 0);
+    var ts = 256 * Math.pow(2, z - tileZoom);
+    var origin = [
+        s / 2 - projection.translate()[0],
+        s / 2 - projection.translate()[1]
+    ];
+
+    return d3_geoTile()
+        .scaleExtent([tileZoom, tileZoom])
+        .scale(s)
+        .size(projection.clipExtent()[1])
+        .translate(projection.translate())()
+        .map(function (tile) {
+            var x = tile[0] * ts - origin[0];
+            var y = tile[1] * ts - origin[1];
+            return {
+                id: tile.toString(),
+                xyz: tile,
+                extent: geoExtent(
+                    projection.invert([x, y + ts]),
+                    projection.invert([x + ts, y])
+                )
+            };
+        });
+}
+
+/**
+ * loadTiles() wraps the process of generating tiles and then fetching image points for each tile.
+ */
+function loadTiles(which, url, projection) {
+    // console.log('loadTiles() for: ', which);
+    var s = projection.scale() * 2 * Math.PI;
+    var currZoom = Math.floor(Math.max(Math.log(s) / Math.log(2) - 8, 0));
+
+    // breakup the map view into tiles
+    var tiles = getTiles(projection).filter(function (t) {
+        return !nearNullIsland(t.xyz[0], t.xyz[1], t.xyz[2]);
+    });
+
+    tiles.forEach(function (tile) {
+       loadNextTilePage(which, currZoom, url, tile);
+    });
+}
+
+/**
+ * loadNextTilePage() load data for the next tile page in line.
+ */
+function loadNextTilePage(which, currZoom, url, tile) {
+    // console.log('loadNextTilePage()');
+    var cache = _bubbleCache[which];
+    var nextPage = cache.nextPage[tile.id] || 0;
+    var id = tile.id + ',' + String(nextPage);
+    if (cache.loaded[id] || cache.inflight[id]) return;
+    cache.inflight[id] = getBubbles(url, tile, function(bubbles){
+        // console.log("GET Response - bubbles: ", bubbles);
+        cache.loaded[id] = true;
+        delete cache.inflight[id];
+        if (!bubbles) return;
+
+        // [].shift() removes the first element, some statistics info, not a bubble point
+        bubbles.shift();
+        // console.log('bubbles.length', bubbles.length);
+        var features = bubbles.map(function (bubble) {
+            var loc = [bubble.lo, bubble.la];
+            var d = {
+                loc: loc,
+                key: bubble.id,
+                ca: bubble.he,
+                captured_at: bubble.cd,
+                captured_by: 'microsoft',
+                nbn: bubble.nbn,
+                pbn: bubble.pbn,
+                rn: bubble.rn,
+                pano: true
+            };
+            var feature = {
+                geometry: {
+                    coordinates: [bubble.lo, bubble.la],
+                    type: 'Point'
+                },
+                properties: d,
+                type: 'Feature'
+            };
+
+            var bubbleId = bubble.id;
+            cache.points[bubbleId] = feature;
+            cache.forImageKey[bubbleId] = bubbleId;
+            return {
+                minX: loc[0], minY: loc[1], maxX: loc[0], maxY: loc[1], data: d
+            };
+        }).filter(Boolean);
+
+        cache.rtree.load(features);
+        if (which === 'bubbles'){
+            dispatch.call('loadedBubbles');
+        }
+    });
+}
+
+/**
+ * getBubbles() handles the request to the server for a tile extent of 'bubbles' (streetside image locations).
+ */
+function getBubbles(url, tile, callback) {
+    //console.log('services - streetside - getBubbles()');
+    var rect = tile.extent.rectangle();
+    var urlForRequest = url + utilQsString({
+        n: rect[3],
+        s: rect[1],
+        e: rect[2],
+        w: rect[0],
+        appkey: bubbleAppKey,
+        jsCallback: '{callback}'
+    });
+    jsonpRequest(urlForRequest, function (data) {
+        if (!data || data.error) {
+            callback(null);
+        } else {
+            callback(data);
+        }
+    });
+}
+
+/**
+ * partitionViewport() partition viewport into `psize` x `psize` regions.
+ */
+function partitionViewport(psize, projection) {
+    var dimensions = projection.clipExtent()[1];
+    psize = psize || 16;
+
+    var cols = d3_range(0, dimensions[0], psize);
+    var rows = d3_range(0, dimensions[1], psize);
+    var partitions = [];
+    rows.forEach(function (y) {
+        cols.forEach(function (x) {
+            var min = [x, y + psize];
+            var max = [x + psize, y];
+            partitions.push(geoExtent(projection.invert(min), projection.invert(max)));
+        });
+    });
+
+    return partitions;
+}
+
+/**
+ * searchLimited().
+ */
+function searchLimited(psize, limit, projection, rtree) {
+    //console.log('services - streetside - searchLimited()');
+    limit = limit || 3;
+
+    var partitions = partitionViewport(psize, projection);
+    var results;
+
+    // console.time('previous');
+    results = _flatten(_map(partitions, function (extent) {
+        return rtree.search(extent.bbox())
+            .slice(0, limit)
+            .map(function (d) { return d.data; });
+    }));
+
+    return results;
+}
+
+
+export default {
+    /**
+     * init() initialize streetside.
+     */
+    init: function () {
+        if (!_bubbleCache) {
+            this.reset();
+        }
+
+        this.event = utilRebind(this, dispatch, 'on');
+    },
+
+    /**
+     * reset() reset the cache.
+     */
+    reset: function () {
+        var cache = _bubbleCache;
+
+        if (cache) {
+            if (cache.bubbles && cache.bubbles.inflight) {
+                _forEach(cache.bubbles.inflight, abortRequest);
+            }
+        }
+
+        _bubbleCache = {
+            bubbles: { inflight: {}, loaded: {}, nextPage: {}, nextURL: {}, rtree: rbush(), forImageKey: {}, points: {} }
+        };
+    },
+
+    /**
+     * bubbles()
+     */
+    bubbles: function (projection) {
+        var psize = 32, limit = 3;
+        return searchLimited(psize, limit, projection, _bubbleCache.bubbles.rtree);
+    },
+
+    /**
+     * loadBubbles()
+     */
+    loadBubbles: function (projection) {
+        loadTiles('bubbles', bubbleApi, projection);
+    },
+
+    /**
+     * loadViewer() create the streeside viewer.
+     */
+    loadViewer: function (context) {
+        // create ms-wrapper, a photo wrapper class
+        var wrap = d3_select('#photoviewer').selectAll('.ms-wrapper')
+            .data([0]);
+
+        // inject ms-wrapper into the photoviewer div (used by all
+        // to house each custom photo viewer)
+        var wrapEnter = wrap.enter()
+            .append('div')
+            .attr('id', 'ms')
+            .attr('class', 'photo-wrapper ms-wrapper')
+            .classed('hide', true);
+
+        // inject div to support streetside viewer (pannellum)
+        wrapEnter
+            .append('div')
+            .attr('id','viewer-streetside');
+
+        // inject div to support photo attribution into ms-wrapper
+        wrapEnter
+            .append('div')
+            .attr('class', 'photo-attribution-streetside fillD');
+
+        // load streetside pannellum viewer css
+        d3_select('head').selectAll('#streetside-viewercss')
+            .data([0])
+            .enter()
+            .append('link')
+            .attr('id', 'streetside-viewercss')
+            .attr('rel', 'stylesheet')
+            .attr('href', context.asset(pannellumViewerCss));
+
+        // load streetside pannellum viewer js
+        d3_select('head').selectAll('#streetside-viewerjs')
+            .data([0])
+            .enter()
+            .append('script')
+            .attr('id', 'streetside-viewerjs')
+            .attr('src', context.asset(pannellumViewer));
+    },
+
+    /**
+     * showViewer()
+     */
+    showViewer: function () {
+        var wrap = d3_select('#photoviewer')
+            .classed('hide', false);
+
+        var isHidden = wrap.selectAll('.photo-wrapper.ms-wrapper.hide').size();
+
+        if (isHidden) {
+            wrap
+                .selectAll('.photo-wrapper:not(.ms-wrapper)')
+                .classed('hide', true);
+
+            wrap
+                .selectAll('.photo-wrapper.ms-wrapper')
+                .classed('hide', false);
+        }
+
+        return this;
+    },
+
+    /**
+     * hideViewer()
+     */
+    hideViewer: function () {
+        var viewer = d3_select('#photoviewer');
+        if (!viewer.empty()) viewer.datum(null);
+
+        viewer
+            .classed('hide', true)
+            .selectAll('.photo-wrapper')
+            .classed('hide', true);
+
+        d3_selectAll('.viewfield-group, .sequence, .icon-sign')
+            .classed('selected', false);
+
+        return this.setStyles(null, true);
+    },
+
+    /**
+     * selectImage().
+     */
+    selectImage: function (d) {
+        var viewer = d3_select('#photoviewer');
+        if (!viewer.empty()) viewer.datum(d);
+
+        this.setStyles(null, true);
+
+        var wrap = d3_select('#photoviewer .ms-wrapper');
+        var attribution = wrap.selectAll('.photo-attribution-streetside').html('');
+        var year = (new Date()).getFullYear();
+
+        if (d) {
+            if (d.captured_by) {
+                attribution
+                    .append('a')
+                    .attr('class', 'captured_by')
+                    .attr('target', '_blank')
+                    .attr('href', 'https://www.microsoft.com/en-us/maps/streetside')
+                    .text('©' + year +' Microsoft');
+
+                attribution
+                    .append('span')
+                    .text('|');
+            }
+
+            if (d.captured_at) {
+                attribution
+                    .append('span')
+                    .attr('class', 'captured_at')
+                    .text(localeTimestamp(d.captured_at));
+            }
+
+            attribution
+                .append('a')
+                .attr('class', 'image_link')
+                .attr('target', '_blank')
+                .attr('href', 'https://www.bing.com/maps/privacyreport/streetsideprivacyreport?bubbleid=' + encodeURIComponent(d.key) +
+                    '&focus=photo&lat=' + d.loc[1] + '&lng=' + d.loc[0] + '&z=17')
+                .text('Report a privacy concern with this image');
+
+            var bubbleIdQuadKey = d.key.toString(4);
+            var paddingNeeded = 16 - bubbleIdQuadKey.length;
+            for (var i = 0; i < paddingNeeded; i++) {
+                bubbleIdQuadKey = '0' + bubbleIdQuadKey;
+            }
+
+            // Order matters here: front=01, right=02, back=03, left=10, up=11, down=12
+            var imgLocIdxArr = ['01','02','03','10','11','12'];
+            var imgUrlPrefix = streetsideImagesApi + 'hs' + bubbleIdQuadKey;
+            var imgUrlSuffix = '.jpg?g=6338&n=z';
+            pannellum.viewer('viewer-streetside', {
+                type: 'cubemap',
+                cubeMap: [
+                    imgUrlPrefix + imgLocIdxArr[0] +  imgUrlSuffix,
+                    imgUrlPrefix + imgLocIdxArr[1] +  imgUrlSuffix,
+                    imgUrlPrefix + imgLocIdxArr[2] +  imgUrlSuffix,
+                    imgUrlPrefix + imgLocIdxArr[3] +  imgUrlSuffix,
+                    imgUrlPrefix + imgLocIdxArr[4] +  imgUrlSuffix,
+                    imgUrlPrefix + imgLocIdxArr[5] +  imgUrlSuffix
+                ],
+                showFullscreenCtrl: false,
+                autoLoad: true
+            });
+        }
+        return this;
+    },
+
+    /**
+     * setStyles().
+     */
+    setStyles: function (hovered, reset) {
+        if (reset) {  // reset all layers
+            d3_selectAll('.viewfield-group')
+                .classed('highlighted', false)
+                .classed('hovered', false)
+                .classed('selected', false);
+
+            d3_selectAll('.sequence')
+                .classed('highlighted', false)
+                .classed('selected', false);
+        }
+        var hoveredBubbleKey = hovered && hovered.key;
+        var viewer = d3_select('#photoviewer');
+        var selected = viewer.empty() ? undefined : viewer.datum();
+        var selectedBubbleKey = selected && selected.key;
+        var highlightedBubbleKeys = _union(hoveredBubbleKey, selectedBubbleKey);
+
+        d3_selectAll('.layer-streetside-images .viewfield-group')
+            .classed('highlighted', function (d) { return highlightedBubbleKeys.indexOf(d.key) !== -1; })
+            .classed('hovered', function (d) { return d.key === hoveredBubbleKey; })
+            .classed('selected', function (d) { return d.key === selectedBubbleKey; });
+
+        d3_selectAll('.layer-streetside-images .sequence')
+            .classed('highlighted', function (d) { return d.properties.key === hoveredSequenceKey; })
+            .classed('selected', function (d) { return d.properties.key === selectedSequenceKey; });
+
+        return this;
+    },
+
+    /**
+     * cache().
+     */
+    cache: function () {
+        return _bubbleCache;
+    }
+};

modules/svg/index.js

@@ -18,6 +18,7 @@ export { svgPointTransform } from './helpers.js';
 export { svgPoints } from './points.js';
 export { svgRelationMemberTags } from './helpers.js';
 export { svgSegmentWay } from './helpers.js';
+export { svgStreetside } from './streetside.js';
 export { svgTagClasses } from './tag_classes.js';
 export { svgTurns } from './turns.js';
 export { svgVertices } from './vertices.js';

modules/svg/layers.js

@@ -8,6 +8,7 @@ import { select as d3_select } from 'd3-selection';
 
 import { svgDebug } from './debug';
 import { svgGpx } from './gpx';
+import { svgStreetside } from './streetside';
 import { svgMapillaryImages } from './mapillary_images';
 import { svgMapillarySigns } from './mapillary_signs';
 import { svgOpenstreetcamImages } from './openstreetcam_images';
@@ -17,16 +18,17 @@ import { utilGetDimensions, utilSetDimensions } from '../util/dimensions';
 
 
 export function svgLayers(projection, context) {
-    var dispatch = d3_dispatch('change'),
-        svg = d3_select(null),
-        layers = [
-            { id: 'osm', layer: svgOsm(projection, context, dispatch) },
-            { id: 'gpx', layer: svgGpx(projection, context, dispatch) },
-            { id: 'mapillary-images', layer: svgMapillaryImages(projection, context, dispatch) },
-            { id: 'mapillary-signs',  layer: svgMapillarySigns(projection, context, dispatch) },
-            { id: 'openstreetcam-images', layer: svgOpenstreetcamImages(projection, context, dispatch) },
-            { id: 'debug', layer: svgDebug(projection, context, dispatch) }
-        ];
+    var dispatch = d3_dispatch('change');
+    var svg = d3_select(null);
+    var layers = [
+        { id: 'osm', layer: svgOsm(projection, context, dispatch) },
+        { id: 'gpx', layer: svgGpx(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) },
+        { id: 'openstreetcam-images', layer: svgOpenstreetcamImages(projection, context, dispatch) },
+        { id: 'debug', layer: svgDebug(projection, context, dispatch) }
+    ];
 
 
     function drawLayers(selection) {

modules/svg/streetside.js

@@ -0,0 +1,275 @@
+import _throttle from 'lodash-es/throttle';
+import { select as d3_select } from 'd3-selection';
+import { svgPath, svgPointTransform } from './index';
+import { services } from '../services';
+
+export function svgStreetside(projection, context, dispatch) {
+    var throttledRedraw = _throttle(function () { dispatch.call('change'); }, 1000);
+    var minZoom = 16;
+    var minMarkerZoom = 16;
+    var minViewfieldZoom = 19;
+    var layer = d3_select(null);
+    var _streetside;
+
+    /**
+     * init().
+     */
+    function init() {
+        if (svgStreetside.initialized) return;  // run once
+        svgStreetside.enabled = false;
+        svgStreetside.initialized = true;
+        console.log("svg: streetside initialized....");
+    }
+
+    /**
+     * getService().
+     */
+    function getService() {
+        if (services.streetside && !_streetside) {
+            _streetside = services.streetside;
+            _streetside.event.on('loadedBubbles', throttledRedraw);
+        } else if (!services.streetside && _streetside) {
+            _streetside = null;
+        }
+
+        return _streetside;
+    }
+
+    /**
+     * showLayer().
+     */
+    function showLayer() {
+        console.log('svg - streetside - showLayer()');
+        var service = getService();
+        if (!service) return;
+
+        service.loadViewer(context);
+        editOn();
+
+        layer
+            .style('opacity', 0)
+            .transition()
+            .duration(250)
+            .style('opacity', 1)
+            .on('end', function () { dispatch.call('change'); });
+    }
+
+    /**
+     * hideLayer().
+     */
+    function hideLayer() {
+        var service = getService();
+        if (service) {
+            service.hideViewer();
+        }
+
+        throttledRedraw.cancel();
+
+        layer
+            .transition()
+            .duration(250)
+            .style('opacity', 0)
+            .on('end', editOff);
+    }
+
+    /**
+     * editOn().
+     */
+    function editOn() {
+        layer.style('display', 'block');
+    }
+
+    /**
+     * editOff().
+     */
+    function editOff() {
+        layer.selectAll('.viewfield-group').remove();
+        layer.style('display', 'none');
+    }
+
+    /**
+     * click() Handles 'bubble' point click event.
+     */
+    function click(d) {
+        console.log("svg: map was clicked with streetside on. Passed obj: ", d);
+        var service = getService();
+        if (!service) return;
+
+        service
+            .selectImage(d)
+            .showViewer();
+
+        context.map().centerEase(d.loc);
+    }
+
+    /**
+     * mouseover().
+     */
+    function mouseover(d) {
+        var service = getService();
+        if (service) service.setStyles(d);
+    }
+
+    /**
+     * mouseout().
+     */
+    function mouseout() {
+        var service = getService();
+        if (service) service.setStyles(null);
+    }
+
+    /**
+     * transform().
+     */
+    function transform(d) {
+        var t = svgPointTransform(projection)(d);
+        if (d.ca) {
+            t += ' rotate(' + Math.floor(d.ca) + ',0,0)';
+        }
+        return t;
+    }
+
+    /**
+     * update().
+     */
+    function update() {
+        console.log("svg - update()");
+        var viewer = d3_select('#photoviewer');
+        var selected = viewer.empty() ? undefined : viewer.datum();
+        var z = ~~context.map().zoom();
+        var showMarkers = (z >= minMarkerZoom);
+        var showViewfields = (z >= minViewfieldZoom);
+        var service = getService();
+
+        // gets the features from service cache
+        var bubbles = (service && showMarkers ? service.bubbles(projection) : []);
+        var groups = layer.selectAll('.markers').selectAll('.viewfield-group')
+            .data(bubbles, function(d) { return d.key; });
+
+        // exit
+        groups.exit()
+            .remove();
+
+        // enter
+        var groupsEnter = groups.enter()
+            .append('g')
+            .attr('class', 'viewfield-group')
+            .on('mouseover', mouseover)
+            .on('mouseout', mouseout)
+            .on('click', click);
+
+        groupsEnter
+            .append('g')
+            .attr('class', 'viewfield-scale');
+
+        // update
+        var markers = groups
+            .merge(groupsEnter)
+            .sort(function(a, b) {
+                return (a === selected) ? 1
+                    : (b === selected) ? -1
+                    : b.loc[1] - a.loc[1];
+            })
+            .attr('transform', transform)
+            .select('.viewfield-scale');
+
+
+        markers.selectAll('circle')
+            .data([0])
+            .enter()
+            .append('circle')
+            .attr('dx', '0')
+            .attr('dy', '0')
+            .attr('r', '6');
+
+        var viewfields = markers.selectAll('.viewfield')
+            .data(showViewfields ? [0] : []);
+
+        viewfields.exit()
+            .remove();
+
+        // viewfields may or may not be drawn...
+        // but if they are, draw below the circles
+        viewfields.enter()
+            .insert('path', 'circle')
+            .attr('class', 'viewfield')
+            .attr('transform', 'scale(1.5,1.5),translate(-8, -13)')
+            .attr('d', viewfieldPath);
+
+        function viewfieldPath() {
+            var d = this.parentNode.__data__;
+            if (d.pano) {
+                return 'M 8,13 m -10,0 a 10,10 0 1,0 20,0 a 10,10 0 1,0 -20,0';
+            } else {
+                return 'M 6,9 C 8,8.4 8,8.4 10,9 L 16,-2 C 12,-5 4,-5 0,-2 z';
+            }
+        }
+    }
+
+    /**
+     * drawImages()
+     * drawImages is the method that is returned (and that runs) everytime 'svgStreetside()' is called.
+     * 'svgStreetside()' is called from index.js
+     */
+    function drawImages(selection) {
+        //console.log("svg - streetside - drawImages(); selection: ", selection);
+        var enabled = svgStreetside.enabled,
+            service = getService();
+
+        layer = selection.selectAll('.layer-streetside-images')
+            .data(service ? [0] : []);
+
+        layer.exit()
+            .remove();
+
+        var layerEnter = layer.enter()
+            .append('g')
+            .attr('class', 'layer-streetside-images')
+            .style('display', enabled ? 'block' : 'none');
+
+        layerEnter
+            .append('g')
+            .attr('class', 'markers');
+
+        layer = layerEnter
+            .merge(layer);
+
+        if (enabled) {
+            if (service && ~~context.map().zoom() >= minZoom) {
+                editOn();
+                update();
+
+                service.loadBubbles(projection);
+            } else {
+                editOff();
+            }
+        }
+    }
+
+    /**
+     * drawImages.enabled().
+     */
+    drawImages.enabled = function(_) {
+        //console.log('svg - streetside - drawImages.enabled()');
+        if (!arguments.length) return svgStreetside.enabled;
+        svgStreetside.enabled = _;
+        if (svgStreetside.enabled) {
+            showLayer();
+        } else {
+            hideLayer();
+        }
+        dispatch.call('change');
+        return this;
+    };
+
+    /**
+     * drawImages.supported().
+     */
+    drawImages.supported = function() {
+        return !!getService();
+    };
+
+    init();
+
+    return drawImages;
+}

modules/ui/init.js

@@ -249,6 +249,7 @@ export function uiInit(context) {
             .append('button')
             .attr('class', 'thumb-hide')
             .on('click', function () {
+                if (services.streetside) { services.streetside.hideViewer(); }
                 if (services.mapillary) { services.mapillary.hideViewer(); }
                 if (services.openstreetcam) { services.openstreetcam.hideViewer(); }
             })

modules/ui/map_data.js

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