Add credentials for TileWMS

src/OpenLayers.Blazor/Internal/Layer.cs

@@ -20,6 +20,7 @@ public class Layer
     public double? MaxZoom { get; set; }
     public double Preload { get; set; } = 0;
     public Source Source { get; set; } = new();
+    public string? Credentials { get; set; }
     public bool UseInterimTilesOnError { get; set; } = true;
     public Dictionary<string, object>? Properties { get; set; } = new();
     public dynamic? Options { get; set; }

src/OpenLayers.Blazor/Layer.razor.cs

@@ -261,6 +261,17 @@ public string? ServerType
         set => _internalLayer.Source.ServerType = value;
     }
 
+    /// <summary>
+    ///     Set credentials of query only for TileWMS (set header Authorization Basic)
+    ///     It should be the Base64 value of "user:password"
+    /// </summary>
+    [Parameter]
+    public string? Credentials
+    {
+        get => _internalLayer.Credentials;
+        set => _internalLayer.Credentials = value;
+    }
+
     /// <summary>
     ///     Gets or sets the layers the layer parameter for the source tile layers
     /// </summary>

src/OpenLayers.Blazor/wwwroot/openlayers_interop.js

@@ -302,6 +302,23 @@ MapOL.prototype.prepareLayers = function(layers) {
                 break;
             case "TileWMS":
                 source = new ol.source.TileWMS(l.source);
+                if (l.credentials) {
+                    source.tileLoadFunction = function (tile, src) {
+                        var client = new XMLHttpRequest();
+                        client.responseType = 'blob';
+                        client.open('GET', src);
+                        client.setRequestHeader("Authorization", "Basic " + l.credentials);
+                        client.onload = function() {
+                            const url = URL.createObjectURL(client.response);
+                            const img = tile.getImage();
+                            img.addEventListener('load', function() {
+                                URL.revokeObjectURL(url);
+                            });
+                           img.src = url;
+                        };
+                        client.send();
+                    };
+                }
                 break;
             case "WMTS":
                 source = new ol.source.WMTS(l.source);