mouseHandler for addGeotiff (geoblaze.js)

NAMESPACE

@@ -24,6 +24,7 @@ export(addTileFolder)
 export(clip2sfc)
 export(colorOptions)
 export(garnishMap)
+export(imagequeryOptions)
 export(hideLogo)
 export(paintRules)
 export(removeHomeButton)

R/addGeoRaster.R

@@ -26,7 +26,7 @@
 #'   See \url{https://github.com/r-spatial/leafem/issues/25} for some examples.
 #' @param autozoom whether to automatically zoom to the full extent of the layer.
 #'   Default is \code{TRUE}
-#' @param ... currently not used.
+#' @param ... Further arguments passed to \code{\link[leafem]{addGeotiff}}.
 #'
 #' @return
 #' A leaflet map object.
@@ -98,7 +98,8 @@ addGeoRaster = function(map,
     , colorOptions = colorOptions
     , pixelValuesToColorFn = pixelValuesToColorFn
     , autozoom = autozoom
-  )
+    , ...
+    )
 
 }
 
@@ -144,6 +145,9 @@ addGeoRaster = function(map,
 #'   some examples.
 #' @param autozoom whether to automatically zoom to the full extent of the layer.
 #'   Default is \code{TRUE}
+#' @param imagequery If \code{TRUE} a leaflet control with the hovered/clicked
+#'   value will appear on the map.
+#' @param imagequeryOptions additional options for the control panel.
 #' @param ... currently not used.
 #'
 #' @return
@@ -195,6 +199,8 @@ addGeotiff = function(map,
                       rgb = FALSE,
                       pixelValuesToColorFn = NULL,
                       autozoom = TRUE,
+                      imagequery = TRUE,
+                      imagequeryOptions = NULL,
                       ...) {
 
   if (inherits(map, "mapview")) map = mapview2leaflet(map)
@@ -208,6 +214,13 @@ addGeotiff = function(map,
   if (is.null(layerId)) layerId = group
   layerId = gsub("\\.", "_", layerId)
 
+  if (grepl("\\s", layerId)) {
+    warning("The layerId is invalid. Maybe it contains spaces?")
+  }
+
+  if (missing(imagequeryOptions)) imagequeryOptions <- imagequeryOptions()
+  imagequeryOptions[["imagequery"]] <- imagequery
+
   if (is.null(colorOptions)) {
     colorOptions = colorOptions()
   }
@@ -285,6 +298,7 @@ addGeotiff = function(map,
       , rgb
       , pixelValuesToColorFn
       , autozoom
+      , imagequeryOptions
     )
   } else {
     map$dependencies <- c(
@@ -309,6 +323,7 @@ addGeotiff = function(map,
       , rgb
       , pixelValuesToColorFn
       , autozoom
+      , imagequeryOptions
     )
   }
 
@@ -326,24 +341,17 @@ addGeotiff = function(map,
 #'
 #' @param map the map to add the COG to.
 #' @param url url to the COG file to render.
-#' @param group he name of the group this COG should belong to.
-#' @param layerId the layerId.
-#' @param resolution the target resolution for the simple nearest neighbor
-#'   interpolation. Larger values will result in more detailed rendering,
-#'   but may impact performance. Default is 96 (pixels).
-#' @param opacity image opacity.
-#' @param options see [leaflet](tileOptions).
 #' @param colorOptions list defining the palette, breaks and na.color to be used.
 #'   Currently not used.
 #' @param pixelValuesToColorFn optional JS function to be passed to the browser.
 #'   Can be used to fine tune and manipulate the color mapping.
 #'   See examples & \url{https://github.com/r-spatial/leafem/issues/25} for
 #'   some examples. Currently not used.
-#' @param autozoom whether to automatically zoom to the full extent of the layer.
-#'   Default is \code{TRUE}.
 #' @param rgb logical, whether to render Geotiff as RGB. Currently not used.
 #' @param ... currently not used.
 #'
+#' @inheritParams addGeotiff
+#'
 #' @return
 #' A leaflet map object.
 #'
@@ -376,18 +384,32 @@ addCOG = function(map,
                   resolution = 96,
                   opacity = 0.8,
                   options = leaflet::tileOptions(),
-                  colorOptions = NULL, #colorOptions(),
+                  colorOptions = NULL,
                   pixelValuesToColorFn = NULL,
                   autozoom = TRUE,
                   rgb = FALSE,
+                  imagequery = TRUE,
+                  imagequeryOptions = NULL,
                   ...) {
 
+  if (is.null(group))
+    group = basename(url)
+
+  if (is.null(layerId)) layerId = group
+  layerId = gsub("\\.", "_", layerId)
+  if (grepl("\\s", layerId)) {
+    warning("The layerId is invalid. Maybe it contains spaces?")
+  }
+
   map$dependencies <- c(
     map$dependencies
     , leafletGeoRasterDependencies()
     , chromaJsDependencies()
   )
 
+  if (missing(imagequeryOptions)) imagequeryOptions <- imagequeryOptions()
+  imagequeryOptions[["imagequery"]] <- imagequery
+
   leaflet::invokeMethod(
     map
     , data = leaflet::getMapData(map)
@@ -402,10 +424,31 @@ addCOG = function(map,
     , pixelValuesToColorFn
     , autozoom
     , rgb
+    , imagequeryOptions
   )
 }
 
 
+#' Imagequery options for addGeoRaster, addGeotiff and addCOG
+#'
+#' @inheritParams addImageQuery
+#' @export
+imagequeryOptions <- function(className = "info legend",
+                              position = c("topright", "topleft", "bottomleft", "bottomright"),
+                              type = c("mousemove", "click"),
+                              digits = NULL,
+                              prefix = "Layer") {
+  type = match.arg(type)
+  position <- match.arg(position)
+  list(
+    className = className,
+    position = position,
+    type = type,
+    digits = digits,
+    prefix = prefix
+  )
+}
+
 #' Color options for addGeoRaster and addGeotiff
 #'
 #' @param palette the color palette to use. Can be a set of colors or a
@@ -441,6 +484,7 @@ leafletGeoRasterDependencies = function() {
       system.file("htmlwidgets/lib/georaster-for-leaflet", package = "leafem"),
       script = c(
         "georaster.min.js"
+        , "geoblaze.js"
         , "georaster-layer-for-leaflet.min.js"
         , "georaster-binding.js"
         , "georasterUtils.js"
@@ -473,3 +517,4 @@ extractBands = function(fun) {
   bands = as.numeric(unlist(regmatches(band_calc, idx_r)))
   return(sort(unique(bands)))
 }
+

R/utils.R

@@ -187,4 +187,4 @@ makeLabels <- function(x, zcol = NULL) {
     lab <- rownames(x)
   } else lab <- as.character(as.data.frame(x)[, zcol])
   return(lab)
-}
+}

inst/htmlwidgets/lib/georaster-for-leaflet/georaster-binding.js

@@ -1,3 +1,76 @@
+function mouseHandler(map, georaster, layerId, group, eventName, options) {
+  return function(e) {
+
+    let outputWidget = getInfoLegend(layerId);
+
+    if (!(map.layerManager.getVisibleGroups().includes(group))) {
+      $(outputWidget).hide();
+      return;
+    }
+
+    let latLng = this.mouseEventToLatLng(e.originalEvent);
+
+    let val = geoblaze.identify(georaster, [latLng.lng, latLng.lat]);
+
+    let finaltype = "georaster_" + options.type;
+    let query = options.imagequery && finaltype == eventName;
+
+    if (val) {
+      if (query) {
+        outputWidget.innerHTML = renderInfo(val, layerId, options.digits, options.prefix);
+      }
+      let eventInfo = $.extend({
+        id: layerId,
+        ".nonce": Math.random(),  // force reactivity
+        group: group ? group : null,
+        value: val[0]
+        },
+        e.latlng
+      );
+      if (HTMLWidgets.shinyMode) {
+        Shiny.onInputChange(map.id + "_" + eventName, eventInfo);
+      }
+    } else {
+      if (query) {
+        $(outputWidget).hide();
+      }
+      if (HTMLWidgets.shinyMode) {
+        Shiny.onInputChange(map.id + "_" + eventName, null);
+      }
+    }
+  };
+}
+function renderInfo(val, layerId, digits, prefix) {
+  $(document.getElementById("rasterValues-" + layerId)).show();
+  let text = "";
+  if(digits === "null" || digits === null) {
+    text = "<small>"+ prefix+ " <strong>"+ layerId + ": </strong>"+ val + "</small>";
+  } else {
+    text = "<small>"+ prefix+ " <strong>"+ layerId + ": </strong>"+ val[0].toFixed(digits)+ "</small>";
+  }
+  return text;
+}
+function getInfoLegend(layerId) {
+  let element = window.document.getElementById("rasterValues-" + layerId);
+  if (element === null) {
+    console.log("leafem: No control widget found in Leaflet setup. Can't show layer info.");
+  }
+  return element;
+}
+function makeControl(layerId, options, map) {
+  info = L.control({
+    position: options.position ? options.position : "topright"
+  });
+  let ctrl_nm = "rasterValues-" + layerId;
+  info.onAdd = function(map) {
+    this._div = L.DomUtil.create('div', options.className + ' rastervals');
+    this._div.id = ctrl_nm;
+    this._div.innerHTML = "";
+    return this._div;
+  };
+  info.addTo(map);
+}
+
 LeafletWidget.methods.addGeotiff = function (url,
                                              group,
                                              layerId,
@@ -9,7 +82,8 @@ LeafletWidget.methods.addGeotiff = function (url,
                                              colorOptions,
                                              rgb,
                                              pixelValuesToColorFn,
-                                             autozoom) {
+                                             autozoom,
+                                             imagequeryOptions) {
 
   var map = this;
 
@@ -30,6 +104,11 @@ LeafletWidget.methods.addGeotiff = function (url,
     pane = options.pane;
   }
 
+  // Create a container div for the control
+  if (imagequeryOptions && imagequeryOptions.imagequery == true) {
+    makeControl(layerId, imagequeryOptions, map)
+  }
+
   // fetch data and add to map
   fetch(data_fl)
     .then(response => response.arrayBuffer())
@@ -122,14 +201,19 @@ LeafletWidget.methods.addGeotiff = function (url,
           opacity: opacity,
           pane: pane
         });
-        map.layerManager.addLayer(layer, null, layerId, group);
 
+        map.layerManager.addLayer(layer, "image", layerId, group);
         if (autozoom) {
           map.fitBounds(layer.getBounds());
         }
+
+        map.on("click", mouseHandler(map, georaster, layerId,
+          group, "georaster_click", imagequeryOptions), this);
+        map.on("mousemove", mouseHandler(map, georaster, layerId,
+          group, "georaster_mousemove", imagequeryOptions), this);
+
       });
     });
-
 };
 
 
@@ -142,7 +226,8 @@ LeafletWidget.methods.addCOG = function (url,
                                          colorOptions,
                                          pixelValuesToColorFn,
                                          autozoom,
-                                         rgb) {
+                                         rgb,
+                                         imagequeryOptions) {
 
   var map = this;
   var pane;  // could also use let
@@ -152,23 +237,36 @@ LeafletWidget.methods.addCOG = function (url,
     pane = options.pane;
   }
 
+  // Create a container div for the control
+  if (imagequeryOptions && imagequeryOptions.imagequery == true) {
+    makeControl(layerId, imagequeryOptions, map)
+  }
+
   var layers = layers || {};
 
-  parseGeoraster(url).then(georaster => {
-    console.log("georaster:", georaster);
+  fetch(url).then((response) => {
+    response.arrayBuffer().then((arrayBuffer) => {
+      var georaster = parseGeoraster(arrayBuffer).then((georaster) => {
 
-    layers[layerId] = new GeoRasterLayer({
-      georaster,
-      resolution: resolution,
-      opacity: opacity,
-      pixelValuesToColorFn: pixelValuesToColorFn,
-      pane: pane
-    });
-    map.layerManager.addLayer(layers[layerId], null, layerId, group);
+        layers[layerId] = new GeoRasterLayer({
+          georaster,
+          resolution: resolution,
+          opacity: opacity,
+          pixelValuesToColorFn: pixelValuesToColorFn,
+          pane: pane
+        });
+        map.layerManager.addLayer(layers[layerId], null, layerId, group);
+        if (autozoom) {
+          map.fitBounds(layers[layerId].getBounds());
+        }
 
-    if (autozoom) {
-      map.fitBounds(layers[layerId].getBounds());
-    }
+        map.on("click", mouseHandler(map, layers[layerId].georasters[0], layerId,
+          group, "georaster_click", imagequeryOptions), this);
+        map.on("mousemove", mouseHandler(map, layers[layerId].georasters[0], layerId,
+          group, "georaster_mousemove", imagequeryOptions), this);
+
+      });
+    });
   });
 };