add WMSHeader

NAMESPACE

@@ -31,6 +31,7 @@ export(addTangram)
 export(addTimeslider)
 export(addVelocity)
 export(addWMS)
+export(addWMSHeader)
 export(antpathOptions)
 export(arrowheadOptions)
 export(clearAntpath)

R/wmsheader.R

@@ -0,0 +1,44 @@
+wmsheaderDependency <- function() {
+  list(
+    htmltools::htmlDependency(
+      "lfx-wmsheader",
+      version = "1.0.0",
+      src = system.file("htmlwidgets/lfx-wmsheader", package = "leaflet.extras2"),
+      script = c(
+        "leaflet.wmsheader.js",
+        "leaflet.wmsheader-bindings.js"
+      )
+    )
+  )
+}
+
+#' Add WMS Layerwith custom Header
+#'
+#' @description
+#' Custom headers on Leaflet TileLayer WMS. It's a simple plugin that allow to
+#' set custom header for WMS interface.
+#'
+#' @inheritParams leaflet::addWMSTiles
+#' @inherit leaflet::addWMSTiles return
+#' @references \url{https://github.com/ticinum-aerospace/leaflet-wms-header}
+#' @family WMS Functions
+#' @export
+addWMSHeader <- function(map, baseUrl, layerId = NULL, group = NULL,
+                   options = WMSTileOptions(),
+                   attribution = NULL,
+                   layers = NULL,
+                   header = NULL,
+                   data = getMapData(map)) {
+  if (is.null(layers)) {
+    stop("layers is a required argument with comma-separated list of WMS layers to show")
+  }
+  options$attribution <- attribution
+  options$layers <- layers
+
+  map$dependencies <- c(map$dependencies, wmsheaderDependency())
+
+  invokeMethod(
+    map, data, "addWMSHeader", baseUrl, layerId,
+    group, options, header
+  )
+}

inst/examples/wmsheader_app.R

@@ -0,0 +1,34 @@
+library(shiny)
+library(leaflet)
+library(leaflet.extras2)
+
+
+ui <- fluidPage(
+  leafletOutput("map", height = "500px")
+)
+
+base64pwd <- paste0("user:strongpwd")
+
+server <- function(input, output, session) {
+  output$map <- renderLeaflet({
+    leaflet()  %>%
+      addTiles(group = "base") %>%
+      addWMSHeader(baseUrl = "http://localhost:8080/geoserver/wms",
+             layers = c("tiger:poi"),
+             group = "wmsgroup",
+             header = list(
+               list("header" = "Authorization",
+                    "value" = paste0("Basic ", base64enc::base64encode(charToRaw(base64pwd))) ),
+               list("header" = "content-type",
+                    "value" = "text/plain")
+             ),
+             options = leaflet::WMSTileOptions(
+               transparent = TRUE, format = "image/png")) %>%
+      addLayersControl(baseGroups = "base",
+                       overlayGroups = c("tiger:poi"))
+
+  })
+}
+shinyApp(ui, server)
+
+

inst/htmlwidgets/lfx-wmsheader/leaflet.wmsheader-bindings.js

@@ -0,0 +1,12 @@
+LeafletWidget.methods.addWMSHeader = function(baseUrl, layerId, group, options, header) {
+
+  console.log("addWMSHeader header:"); console.log(header)
+
+  if(options && options.crs) {
+    options.crs = LeafletWidget.utils.getCRS(options.crs);
+  }
+
+  // Add WMS source
+  var source = L.TileLayer.wmsHeader(baseUrl, options, [header], null);
+  this.layerManager.addLayer(source, "tile", layerId, group);
+};

inst/htmlwidgets/lfx-wmsheader/leaflet.wmsheader.js

@@ -0,0 +1,63 @@
+'use strict';
+
+async function fetchImage(url, callback, headers, abort) {
+  let _headers = {};
+  if (headers) {
+    headers.forEach(h => {
+      _headers[h.header] = h.value;
+    });
+  }
+  const controller = new AbortController();
+  const signal = controller.signal;
+  if (abort) {
+    abort.subscribe(() => {
+      controller.abort();
+    });
+  }
+  const f = await fetch(url, {
+    method: "GET",
+    headers: _headers,
+    mode: "cors",
+    signal: signal
+  });
+  const blob = await f.blob();
+  callback(blob);
+}
+
+L.TileLayer.WMSHeader = L.TileLayer.WMS.extend({
+  initialize: function (url, options, headers, abort, results) {
+    L.TileLayer.WMS.prototype.initialize.call(this, url, options);
+    this.headers = headers;
+    this.abort = abort;
+    this.results = results;
+  },
+  createTile(coords, done) {
+    const url = this.getTileUrl(coords);
+    const img = document.createElement("img");
+    img.setAttribute("role", "presentation");
+
+    self = this;
+
+    fetchImage(
+      url,
+      resp => {
+        const reader = new FileReader();
+        reader.onload = () => {
+          img.src = reader.result;
+          if (self.results) {
+            self.results.next(reader.result);
+          };
+        };
+        reader.readAsDataURL(resp);
+        done(null, img);
+      },
+      this.headers,
+      this.abort
+    );
+    return img;
+  }
+});
+
+L.TileLayer.wmsHeader = function (url, options, headers, abort, results) {
+  return new L.TileLayer.WMSHeader(url, options, headers, abort, results);
+};

package.json

@@ -16,11 +16,12 @@
     "d3-color": "^3.1.0",
     "d3-hexbin": "^0.2.2",
     "labelgun": "^6.1.0",
-    "leaflet": "^1.6.0",
+    "leaflet": "^1.9.4",
     "leaflet-ant-path": "^1.3.0",
     "leaflet-arrowheads": "^1.4.0",
     "leaflet-easyprint": "^2.1.9",
     "leaflet-geometryutil": "^0.10.1",
+    "leaflet-wms-header": "^1.0.13",
     "leaflet.heightgraph": "^1.4.0"
   }
 }