Add photo overlay filter options for hiding flat and pano photos (close #5433)

modules/ui/map_data.js

@@ -178,7 +178,7 @@ export function uiMapData(context) {
                 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';
+                if (id === 'mapillary-signs') id = 'photo_overlays.traffic_signs';
                 return t(id.replace('-', '_') + '.title');
             });
 
@@ -191,6 +191,70 @@ export function uiMapData(context) {
             .property('checked', layerEnabled);
     }
 
+    function drawPhotoTypeItems(selection) {
+        var data = context.photos().allPhotoTypes();
+
+        function typeEnabled(d) {
+            return context.photos().showsPhotoType(d);
+        }
+
+        var ul = selection
+            .selectAll('.layer-list-photo-types')
+            .data(context.photos().shouldFilterByPhotoType() ? [0] : []);
+
+        ul.exit()
+            .remove();
+
+        ul = ul.enter()
+            .append('ul')
+            .attr('class', 'layer-list layer-list-photo-types')
+            .merge(ul);
+
+        var li = ul.selectAll('.list-item-photo-types')
+            .data(data);
+
+        li.exit()
+            .remove();
+
+        var liEnter = li.enter()
+            .append('li')
+            .attr('class', function(d) {
+                return 'list-item-photo-types list-item-' + d;
+            });
+
+        var labelEnter = liEnter
+            .append('label')
+            .each(function(d) {
+                d3_select(this)
+                    .call(tooltip()
+                        .title(t('photo_overlays.photo_type.' + d + '.tooltip'))
+                        .placement('top')
+                    );
+            });
+
+        labelEnter
+            .append('input')
+            .attr('type', 'checkbox')
+            .on('change', function(d) {
+                context.photos().togglePhotoType(d);
+                update();
+            });
+
+        labelEnter
+            .append('span')
+            .text(function(d) {
+                return t('photo_overlays.photo_type.' + d + '.title');
+            });
+
+
+        // Update
+        li
+            .merge(liEnter)
+            .classed('active', typeEnabled)
+            .selectAll('input')
+            .property('checked', typeEnabled);
+    }
+
 
     function drawOsmItems(selection) {
         var osmKeys = ['osm', 'notes'];
@@ -605,7 +669,8 @@ export function uiMapData(context) {
 
     function updatePhotoOverlays() {
         _photoOverlayContainer
-            .call(drawPhotoItems);
+            .call(drawPhotoItems)
+            .call(drawPhotoTypeItems);
     }
 
     function updateDataLayers() {
@@ -759,7 +824,7 @@ export function uiMapData(context) {
             .append('div')
             .attr('class', 'map-data-photo-overlays')
             .call(uiDisclosure(context, 'photo_overlays', false)
-                .title(t('map_data.photo_overlays'))
+                .title(t('photo_overlays.title'))
                 .content(renderPhotoOverlays)
             );