adding points for streetside images

css/60_photos.css

@@ -42,6 +42,29 @@
     color: #fff;
 }
 
+/* streetside photo attribution */
+.photo-wrapper .photo-attribution-streetside {
+    width: 100%;
+    font-size: 10px;
+    position: absolute;
+    bottom: 0;
+    right: 0;
+    padding: 4px 2px;
+    z-index: 10;
+}
+
+.photo-attribution-streetside a,
+.photo-attribution-streetside a:visited,
+.photo-attribution-streetside span {
+    padding: 4px 2px;
+    color: #fff;
+}
+.photo-attribution-streetside .image_link{
+    color: #fff;
+    float: left;
+    line-height: 6px;
+}
+
 /* markers and sequences */
 .viewfield-group {
     pointer-events: visible;
@@ -113,6 +136,30 @@
 }
 
 
+/* Streetside Image Layer */
+.layer-streetside-images {
+    pointer-events: none;
+}
+.layer-streetside-images .viewfield-group * {
+    fill: #00d8f5;
+}
+.layer-streetside-images .viewfield-group * {
+    fill: #00d8f5;
+}
+.layer-streetside-images .viewfield-group.selected * {
+    fill: #fffc64 !important;
+    fill-opacity: 1;
+
+}
+.layer-streetside-images .viewfield-group.hovered * {
+    fill: #fffc64 !important;
+    fill-opacity: .9;
+}
+
+.layer-streetside-images .sequence {
+    stroke: #00d8f5;
+}
+
 /* Mapillary Image Layer */
 .layer-mapillary-images {
     pointer-events: none;

data/core.yaml

@@ -576,6 +576,9 @@ en:
     drag_drop: "Drag and drop a .gpx, .geojson or .kml file on the page, or click the button to the right to browse"
     zoom: "Zoom to layer"
     browse: "Browse for a file"
+  streetside:
+    tooltip: "Streetside photos from Microsoft"
+    title: "Photo Overlay (Streetside)"
   mapillary_images:
     tooltip: "Street-level photos from Mapillary"
     title: "Photo Overlay (Mapillary)"

dist/locales/en.json

@@ -701,6 +701,10 @@
             "zoom": "Zoom to layer",
             "browse": "Browse for a file"
         },
