diff --git a/src/OpenLayers.Blazor/Internal/Layer.cs b/src/OpenLayers.Blazor/Internal/Layer.cs index 04e8453..67af321 100644 --- a/src/OpenLayers.Blazor/Internal/Layer.cs +++ b/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? Properties { get; set; } = new(); public dynamic? Options { get; set; } diff --git a/src/OpenLayers.Blazor/Layer.razor.cs b/src/OpenLayers.Blazor/Layer.razor.cs index f61a595..1d41543 100644 --- a/src/OpenLayers.Blazor/Layer.razor.cs +++ b/src/OpenLayers.Blazor/Layer.razor.cs @@ -261,6 +261,17 @@ public string? ServerType set => _internalLayer.Source.ServerType = value; } + /// + /// Set credentials of query only for TileWMS (set header Authorization Basic) + /// It should be the Base64 value of "user:password" + /// + [Parameter] + public string? Credentials + { + get => _internalLayer.Credentials; + set => _internalLayer.Credentials = value; + } + /// /// Gets or sets the layers the layer parameter for the source tile layers /// diff --git a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js b/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js index e2e9a87..df2c6b9 100644 --- a/src/OpenLayers.Blazor/wwwroot/openlayers_interop.js +++ b/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);