From 2b50d36f6560661bd18f54e9ee06c38ba73decd9 Mon Sep 17 00:00:00 2001 From: Shawna Paradee Date: Tue, 20 Mar 2018 13:05:33 -0700 Subject: [PATCH] adding points for streetside images --- css/60_photos.css | 47 +++++++++++++++++++++++++++++++++ data/core.yaml | 3 +++ dist/locales/en.json | 4 +++ modules/behavior/select.js | 1 + modules/renderer/map.js | 1 + modules/services/index.js | 3 +++ modules/services/mapillary.js | 6 ++--- modules/services/streetside.js | 4 +++ modules/svg/index.js | 1 + modules/svg/layers.js | 2 ++ modules/svg/mapillary_images.js | 3 ++- modules/ui/init.js | 1 + modules/ui/map_data.js | 2 +- package.json | 5 ++++ test/spec/svg/layers.js | 1 + 15 files changed, 79 insertions(+), 5 deletions(-) diff --git a/css/60_photos.css b/css/60_photos.css index 3d2d8670f..18a18f643 100644 --- a/css/60_photos.css +++ b/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; diff --git a/data/core.yaml b/data/core.yaml index 4d487fa0d..ecfaf6998 100644 --- a/data/core.yaml +++ b/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)" diff --git a/dist/locales/en.json b/dist/locales/en.json index ca16b9f29..5ed6b6d09 100644 --- a/dist/locales/en.json +++ b/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)" diff --git a/modules/behavior/select.js b/modules/behavior/select.js index 9a9c0b34d..9232f6c58 100644 --- a/modules/behavior/select.js +++ b/modules/behavior/select.js @@ -98,6 +98,7 @@ export function behaviorSelect(context) { function click() { + d3_select(window) .on('mouseup.select', null, true); diff --git a/modules/renderer/map.js b/modules/renderer/map.js index 177fc6b42..dc293b09c 100644 --- a/modules/renderer/map.js +++ b/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); }; diff --git a/modules/services/index.js b/modules/services/index.js index aa5055b5c..052d2136b 100644 --- a/modules/services/index.js +++ b/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, diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index 2c7bedf3c..5f39a4170 100644 --- a/modules/services/mapillary.js +++ b/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; diff --git a/modules/services/streetside.js b/modules/services/streetside.js index 72cedd60c..99a362d2c 100644 --- a/modules/services/streetside.js +++ b/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'; diff --git a/modules/svg/index.js b/modules/svg/index.js index 68e2f2f28..29944847d 100644 --- a/modules/svg/index.js +++ b/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'; diff --git a/modules/svg/layers.js b/modules/svg/layers.js index 08f92db18..8e6227dbf 100644 --- a/modules/svg/layers.js +++ b/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) }, diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js index fb8a4b4b8..72bbd94c0 100644 --- a/modules/svg/mapillary_images.js +++ b/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; diff --git a/modules/ui/init.js b/modules/ui/init.js index adeb376fb..26548c6fd 100644 --- a/modules/ui/init.js +++ b/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(); } }) diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index 457a43be5..3e61f4669 100644 --- a/modules/ui/map_data.js +++ b/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(); }); diff --git a/package.json b/package.json index a819e512d..378201d4f 100644 --- a/package.json +++ b/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" diff --git a/test/spec/svg/layers.js b/test/spec/svg/layers.js index 75c957daa..b0af6a038 100644 --- a/test/spec/svg/layers.js +++ b/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;