allow tiles to be underzoomed slightly in minimap

preventing minimap from blacking out "too soon" on low map zoom, fixes #10653. Closes #10694 and #10680

CHANGELOG.md

@@ -47,8 +47,9 @@ _Breaking developer changes, which may affect downstream projects or sites that
 * Fix unsolvable validator error triggered by regional presets ([#10459])
 * Render highway direction cones only on matching parent ways ([#9013])
 * Prevent edit menu from being covered up by street level imagery or other map overlay panels ([#10495])
-* Fix grid lines from showing up on background map tiles in certain situations (semi-transparent tiles or fractional browser zoom level) ([#10594], thanks [@Nekzuris]) 
+* Fix grid lines from showing up on background map tiles in certain situations (semi-transparent tiles or fractional browser zoom level) ([#10594], thanks [@Nekzuris])
 * Prevent search results from sometimes getting stuck in the highlighted state when mouse-hovering the list of search results while typing ([#10661])
+* Allow tiles in minimap to be slightly underzoomed, preventing them from blacking out on low map zoom levels ([#10653])
 #### :earth_asia: Localization
 * Update Sinitic languages in the Multilingual Names field ([#10488], thanks [@winstonsung])
 * Update the list of languages in the Wikipedia field ([#10489])
@@ -72,6 +73,7 @@ _Breaking developer changes, which may affect downstream projects or sites that
 [#10624]: https://github.com/openstreetmap/iD/issues/10624
 [#10634]: https://github.com/openstreetmap/iD/issues/10634
 [#10650]: https://github.com/openstreetmap/iD/issues/10650
+[#10653]: https://github.com/openstreetmap/iD/issues/10653
 [#10684]: https://github.com/openstreetmap/iD/pull/10684
 [@winstonsung]: https://github.com/winstonsung/
 [@Nekzuris]: https://github.com/Nekzuris

modules/renderer/background_source.js

@@ -230,8 +230,9 @@ export function rendererBackgroundSource(data) {
     };
 
 
-    source.validZoom = function(z) {
-        return source.zoomExtent[0] <= z &&
+    source.validZoom = function(z, underzoom) {
+        if (underzoom === undefined) underzoom = 0;
+        return source.zoomExtent[0] - underzoom <= z &&
             (source.overzoom || source.zoomExtent[1] > z);
     };
 

modules/renderer/tile_layer.js

@@ -15,6 +15,7 @@ export function rendererTileLayer(context) {
     var _tileOrigin;
     var _zoom;
     var _source;
+    var _underzoom = 0;
     var _epsilon = 0;
 
     // Workaround to remove visible grid around tile borders on Chrome with dynamic epsilon for specific browser zoom levels
@@ -116,13 +117,13 @@ export function rendererTileLayer(context) {
 
     // Derive the tiles onscreen, remove those offscreen and position them.
     // Important that this part not depend on `_projection` because it's
-    // rentered when tiles load/error (see #644).
+    // rendered when tiles load/error (see #644).
     function render(selection) {
         if (!_source) return;
         var requests = [];
         var showDebug = context.getDebug('tile') && !_source.overlay;
 
-        if (_source.validZoom(_zoom)) {
+        if (_source.validZoom(_zoom, _underzoom)) {
             tiler.skipNullIsland(!!_source.overlay);
 
             tiler().forEach(function(d) {
@@ -307,5 +308,12 @@ export function rendererTileLayer(context) {
     };
 
 
+    background.underzoom = function(amount) {
+        if (!arguments.length) return _underzoom;
+        _underzoom = amount;
+        return background;
+    };
+
+
     return background;
 }

modules/ui/map_in_map.js

@@ -13,7 +13,8 @@ import { utilSetTransform } from '../util';
 export function uiMapInMap(context) {
 
     function mapInMap(selection) {
-        var backgroundLayer = rendererTileLayer(context);
+        var backgroundLayer = rendererTileLayer(context)
+            .underzoom(2);
         var overlayLayers = {};
         var projection = geoRawMercator();
         var dataLayer = svgData(projection, context).showLabels(false);