Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

get the tiff data of the current click? #104

Open
wenhai03 opened this issue Aug 22, 2022 · 5 comments
Open

get the tiff data of the current click? #104

wenhai03 opened this issue Aug 22, 2022 · 5 comments

Comments

@wenhai03
Copy link

wenhai03 commented Aug 22, 2022

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
Copy link
Contributor

jcphill commented Nov 3, 2022

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
Copy link
Member

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
Copy link
Contributor

jcphill commented Nov 3, 2022

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

@DanRunfola
Copy link

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
Copy link
Contributor

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();
});

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

5 participants