Change padding method, add max bounds, fix zoomlevels on toerisme vlaanderen theme

Logic/Actors/OverpassFeatureSource.ts

@@ -39,7 +39,7 @@ export default class OverpassFeatureSource implements FeatureSource {
     }
     private readonly _isActive: UIEventSource<boolean>;
     private readonly onBboxLoaded: (bbox: BBox, date: Date, layers: LayerConfig[]) => void;
-
+    private readonly padToTiles : number
     constructor(
         state: {
             readonly locationControl: UIEventSource<Loc>,
@@ -49,7 +49,8 @@ export default class OverpassFeatureSource implements FeatureSource {
             readonly overpassMaxZoom: UIEventSource<number>,
             readonly currentBounds: UIEventSource<BBox>
         },
-        options?: {
+        options: {
+            padToTiles: number,
             isActive?: UIEventSource<boolean>,
             relationTracker: RelationsTracker,
             onBboxLoaded?: (bbox: BBox, date: Date, layers: LayerConfig[]) => void
@@ -57,6 +58,7 @@ export default class OverpassFeatureSource implements FeatureSource {
 
         this.state = state
         this._isActive = options.isActive;
+        this.padToTiles = options.padToTiles;
         this.onBboxLoaded = options.onBboxLoaded
         this.relationsTracker = options.relationTracker
         const self = this;
@@ -109,11 +111,14 @@ export default class OverpassFeatureSource implements FeatureSource {
             return undefined;
         }
 
-        const bounds = this.state.currentBounds.data?.pad(this.state.layoutToUse.widenFactor)?.expandToTileBounds(14);
+        const bounds = this.state.currentBounds.data?.pad(this.state.layoutToUse.widenFactor)?.expandToTileBounds(this.padToTiles);
 
         if (bounds === undefined) {
             return undefined;
         }
+        console.log("Current bounds are", this.state.currentBounds.data," padded with",this.state.layoutToUse.widenFactor+":", 
+            this.state.currentBounds.data.pad(this.state.layoutToUse.widenFactor),
+            "Tileexpanded: ",this.state.currentBounds.data?.pad(this.state.layoutToUse.widenFactor)?.expandToTileBounds(this.padToTiles) )
         const self = this;
         
         

Logic/BBox.ts

@@ -116,16 +116,15 @@ export class BBox {
         return this.minLat
     }
 
-    pad(factor: number): BBox {
-        const latDiff = this.maxLat - this.minLat
-        const lat = (this.maxLat + this.minLat) / 2
-        const lonDiff = this.maxLon - this.minLon
-        const lon = (this.maxLon + this.minLon) / 2
+    pad(factor: number, maxIncrease = 2): BBox {
+        
+        const latDiff = Math.min(maxIncrease / 2, Math.abs(this.maxLat - this.minLat) * factor)
+        const lonDiff =Math.min(maxIncrease / 2, Math.abs(this.maxLon - this.minLon) * factor)
         return new BBox([[
-            lon - lonDiff * factor,
-            lat - latDiff * factor
-        ], [lon + lonDiff * factor,
-            lat + latDiff * factor]])
+            this.minLon - lonDiff,
+            this.minLat  - latDiff
+        ], [this.maxLon + lonDiff,
+            this.maxLat + latDiff]])
     }
 
     toLeaflet() {

Logic/FeatureSource/FeaturePipeline.ts

@@ -58,7 +58,7 @@ export default class FeaturePipeline {
     private readonly freshnesses = new Map<string, TileFreshnessCalculator>();
 
     private readonly oldestAllowedDate: Date = new Date(new Date().getTime() - 60 * 60 * 24 * 30 * 1000);
-    private readonly osmSourceZoomLevel = 14
+    private readonly osmSourceZoomLevel = 15
 
     constructor(
         handleFeatureSource: (source: FeatureSourceForLayer & Tiled) => void,
@@ -147,7 +147,7 @@ export default class FeaturePipeline {
                     // We split them up into tiles anyway as it is an OSM source
                     TiledFeatureSource.createHierarchy(src, {
                         layer: src.layer,
-                        minZoomLevel: 14,
+                        minZoomLevel: this.osmSourceZoomLevel,
                         dontEnforceMinZoom: true,
                         registerTile: (tile) => {
                             new RegisteringAllFromFeatureSourceActor(tile)
@@ -200,7 +200,7 @@ export default class FeaturePipeline {
         new PerLayerFeatureSourceSplitter(state.filteredLayers,
             (source) => TiledFeatureSource.createHierarchy(source, {
                 layer: source.layer,
-                minZoomLevel: 14,
+                minZoomLevel: this.osmSourceZoomLevel,
                 dontEnforceMinZoom: true,
                 maxFeatureCount: state.layoutToUse.clustering.minNeededElements,
                 maxZoomLevel: state.layoutToUse.clustering.maxZoom,
@@ -333,6 +333,7 @@ export default class FeaturePipeline {
         const self = this;
         const updater = new OverpassFeatureSource(state,
             {
+                padToTiles: this.osmSourceZoomLevel,
                 relationTracker: this.relationTracker,
                 isActive: useOsmApi.map(b => !b && overpassIsActive.data, [overpassIsActive]),
                 onBboxLoaded: ((bbox, date, downloadedLayers) => {

UI/BigComponents/ThemeIntroductionPanel.ts

@@ -50,13 +50,11 @@ export default class ThemeIntroductionPanel extends Combine {
             )
 
         super([
-            layout.description.Clone(),
-            "<br/><br/>",
+            layout.description.Clone().SetClass("blcok mb-4"),
             toTheMap,
-            loginStatus,
-            layout.descriptionTail?.Clone(),
-            "<br/>",
-            languagePicker,
+            loginStatus.SetClass("block"),
+            layout.descriptionTail?.Clone().SetClass("block mt-4"),
+            languagePicker.SetClass("block mt-4"),
             ...layout.CustomCodeSnippets()
         ])
 

assets/themes/toerisme_vlaanderen/toerisme_vlaanderen.json

@@ -14,7 +14,10 @@
     "nl": "Een kaart om toeristisch relevante info op aan te duiden"
   },
   "description": {
-    "nl": "Op deze kaart kan je info zien die relevant is voor toerisme, zoals:<br/><ul><li>Eetgelegenheden</li><li>Cafés en bars</li><li>(Fiets)oplaadpunten</li><li>Fietspompen, fietserverhuur en fietswinkels</li><li>Uitkijktorens</li><li>...</li></ul> Zie je fouten op de kaart? Dan kan je zelf makkelijk aanpasingen maken, die zichtbaar zijn voor iedereen. Hiervoor dien je een gratis OpenStreetMap account voor te maken.<br/><br/>Met de steun van Toerisme Vlaanderen<img src='./assets/themes/toerisme_vlaanderen/logo.png' />"
+    "nl": "Op deze kaart kan je info zien die relevant is voor toerisme, zoals:<br/><ul><li>Eetgelegenheden</li><li>Cafés en bars</li><li>(Fiets)oplaadpunten</li><li>Fietspompen, fietserverhuur en fietswinkels</li><li>Uitkijktorens</li><li>...</li></ul> Zie je fouten op de kaart? Dan kan je zelf makkelijk aanpasingen maken, die zichtbaar zijn voor iedereen. Hiervoor dien je een gratis OpenStreetMap account voor te maken."
+  },
+  "descriptionTail": {
+    "nl": "Met de steun van Toerisme Vlaanderen<img style='height:5rem; width: auto;' src='./assets/themes/toerisme_vlaanderen/logo.png' />"
   },
   "icon": "./assets/svg/star.svg",
   "startZoom": 8,
@@ -28,21 +31,37 @@
         "cafe_pub"
       ],
       "override": {
-        "minzoom": 16
+        "minzoom": 17
       }
     },
     {
-      "builtin":  "charging_station",
+      "builtin": [
+        "bench",
+        "waste_basket"
+      ],
       "override": {
-        "minzoom": 16
+        "minzoom": 19
       }
     },
-    "toilet",
-    "bench",
-    "waste_basket",
-    "bike_repair_station",
-    "binocular",
-    "observation_tower"
+    {
+      "builtin": [
+        "charging_station",
+        "toilet",
+        "bike_repair_station"
+      ],
+      "override": {
+        "minzoom": 14
+      }
+    },
+    {
+      "builtin": [
+        "binocular",
+        "observation_tower"
+      ],
+      "override": {
+        "minzoom": 10
+      }
+    }
   ],
   "hideFromOverview": true
 }