Move photo overlays to their own section in the map data pane (close #5913)

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;

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

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": {

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')