diff --git a/css/60_photos.css b/css/60_photos.css index 4df1e4382..d5e3e13db 100644 --- a/css/60_photos.css +++ b/css/60_photos.css @@ -180,13 +180,13 @@ /* Mapillary Image Layer */ -.layer-mapillary-images { +.layer-mapillary { pointer-events: none; } -.layer-mapillary-images .viewfield-group * { +.layer-mapillary .viewfield-group * { fill: #55ff22; } -.layer-mapillary-images .sequence { +.layer-mapillary .sequence { stroke: #55ff22; } @@ -211,13 +211,13 @@ /* OpenStreetCam Image Layer */ -.layer-openstreetcam-images { +.layer-openstreetcam { pointer-events: none; } -.layer-openstreetcam-images .viewfield-group * { +.layer-openstreetcam .viewfield-group * { fill: #20c4ff; } -.layer-openstreetcam-images .sequence { +.layer-openstreetcam .sequence { stroke: #20c4ff; } diff --git a/modules/core/context.js b/modules/core/context.js index 5e3c696f1..7514bf849 100644 --- a/modules/core/context.js +++ b/modules/core/context.js @@ -538,6 +538,7 @@ export function coreContext() { background.init(); features.init(); + photos.init(); if (utilStringQs(window.location.hash).presets) { var external = utilStringQs(window.location.hash).presets; presets.fromExternal(external, function(externalPresets) { diff --git a/modules/renderer/background.js b/modules/renderer/background.js index e5491f096..74ce6635d 100644 --- a/modules/renderer/background.js +++ b/modules/renderer/background.js @@ -197,7 +197,7 @@ export function rendererBackground(context) { imageryUsed.push('Bing Streetside'); } - var mapillary_images = context.layers().layer('mapillary-images'); + var mapillary_images = context.layers().layer('mapillary'); if (mapillary_images && mapillary_images.enabled()) { imageryUsed.push('Mapillary Images'); } @@ -207,7 +207,7 @@ export function rendererBackground(context) { imageryUsed.push('Mapillary Signs'); } - var openstreetcam_images = context.layers().layer('openstreetcam-images'); + var openstreetcam_images = context.layers().layer('openstreetcam'); if (openstreetcam_images && openstreetcam_images.enabled()) { imageryUsed.push('OpenStreetCam Images'); } diff --git a/modules/renderer/photos.js b/modules/renderer/photos.js index ffb52d809..3f59e9d2f 100644 --- a/modules/renderer/photos.js +++ b/modules/renderer/photos.js @@ -3,17 +3,39 @@ import _clone from 'lodash-es/clone'; import { dispatch as d3_dispatch } from 'd3-dispatch'; import { utilRebind } from '../util/rebind'; - +import { utilQsString, utilStringQs } from '../util'; export function rendererPhotos(context) { var dispatch = d3_dispatch('change'); + var _layerIDs = ['streetside', 'mapillary', 'mapillary-signs', 'openstreetcam']; var _allPhotoTypes = ['flat', 'panoramic']; var _shownPhotoTypes = _clone(_allPhotoTypes); function photos() {} + function updateStorage() { + if (!window.mocha) { + var q = utilStringQs(window.location.hash.substring(1)); + var enabled = context.layers().all().filter(function(d) { + return _layerIDs.indexOf(d.id) !== -1 && d.layer && d.layer.supported() && d.layer.enabled(); + }).map(function(d) { + return d.id; + }); + if (enabled.length) { + q.photo_overlay = enabled.join(','); + } else { + delete q.photo_overlay; + } + window.location.replace('#' + utilQsString(q, true)); + } + } + + photos.overlayLayerIDs = function() { + return _layerIDs; + }; + photos.allPhotoTypes = function() { return _allPhotoTypes; }; @@ -24,8 +46,8 @@ export function rendererPhotos(context) { } photos.shouldFilterByPhotoType = function() { - return showsLayer('mapillary-images') || - (showsLayer('streetside') && showsLayer('openstreetcam-images')); + return showsLayer('mapillary') || + (showsLayer('streetside') && showsLayer('openstreetcam')); }; photos.showsPhotoType = function(val) { @@ -53,5 +75,18 @@ export function rendererPhotos(context) { return photos; }; + photos.init = function() { + var q = utilStringQs(window.location.hash.substring(1)); + if (q.photo_overlay) { + var hashOverlayIDs = q.photo_overlay.replace(/;/g, ',').split(','); + hashOverlayIDs.forEach(function(id) { + var layer = context.layers().layer(id); + if (layer) layer.enabled(true); + }); + } + + context.layers().on('change.rendererPhotos', updateStorage); + }; + return utilRebind(photos, dispatch, 'on'); } diff --git a/modules/services/mapillary.js b/modules/services/mapillary.js index ef90b39d0..4cfb73f51 100644 --- a/modules/services/mapillary.js +++ b/modules/services/mapillary.js @@ -591,12 +591,12 @@ export default { // highlight sibling viewfields on either the selected or the hovered sequences var highlightedImageKeys = _union(hoveredImageKeys, selectedImageKeys); - d3_selectAll('.layer-mapillary-images .viewfield-group') + d3_selectAll('.layer-mapillary .viewfield-group') .classed('highlighted', function(d) { return highlightedImageKeys.indexOf(d.key) !== -1; }) .classed('hovered', function(d) { return d.key === hoveredImageKey; }) .classed('currentView', function(d) { return d.key === selectedImageKey; }); - d3_selectAll('.layer-mapillary-images .sequence') + d3_selectAll('.layer-mapillary .sequence') .classed('highlighted', function(d) { return d.properties.key === hoveredSequenceKey; }) .classed('currentView', function(d) { return d.properties.key === selectedSequenceKey; }); diff --git a/modules/services/openstreetcam.js b/modules/services/openstreetcam.js index d4963a1f3..63c5f4e72 100644 --- a/modules/services/openstreetcam.js +++ b/modules/services/openstreetcam.js @@ -522,12 +522,12 @@ export default { // highlight sibling viewfields on either the selected or the hovered sequences var highlightedImageKeys = _union(hoveredImageKeys, selectedImageKeys); - d3_selectAll('.layer-openstreetcam-images .viewfield-group') + d3_selectAll('.layer-openstreetcam .viewfield-group') .classed('highlighted', function(d) { return highlightedImageKeys.indexOf(d.key) !== -1; }) .classed('hovered', function(d) { return d.key === hoveredImageKey; }) .classed('currentView', function(d) { return d.key === selectedImageKey; }); - d3_selectAll('.layer-openstreetcam-images .sequence') + d3_selectAll('.layer-openstreetcam .sequence') .classed('highlighted', function(d) { return d.properties.key === hoveredSequenceKey; }) .classed('currentView', function(d) { return d.properties.key === selectedSequenceKey; }); diff --git a/modules/svg/layers.js b/modules/svg/layers.js index ffe380c89..9ece25a64 100644 --- a/modules/svg/layers.js +++ b/modules/svg/layers.js @@ -33,9 +33,9 @@ export function svgLayers(projection, context) { { id: 'keepRight', layer: svgKeepRight(projection, context, dispatch) }, { id: 'improveOSM', layer: svgImproveOSM(projection, context, dispatch) }, { id: 'streetside', layer: svgStreetside(projection, context, dispatch)}, - { id: 'mapillary-images', layer: svgMapillaryImages(projection, context, dispatch) }, + { id: 'mapillary', layer: svgMapillaryImages(projection, context, dispatch) }, { id: 'mapillary-signs', layer: svgMapillarySigns(projection, context, dispatch) }, - { id: 'openstreetcam-images', layer: svgOpenstreetcamImages(projection, context, dispatch) }, + { id: 'openstreetcam', layer: svgOpenstreetcamImages(projection, context, dispatch) }, { id: 'debug', layer: svgDebug(projection, context, dispatch) }, { id: 'geolocate', layer: svgGeolocate(projection, context, dispatch) }, { id: 'touch', layer: svgTouch(projection, context, dispatch) } diff --git a/modules/svg/mapillary_images.js b/modules/svg/mapillary_images.js index e6458c29f..188183d31 100644 --- a/modules/svg/mapillary_images.js +++ b/modules/svg/mapillary_images.js @@ -51,7 +51,6 @@ export function svgMapillaryImages(projection, context, dispatch) { var service = getService(); if (!service) return; - service.loadViewer(context); editOn(); layer @@ -258,7 +257,7 @@ export function svgMapillaryImages(projection, context, dispatch) { var enabled = svgMapillaryImages.enabled; var service = getService(); - layer = selection.selectAll('.layer-mapillary-images') + layer = selection.selectAll('.layer-mapillary') .data(service ? [0] : []); layer.exit() @@ -266,7 +265,7 @@ export function svgMapillaryImages(projection, context, dispatch) { var layerEnter = layer.enter() .append('g') - .attr('class', 'layer-mapillary-images') + .attr('class', 'layer-mapillary') .style('display', enabled ? 'block' : 'none'); layerEnter diff --git a/modules/svg/mapillary_signs.js b/modules/svg/mapillary_signs.js index c282d5363..ff4f06a1a 100644 --- a/modules/svg/mapillary_signs.js +++ b/modules/svg/mapillary_signs.js @@ -34,7 +34,6 @@ export function svgMapillarySigns(projection, context, dispatch) { var service = getService(); if (!service) return; - service.loadViewer(context); editOn(); } diff --git a/modules/svg/openstreetcam_images.js b/modules/svg/openstreetcam_images.js index ccc7f55d1..869f5d4d6 100644 --- a/modules/svg/openstreetcam_images.js +++ b/modules/svg/openstreetcam_images.js @@ -36,7 +36,6 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { var service = getService(); if (!service) return; - service.loadViewer(context); editOn(); layer @@ -195,7 +194,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { var enabled = svgOpenstreetcamImages.enabled, service = getService(); - layer = selection.selectAll('.layer-openstreetcam-images') + layer = selection.selectAll('.layer-openstreetcam') .data(service ? [0] : []); layer.exit() @@ -203,7 +202,7 @@ export function svgOpenstreetcamImages(projection, context, dispatch) { var layerEnter = layer.enter() .append('g') - .attr('class', 'layer-openstreetcam-images') + .attr('class', 'layer-openstreetcam') .style('display', enabled ? 'block' : 'none'); layerEnter diff --git a/modules/svg/streetside.js b/modules/svg/streetside.js index 47b0f1dac..b0ef73c12 100644 --- a/modules/svg/streetside.js +++ b/modules/svg/streetside.js @@ -46,7 +46,6 @@ export function svgStreetside(projection, context, dispatch) { var service = getService(); if (!service) return; - service.loadViewer(context); editOn(); layer diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index 9e7e26d8a..ca8d8131a 100644 --- a/modules/ui/map_data.js +++ b/modules/ui/map_data.js @@ -117,7 +117,7 @@ export function uiMapData(context) { function drawPhotoItems(selection) { - var photoKeys = ['streetside', 'mapillary-images', 'mapillary-signs', 'openstreetcam-images']; + var photoKeys = context.photos().overlayLayerIDs(); var photoLayers = layers.all().filter(function(obj) { return photoKeys.indexOf(obj.id) !== -1; }); var data = photoLayers.filter(function(obj) { return obj.layer.supported(); }); @@ -156,10 +156,11 @@ export function uiMapData(context) { var labelEnter = liEnter .append('label') .each(function(d) { - var titleID = d.id.replace('-', '_') + '.tooltip'; - if (d.id === 'mapillary-signs') { - titleID = 'mapillary.signs.tooltip'; - } + var titleID; + 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'; d3_select(this) .call(tooltip() .title(t(titleID)) @@ -176,8 +177,6 @@ export function uiMapData(context) { .append('span') .text(function(d) { var id = d.id; - if (id === 'mapillary-images') id = 'mapillary'; - if (id === 'openstreetcam-images') id = 'openstreetcam'; if (id === 'mapillary-signs') id = 'photo_overlays.traffic_signs'; return t(id.replace('-', '_') + '.title'); }); diff --git a/modules/ui/photoviewer.js b/modules/ui/photoviewer.js index ed20dbba6..c700ddf0d 100644 --- a/modules/ui/photoviewer.js +++ b/modules/ui/photoviewer.js @@ -49,6 +49,9 @@ export function uiPhotoviewer(context) { buildResizeListener(selection, 'resize', dispatch, { resizeOnY: true }) ); + services.streetside.loadViewer(context); + services.mapillary.loadViewer(context); + services.openstreetcam.loadViewer(context); function buildResizeListener(target, eventName, dispatch, options) { var resizeOnX = !!options.resizeOnX; diff --git a/test/spec/svg/layers.js b/test/spec/svg/layers.js index 9009dcc2d..83d659080 100644 --- a/test/spec/svg/layers.js +++ b/test/spec/svg/layers.js @@ -33,9 +33,9 @@ describe('iD.svgLayers', function () { expect(d3.select(nodes[3]).classed('keepRight')).to.be.true; expect(d3.select(nodes[4]).classed('improveOSM')).to.be.true; expect(d3.select(nodes[5]).classed('streetside')).to.be.true; - expect(d3.select(nodes[6]).classed('mapillary-images')).to.be.true; + expect(d3.select(nodes[6]).classed('mapillary')).to.be.true; expect(d3.select(nodes[7]).classed('mapillary-signs')).to.be.true; - expect(d3.select(nodes[8]).classed('openstreetcam-images')).to.be.true; + expect(d3.select(nodes[8]).classed('openstreetcam')).to.be.true; expect(d3.select(nodes[9]).classed('debug')).to.be.true; expect(d3.select(nodes[10]).classed('geolocate')).to.be.true; expect(d3.select(nodes[11]).classed('touch')).to.be.true;