DanielJDufour
commented
4 years ago Hi, @fernandomantoan . Thanks for raising this issue. I'll take a look and let you know what I discover.
Closed fernandomantoan closed 4 years ago
DanielJDufour
commented
4 years ago Hi, @fernandomantoan . Thanks for raising this issue. I'll take a look and let you know what I discover.
DanielJDufour
commented
4 years ago I just published a new version with some fixes. visual_FieldGroup_1_2020-02-10.tiff and exemplotiff.tif appear to be working now.
nvdi_... tiffs are still broken. I'll continue to investigate over the next few days...
thank you for your patience.
fernandomantoan
commented
4 years ago Hello @DanielJDufour I just gave it a try and the 2 files you mentioned are now working!
Thank you very much for putting effort into this.
If you have any news about these issues please let me know, but thanks to you I can advance further with my feature.
Regards and thanks again.
DanielJDufour
commented
4 years ago Hi, @fernandomantoan . I found the issue with ndvi_contrast_FieldGroup_1_2020-02-10.tiff. GeoRasterLayer automatically assumes 4-band rasters are RGBA, so the fourth band is interpreted as opacity. I'm assuming as it's titled NDVI, it's Near Infrared (NIR). Any easy fix is to use the pixelValuesToColorFn to map a pixel to a color:
pixelValuesToColorFn: function(values) {
if (values[3] === 0) return null;
return `rgb(${values[0]},${values[1]},${values[2]})`;
}Here's a picture of it working
Here's the larger code of it working:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"/>
<style>
#map {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/browse/whatwg-fetch@3.2.0/dist/fetch.umd.js"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/georaster"></script>
<script src="https://unpkg.com/proj4"></script>
<script src="../georaster-layer-for-leaflet.min.js"></script>
<script>
// initalize leaflet map
var map = L.map('map').setView([0, 0], 5);
// add OpenStreetMap basemap
L.tileLayer('http://{s}.tile.osm.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
}).addTo(map);
var url_to_geotiff_file = "../ndvi_contrast_FieldGroup_1_2020-02-10.tiff";
fetch(url_to_geotiff_file)
.then(function (response) { return response.arrayBuffer(); })
.then(function (arrayBuffer) {
parseGeoraster(arrayBuffer).then(function (georaster) {
console.log("georaster:", georaster);
var layer = new GeoRasterLayer({
georaster: georaster,
resolution: 512,
pixelValuesToColorFn: function(values) {
if (values[3] === 0) return null;
return `rgb(${values[0]},${values[1]},${values[2]})`;
}
});
layer.addTo(map);
map.fitBounds(layer.getBounds());
});
});
</script>
</body>
</html>The same approach works for ndvi_contrast_Field_4960_2020-01-24.tiff
DanielJDufour
commented
4 years ago On second thought, it seems that the fourth band isn't NIR, but a mask that tells programs whether the pixel is no data or not. I'm honestly not sure how to fix it more generically, but if we see this issue pop up for others, we can think of a better fix.
I'm going to close this issue now, but please reopen or open another issue if you have any more issues.
Describe the bug I'm trying to use this library to display some tiff files on my application but some errors are being thrown when loading some specific files. I'm not sure if this is a bug with the lib itself but maybe you can give me some insights about the issues. The code I used is mostly the same as in the
georaster-layer-for-leaflet-examplerepository I even forked it to host the tiff files I mentioned, if you want to check it: https://github.com/fernandomantoan/georaster-layer-for-leaflet-example, the files arendvi_contrast_Field_4960_2020-01-24.tiff,ndvi_contrast_FieldGroup_1_2020-02-10.tiff,visual_FieldGroup_1_2020-02-10.tiff,exemplotiff.tif. The only difference is that I had to add theproj4library.Some Logs:
It's important to note that when I use the tiff files provided from your original repo everything works fine.
I also tried uploading my files to http://app.geotiff.io/load and the errors are also being thrown there.
To Reproduce Steps to reproduce the behavior:
main.jsto point to the tiff fileExpected behavior The tiff files should be presented.
Screenshots Each screenshot is a different tiff file.
Desktop (please complete the following information):