+        "streetside": {
+            "tooltip": "Streetside photos from Microsoft",
+            "title": "Photo Overlay (Streetside)"
+        },
         "mapillary_images": {
             "tooltip": "Street-level photos from Mapillary",
             "title": "Photo Overlay (Mapillary)"

modules/behavior/select.js

@@ -98,6 +98,7 @@ export function behaviorSelect(context) {
 
 
     function click() {
+       
         d3_select(window)
             .on('mouseup.select', null, true);
 

modules/renderer/map.js

@@ -514,6 +514,7 @@ export function rendererMap(context) {
     // returns Lng/Lat
     map.mouseCoordinates = function() {
         var coord = map.mouse() || pxCenter();
+        console.log("map.mouseCoordinates",projection.invert(coord));
         return projection.invert(coord);
     };
 

modules/services/index.js

@@ -1,3 +1,4 @@
+import serviceStreetside from './streetside';
 import serviceMapillary from './mapillary';
 import serviceNominatim from './nominatim';
 import serviceOpenstreetcam from './openstreetcam';
@@ -8,6 +9,7 @@ import serviceWikipedia from './wikipedia';
 
 export var services = {
     geocoder: serviceNominatim,
+    streetside: serviceStreetside,
     mapillary: serviceMapillary,
     openstreetcam: serviceOpenstreetcam,
     osm: serviceOsm,
@@ -17,6 +19,7 @@ export var services = {
 };
 
 export {
+    serviceStreetside,
     serviceMapillary,
     serviceNominatim,
     serviceOpenstreetcam,

modules/services/mapillary.js

@@ -28,10 +28,10 @@ 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',
+    // viewerjs = 'mapillary-js/mapillary.min.js',
+    viewerjs = 'mapillary-js/mapillary.js',
     clientId = 'NzNRM2otQkR2SHJzaXJmNmdQWVQ0dzo1ZWYyMmYwNjdmNDdlNmVi',
     maxResults = 1000,
     tileZoom = 14,
@@ -520,7 +520,7 @@ export default {
             this.initViewer(imageKey, context);
         } else {
             _mlyViewer.moveToKey(imageKey)
-                .catch(function(e) { console.error('mly3', e); });  // eslint-disable-line no-console
+                .catch(function(e) { console.error('mly3', e); });  // eslint-disabe-line no-console
         }
 
         return this;

modules/services/streetside.js

@@ -23,6 +23,10 @@ import {
 
 import rbush from 'rbush';
 
+// photo sphere viewer
+import _three from 'three/build/three';
+import _d from 'd.js/lib/d';
+
 import { jsonpRequest } from '../util/jsonp_request';
 import { d3geoTile as d3_geoTile } from '../lib/d3.geo.tile';
 import { geoExtent } from '../geo';

modules/svg/index.js

@@ -6,6 +6,7 @@ export { svgIcon } from './icon.js';
 export { svgLabels } from './labels.js';
 export { svgLayers } from './layers.js';
 export { svgLines } from './lines.js';
+export { svgStreetside } from './streetside.js';
 export { svgMapillaryImages } from './mapillary_images.js';
 export { svgMapillarySigns } from './mapillary_signs.js';
 export { svgMidpoints } from './midpoints.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';
@@ -22,6 +23,7 @@ export function svgLayers(projection, context) {
         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) },

modules/svg/mapillary_images.js

@@ -27,7 +27,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
         } else if (!services.mapillary && _mapillary) {
             _mapillary = null;
         }
-
+        
         return _mapillary;
     }
 
@@ -76,6 +76,7 @@ export function svgMapillaryImages(projection, context, dispatch) {
 
 
     function click(d) {
+        console.log("mapillary image feature click: ", d);
         var service = getService();
         if (!service) return;
 

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(); });
 

package.json

@@ -45,7 +45,9 @@
     "chai": "^4.1.0",
     "colors": "^1.1.2",
     "concat-files": "^0.1.1",
+    "d.js": "^0.7.5",
     "d3": "4.13.0",
+    "dot": "^1.1.2",
     "ecstatic": "^3.0.0",
     "editor-layer-index": "osmlab/editor-layer-index.git#gh-pages",
     "eslint": "^4.3.0",
@@ -66,6 +68,7 @@
     "name-suggestion-index": "0.1.4",
     "npm-run-all": "^4.0.0",
     "phantomjs-prebuilt": "~2.1.11",
+    "photo-sphere-viewer": "^3.3.1",
     "request": "^2.81.0",
     "rollup": "~0.56.3",
     "rollup-plugin-commonjs": "~8.3.0",
@@ -79,6 +82,8 @@
     "sinon-chai": "^2.14.0",
     "smash": "0.0",
     "svg-sprite": "1.3.7",
+    "three": "^0.91.0",
+    "uevent": "^1.0.0",
     "uglify-js": "^3.0.0",
     "xml2js": "^0.4.17",
     "xmlbuilder": "^9.0.6"

test/spec/svg/layers.js

@@ -29,6 +29,7 @@ describe('iD.svgLayers', function () {
         expect(nodes.length).to.eql(6);
         expect(d3.select(nodes[0]).classed('data-layer-osm')).to.be.true;
         expect(d3.select(nodes[1]).classed('data-layer-gpx')).to.be.true;
+        expect(d3.select(nodes[2]).classed('data-layer-streetside')).to.be.true;
         expect(d3.select(nodes[2]).classed('data-layer-mapillary-images')).to.be.true;
         expect(d3.select(nodes[3]).classed('data-layer-mapillary-signs')).to.be.true;
         expect(d3.select(nodes[4]).classed('data-layer-openstreetcam-images')).to.be.true;