Open wenhai03 opened 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.
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
Thanks, the geoblaze example does exactly what I need (return real value(s) without duplicating raster data).
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
If someone is still struggling to find the way to get raster value on click, please follow the following steps;
geoblaze
in the script tag<script src="https://unpkg.com/geoblaze"></script>
fetch
APIfetch("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());
});
});
});
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();
});
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) }/ })