only show regional street-level photo providers in the available region

and disable selection checkbox if not zoomed in enough to load the photos

data/core.yaml

@@ -1440,6 +1440,8 @@ en:
   mapilio:
     title: Mapilio
     tooltip: "Street-level photos from Mapilio"
+  street_side:
+    minzoom_tooltip: "Zoom in to see street-side photos"
   note:
     note: Note
     title: Edit note

modules/services/vegbilder.js

@@ -1,12 +1,14 @@
 import { json as d3_json, xml as d3_xml} from 'd3-fetch';
 import { dispatch as d3_dispatch } from 'd3-dispatch';
 import { pairs as d3_pairs } from 'd3-array';
+import RBush from 'rbush';
+import { iso1A2Codes } from '@rapideditor/country-coder';
 import { t, localizer } from '../core/localizer';
 import { utilQsString, utilTiler, utilRebind, utilArrayUnion, utilStringQs} from '../util';
 import {geoExtent, geoScaleToZoom, geoVecAngle, geoVecEqual} from '../geo';
 import pannellumPhotoFrame from './pannellum_photo';
 import planePhotoFrame from './plane_photo';
-import RBush from 'rbush';
+
 
 const owsEndpoint = 'https://www.vegvesen.no/kart/ogc/vegbilder_1_0/ows?';
 const tileZoom = 14;
@@ -599,6 +601,11 @@ export default {
     }
   },
 
+  validHere: function(extent) {
+    const bbox = Object.values(extent.bbox());
+    return iso1A2Codes(bbox).includes('NO');
+  },
+
 
   cache: function () {
     return _vegbilderCache;

modules/svg/kartaview_images.js

@@ -301,6 +301,10 @@ export function svgKartaviewImages(projection, context, dispatch) {
         return !!getService();
     };
 
+    drawImages.rendered = function(zoom) {
+      return zoom >= minZoom;
+    };
+
 
     init();
     return drawImages;

modules/svg/mapilio_images.js

@@ -243,6 +243,10 @@ export function svgMapilioImages(projection, context, dispatch) {
         return !!getService();
     };
 
+    drawImages.rendered = function(zoom) {
+      return zoom >= minZoom;
+    };
+
 
     init();
     return drawImages;

modules/svg/mapillary_images.js

@@ -310,6 +310,10 @@ export function svgMapillaryImages(projection, context, dispatch) {
         return !!getService();
     };
 
+    drawImages.rendered = function(zoom) {
+      return zoom >= minZoom;
+    };
+
 
     init();
     return drawImages;

modules/svg/mapillary_map_features.js

@@ -208,6 +208,10 @@ export function svgMapillaryMapFeatures(projection, context, dispatch) {
         return !!getService();
     };
 
+    drawMapFeatures.rendered = function(zoom) {
+      return zoom >= minZoom;
+    };
+
 
     init();
     return drawMapFeatures;

modules/svg/mapillary_position.js

@@ -157,6 +157,10 @@ export function svgMapillaryPosition(projection, context) {
         return !!getService();
     };
 
+    drawImages.rendered = function(zoom) {
+      return zoom >= minZoom;
+    };
+
 
     init();
     return drawImages;

modules/svg/mapillary_signs.js

@@ -197,6 +197,10 @@ export function svgMapillarySigns(projection, context, dispatch) {
         return !!getService();
     };
 
+    drawSigns.rendered = function(zoom) {
+      return zoom >= minZoom;
+    };
+
 
     init();
     return drawSigns;

modules/svg/streetside.js

@@ -379,6 +379,10 @@ export function svgStreetside(projection, context, dispatch) {
         return !!getService();
     };
 
+    drawImages.rendered = function(zoom) {
+      return zoom >= minZoom;
+    };
+
     init();
 
     return drawImages;

modules/svg/vegbilder.js

@@ -371,6 +371,15 @@ export function svgVegbilder(projection, context, dispatch) {
     return !!getService();
   };
 
+  drawImages.rendered = function(zoom) {
+    return zoom >= minZoom;
+  };
+
+  drawImages.validHere = function(extent, zoom) {
+    return zoom >= (minZoom - 2)
+        && getService().validHere(extent);
+  };
+
   init();
 
   return drawImages;

modules/ui/sections/photo_overlays.js

@@ -1,3 +1,4 @@
+import _debounce from 'lodash-es/debounce';
 import {
     select as d3_select
 } from 'd3-selection';
@@ -33,7 +34,14 @@ export function uiSectionPhotoOverlays(context) {
     function drawPhotoItems(selection) {
         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(); });
+        var data = photoLayers.filter(function(obj) {
+            if (!obj.layer.supported()) return false;
+            if (layerEnabled(obj)) return true;
+            if (typeof obj.layer.validHere === 'function') {
+                return obj.layer.validHere(context.map().extent(), context.map().zoom());
+            }
+            return true;
+        });
 
         function layerSupported(d) {
             return d.layer && d.layer.supported();
@@ -41,6 +49,9 @@ export function uiSectionPhotoOverlays(context) {
         function layerEnabled(d) {
             return layerSupported(d) && d.layer.enabled();
         }
+        function layerRendered(d) {
+            return d.layer.rendered?.(context.map().zoom()) ?? true;
+        }
 
         var ul = selection
             .selectAll('.layer-list-photos')
@@ -77,7 +88,13 @@ export function uiSectionPhotoOverlays(context) {
                 else titleID = d.id.replace(/-/g, '_') + '.tooltip';
                 d3_select(this)
                     .call(uiTooltip()
-                        .title(() => t.append(titleID))
+                        .title(() => {
+                            if (!layerRendered(d)) {
+                                return t.append('street_side.minzoom_tooltip');
+                            } else {
+                                return t.append(titleID);
+                            }
+                        })
                         .placement('top')
                     );
             });
@@ -100,6 +117,7 @@ export function uiSectionPhotoOverlays(context) {
             .merge(liEnter)
             .classed('active', layerEnabled)
             .selectAll('input')
+            .property('disabled', d => !layerRendered(d))
             .property('checked', layerEnabled);
     }
 
@@ -320,5 +338,13 @@ export function uiSectionPhotoOverlays(context) {
     context.layers().on('change.uiSectionPhotoOverlays', section.reRender);
     context.photos().on('change.uiSectionPhotoOverlays', section.reRender);
 
+    context.map()
+        .on('move.background_list',
+            _debounce(function() {
+                // layers in-view may have changed due to map move
+                window.requestIdleCallback(section.reRender);
+            }, 1000)
+        );
+
     return section;
 }