✨ Allow invalidating map size manually (#11)

Co-authored-by: Jason REBELO NEVES <REBEJas70@cfl.lu>

Author: igotinfected

src/Spillgebees.Blazor.Map.Samples/Spillgebees.Blazor.Map.Samples.Shared/Examples/ThemeExample.razor

@@ -7,7 +7,7 @@
 <div>
     <h3>Map theme switching</h3>
     <p>This example demonstrates how to switch between the default and dark themes.</p>
-    
+
     <!-- use tailwind classes to style the buttons -->
     <div class="mb-3 flex gap-2">
         <button
@@ -21,7 +21,7 @@
             Dark Theme
         </button>
     </div>
-    
+
     <CodeSnippet Code="@Code">
         <Component>
             <SgbMap MapOptions="@_mapOptions"
@@ -41,7 +41,7 @@
 
 // marker with tooltip
 private readonly List<Marker> _markers = [
-    new(""marker-1"", new Coordinate(49.5999673, 6.1342483), ""Luxembourg"", 
+    new(""marker-1"", new Coordinate(49.5999673, 6.1342483), ""Luxembourg"",
         Tooltip: new TooltipOptions(""This is a tooltip to test the dark theme styling!""))
 ];
 
@@ -52,7 +52,7 @@ private void SetTheme(MapTheme theme)
     StateHasChanged();
 }";
 
-    private readonly List<TileLayer> _tileLayers = [TileLayer.OpenStreetMap];
+    private readonly List<TileLayer> _tileLayers = [TileLayer.OpenDataBaseMap];
 
     private MapOptions _mapOptions = MapOptions.Default with
     {
@@ -63,7 +63,7 @@ private void SetTheme(MapTheme theme)
 
     private readonly List<Marker> _markers =
     [
-        new("marker-1", new Coordinate(49.5999673, 6.1342483), "Luxembourg", 
+        new("marker-1", new Coordinate(49.5999673, 6.1342483), "Luxembourg",
             Tooltip: new TooltipOptions("This is a tooltip to test the dark theme styling. Hover over the marker to see it!"))
     ];
 

src/Spillgebees.Blazor.Map/Components/BaseMap.razor.cs

@@ -109,6 +109,13 @@ public abstract partial class BaseMap : ComponentBase, IAsyncDisposable
     public ValueTask FitBoundsAsync(FitBoundsOptions options)
         => MapJs.FitBoundsAsync(JsRuntime, Logger.Value, MapReference, options);
 
+    /// <summary>
+    /// Triggers a size recalculation on the map. Useful when dynamically changing the height, especially if you notice
+    /// that the map has unloaded spots.
+    /// </summary>
+    public ValueTask InvalidateMapSizeAsync()
+        => MapJs.InvalidateSizeAsync(JsRuntime, Logger.Value, MapReference);
+
     public virtual async ValueTask DisposeAsync()
     {
         if (IsDisposing)
@@ -237,7 +244,4 @@ private ValueTask SetMapControlsAsync()
 
     private ValueTask SetMapOptionsAsync()
         => MapJs.SetMapOptionsAsync(JsRuntime, Logger.Value, MapReference, InternalMapOptions);
-
-    private ValueTask InvalidateMapSizeAsync()
-        => MapJs.InvalidateSizeAsync(JsRuntime, Logger.Value, MapReference);
 }

src/Spillgebees.Blazor.Map/Models/Layers/TileLayer.cs

@@ -45,4 +45,8 @@ public record TileLayer(
         UrlTemplate: "https://tileserver.memomaps.de/tilegen/{z}/{x}/{y}.png",
         Attribution: "&copy; <a href='memomaps.de'>memomaps.de</a> <a href='https://creativecommons.org/licenses/by-sa/2.0/CC-BY-SA'>CC-BY-SA</a> | &copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors"
         );
+
+    public static readonly TileLayer OpenDataBaseMap = new(
+        UrlTemplate: "https://wmts1.geoportail.lu/opendata/wmts/basemap/GLOBAL_WEBMERCATOR/{z}/{x}/{y}.png",
+        Attribution: "&copy;  <a href='https://data.public.lu/en/datasets/carte-de-base-webservices-wms-et-wmts'>OpenData</a> <a href='https://creativecommons.org/publicdomain/zero/1.0/'>CC0</a>/<a href='https://creativecommons.org/licenses/by/4.0/deed.en'>CC-BY</a> | &copy; <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors");
 }