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
286 stars 57 forks source link

Setting custom color scheme #42

Open note5 opened 3 years ago

note5 commented 3 years ago

Hi, thank you are this library. I would like to color code a raster layer based on specific colors assigned to specific value. with the pixelValuesToColorFn I can add it by hardcoding the ranges as I have seen being done on this forum But I would like to calculate the ranges of colors before hand then use then render it.

Describe the solution you'd like For the solution I was thinking how to adopt something similar to plotty's add color scale plotty.addColorScale("mycolorscale", ["#00ff00", "#0000ff", "#ff0000"], [0, 0.5, 1]);

where One can have an array of colors and an array of values

Describe alternatives you've considered For the alternatives, I have tried leaflet-geotiff but it is not as fast as this library while rendering my geotiffs. With leaflet-geotiff, I can easily access plotty and customize how the colors are added with functions already built in to clamp values that are out of range to get a nice coloring withing the bounds of the raster and not the rectangle

kindly advice on how to achieve this using this library because I know it is possible I am limited by my knowledge of the pixelValuesToColorFn and customDrawFunction

DanielJDufour commented 3 years ago

Hi, @note5 . Thank you for posting this question. How large is the raster/geotiff file? If you want to get all of the pixel values, you can run georaster.getValues() instead of geoblaze.get. You could then create an array of unique pixel values from that. However, that will only work if your GeoTIFF is small (perhaps less than 5MB). Let me know if this helps or if you have more questions! :-)

note5 commented 3 years ago

thank you , I have a land use land cover raster that is about 155mbs. How do i best handle this?

DanielJDufour commented 3 years ago

Hi, @note5 . You'll definitely want to use a cloud optimized GeoTIFF. You can load a COG using parseGeoRaster(url_to_cog). You won't want to use georaster.getValues() because that will probably take too long to load all of the pixel values. I can provide more information in a couple days. Unfortunately, I have some life stuff between then.

note5 commented 3 years ago

Thank you for getting back. I will be awaiting for feedback

DanielJDufour commented 3 years ago

Hi, @note5 . Could you consult the following newly created resources and let me know if they help?

First, you will first have to convert your GeoTIFF into a Cloud Optimized GeoTIFF (see: https://github.com/GeoTIFF/georaster-layer-for-leaflet/blob/master/FAQs.md#how-do-i-convert-my-geotiff-into-a-cloud-optimized-geotiff)

Second, you'll want to load the geotiff with parseGeoRaster(url) and style using a custom scale. There's two new examples for custom scales with COGs at Number 9 and 10 here: https://github.com/geotiff/georaster-layer-for-leaflet-example

Thanks and happy to provide more documentation where required!

note5 commented 3 years ago

Thank you, I will check them out today. I wonder if I can get this new updates on my web-pack project since the npm package may not be updated. Webpack is one hairy thing that I have found to complain alotwith my experiments trying out these mapping libraries