GeoTIFF / georaster-layer-for-leaflet

Display GeoTIFFs and soon other types of raster on your Leaflet Map
https://geotiff.github.io/georaster-layer-for-leaflet-example/
Apache License 2.0
283 stars 57 forks source link

get the tiff data of the current click? #104

Open wenhai03 opened 1 year ago

wenhai03 commented 1 year ago

I click on the map and want to get the tiff data of the current click, what should I do? eg: layer.on('click', function (e) { console.log('layer e -> ', e) /if (e.value !== null) { let v = e.value.toFixed(0) let html = ('Value: ' + v + '') L.popup() .setLatLng(e.latlng) .setContent(html) .openOn(map) }/ })

jcphill commented 1 year ago

This capability is not available but definitely something I will want. It should probably be implemented as layer.getValuesAtLatLng(e.latlng) and would need to be async to handle fetching from COGs.

DanielJDufour commented 1 year ago

I've wanted to keep analysis concerns separate from visualization, but I realize it's a balance that must be struck and I might need to recalibrate. You can see an example here that identifies pixel values at a point using geoblaze https://geotiff.github.io/georaster-layer-for-leaflet-example/examples/load-via-script-tag-with-geoblaze.html

GeoBlaze supports identifying values in COGs and reprojection now via https://github.com/GeoTIFF/geoblaze/blob/master/src/wrap-geom.js#L4, but I am the first to admit the documentation is lacking.

Also, wondering if you guys could share if you want the rendered value or the actual real value found in the highest resolution image of the tiff or something else? It sounds like @jcphill wants the real value and not the rendered color/value.

Open to your thoughts

jcphill commented 1 year ago

Thanks, the geoblaze example does exactly what I need (return real value(s) without duplicating raster data).

DanRunfola commented 1 year ago

Just echoing that something like this could be valuable for a range of use cases, including visualization (i.e., my very narrow use case is showing administrative units on a map. With this, I could fetch the ID value (numeric) the user clicks on, and use it to reference the name (string) in another table, then show it on the visualization).

"Why are you using a raster", you may ask. To which I raise you my 900mb vector of India's ADM units :) https://github.com/wmgeolab/geoBoundaries/blob/main/releaseData/gbOpen/IND/ADM5/geoBoundaries-IND-ADM5.geojson

iamtekson commented 2 months ago

If someone is still struggling to find the way to get raster value on click, please follow the following steps;

  1. Add geoblaze in the script tag
<script src="https://unpkg.com/geoblaze"></script>
  1. load raster using fetch API
fetch("path/to/geotiff.tif").then((response) => {
  response.arrayBuffer().then((arrayBuffer) => {
    var georaster = parseGeoraster(arrayBuffer).then((georaster) => {
      var layer = new GeoRasterLayer({
        georaster: georaster,
        opacity: 0.7,
        resolution: 64,
      });
      layer.addTo(map);
      map.fitBounds(layer.getBounds());
    });
  });
});
  1. Add onClick event on map
 // onclick event on layer
map.on("click", function (event) {
  var lat = event.latlng.lat;
  var lng = event.latlng.lng;
  var value = geoblaze.identify(georaster, [lng, lat]);

  // add popup and marker on click
  var marker = L.marker([lat, lng])
    .addTo(map)
    .bindPopup("Raster Value: " + value)
    .openPopup();
});