From bb9e8d6d86066fb34f0a1a38fb96abf4a9d174d0 Mon Sep 17 00:00:00 2001 From: Quincy Morgan Date: Thu, 14 Mar 2019 11:10:25 -0400 Subject: [PATCH] Move photo overlays to their own section in the map data pane (close #5913) --- css/80_app.css | 7 ++++++ data/core.yaml | 14 ++++++----- dist/locales/en.json | 21 ++++++++++------- modules/ui/map_data.js | 53 ++++++++++++++++++++++++++++++++++++++---- 4 files changed, 76 insertions(+), 19 deletions(-) diff --git a/css/80_app.css b/css/80_app.css index 7a5f02863..1c9f5c65d 100644 --- a/css/80_app.css +++ b/css/80_app.css @@ -3127,6 +3127,13 @@ div.full-screen > button:hover { cursor: pointer; } +[dir='ltr'] .layer-list .indented label { + padding-left: 24px; +} +[dir='rtl'] .layer-list .indented label { + padding-right: 24px; +} + .layer-list label > span { display: block; overflow: hidden; diff --git a/data/core.yaml b/data/core.yaml index cfc287768..387270a8e 100644 --- a/data/core.yaml +++ b/data/core.yaml @@ -527,8 +527,11 @@ en: tooltip: "Drag and drop a data file onto the page, or click the button to setup" title: Custom Map Data zoom: Zoom to data + photo_overlays: Photo Overlays fill_area: Fill Areas map_features: Map Features + traffic_signs: + title: Traffic Signs autohidden: "These features have been automatically hidden because too many would be shown on the screen. You can zoom in to edit them." osmhidden: "These features have been automatically hidden because the OpenStreetMap layer is hidden." feature: @@ -946,22 +949,21 @@ en: description: '{var1} may have an outdated URL: {var2} did not contain keywords "{var3}".' streetside: tooltip: "Streetside photos from Microsoft" - title: "Photo Overlay (Bing Streetside)" + title: "Bing Streetside" report: Report a privacy concern with this image view_on_bing: "View on Bing Maps" hires: "High resolution" mapillary_images: tooltip: "Street-level photos from Mapillary" - title: "Photo Overlay (Mapillary)" - mapillary_signs: - tooltip: "Traffic signs from Mapillary (must enable Photo Overlay)" - title: "Traffic Sign Overlay (Mapillary)" mapillary: + title: Mapillary + signs: + tooltip: "Traffic signs from Mapillary" view_on_mapillary: "View this image on Mapillary" openstreetcam_images: tooltip: "Street-level photos from OpenStreetCam" - title: "Photo Overlay (OpenStreetCam)" openstreetcam: + title: OpenStreetCam view_on_openstreetcam: "View this image on OpenStreetCam" note: note: Note diff --git a/dist/locales/en.json b/dist/locales/en.json index 57a3d42c5..6285a7ffd 100644 --- a/dist/locales/en.json +++ b/dist/locales/en.json @@ -644,8 +644,12 @@ "zoom": "Zoom to data" } }, + "photo_overlays": "Photo Overlays", "fill_area": "Fill Areas", "map_features": "Map Features", + "traffic_signs": { + "title": "Traffic Signs" + }, "autohidden": "These features have been automatically hidden because too many would be shown on the screen. You can zoom in to edit them.", "osmhidden": "These features have been automatically hidden because the OpenStreetMap layer is hidden." }, @@ -1174,27 +1178,26 @@ }, "streetside": { "tooltip": "Streetside photos from Microsoft", - "title": "Photo Overlay (Bing Streetside)", + "title": "Bing Streetside", "report": "Report a privacy concern with this image", "view_on_bing": "View on Bing Maps", "hires": "High resolution" }, "mapillary_images": { - "tooltip": "Street-level photos from Mapillary", - "title": "Photo Overlay (Mapillary)" - }, - "mapillary_signs": { - "tooltip": "Traffic signs from Mapillary (must enable Photo Overlay)", - "title": "Traffic Sign Overlay (Mapillary)" + "tooltip": "Street-level photos from Mapillary" }, "mapillary": { + "title": "Mapillary", + "signs": { + "tooltip": "Traffic signs from Mapillary" + }, "view_on_mapillary": "View this image on Mapillary" }, "openstreetcam_images": { - "tooltip": "Street-level photos from OpenStreetCam", - "title": "Photo Overlay (OpenStreetCam)" + "tooltip": "Street-level photos from OpenStreetCam" }, "openstreetcam": { + "title": "OpenStreetCam", "view_on_openstreetcam": "View this image on OpenStreetCam" }, "note": { diff --git a/modules/ui/map_data.js b/modules/ui/map_data.js index fe7fcf28e..f0e4498c5 100644 --- a/modules/ui/map_data.js +++ b/modules/ui/map_data.js @@ -30,6 +30,7 @@ export function uiMapData(context) { var _fillSelected = context.storage('area-fill') || 'partial'; var _shown = false; var _dataLayerContainer = d3_select(null); + var _photoOverlayContainer = d3_select(null); var _fillList = d3_select(null); var _featureList = d3_select(null); var _QAList = d3_select(null); @@ -144,14 +145,24 @@ export function uiMapData(context) { var liEnter = li.enter() .append('li') - .attr('class', function(d) { return 'list-item-photos list-item-' + d.id; }); + .attr('class', function(d) { + var classes = 'list-item-photos list-item-' + d.id; + if (d.id === 'mapillary-signs') { + classes += ' indented'; + } + return classes; + }); var labelEnter = liEnter .append('label') .each(function(d) { + var titleID = d.id.replace('-', '_') + '.tooltip'; + if (d.id === 'mapillary-signs') { + titleID = 'mapillary.signs.tooltip'; + } d3_select(this) .call(tooltip() - .title(t(d.id.replace('-', '_') + '.tooltip')) + .title(t(titleID)) .placement('top') ); }); @@ -163,7 +174,13 @@ export function uiMapData(context) { labelEnter .append('span') - .text(function(d) { return t(d.id.replace('-', '_') + '.title'); }); + .text(function(d) { + var id = d.id; + if (id === 'mapillary-images') id = 'mapillary'; + if (id === 'openstreetcam-images') id = 'openstreetcam'; + if (id === 'mapillary-signs') id = 'map_data.traffic_signs'; + return t(id.replace('-', '_') + '.title'); + }); // Update @@ -548,6 +565,18 @@ export function uiMapData(context) { updateDataLayers(); } + function renderPhotoOverlays(selection) { + var container = selection.selectAll('.photo-overlay-container') + .data([0]); + + _photoOverlayContainer = container.enter() + .append('div') + .attr('class', 'photo-overlay-container') + .merge(container); + + updatePhotoOverlays(); + } + function renderFillList(selection) { var container = selection.selectAll('.layer-fill-list') @@ -574,11 +603,15 @@ export function uiMapData(context) { updateFeatureList(); } + function updatePhotoOverlays() { + _photoOverlayContainer + .call(drawPhotoItems); + } + function updateDataLayers() { _dataLayerContainer .call(drawOsmItems) .call(drawQAItems) - .call(drawPhotoItems) .call(drawCustomDataItems) .call(drawVectorItems); // Beta - Detroit mapping challenge } @@ -598,6 +631,9 @@ export function uiMapData(context) { if (!_pane.select('.disclosure-wrap-data_layers').classed('hide')) { updateDataLayers(); } + if (!_pane.select('.disclosure-wrap-photo_overlays').classed('hide')) { + updatePhotoOverlays(); + } if (!_pane.select('.disclosure-wrap-fill_area').classed('hide')) { updateFillList(); } @@ -718,6 +754,15 @@ export function uiMapData(context) { .content(renderDataLayers) ); + // photo overlays + content + .append('div') + .attr('class', 'map-data-photo-overlays') + .call(uiDisclosure(context, 'photo_overlays', false) + .title(t('map_data.photo_overlays')) + .content(renderPhotoOverlays) + ); + // area fills content .append('div')