Situation: I am plotting data provided in a GeoTIFF file on a map using Reactjs and geoTiff.js. An example of the GeoTiff files I am using is at the following link: https://drive.google.com/file/d/1yc2Lo5vQrFPAJRe5VklorrvIXuhB1nE0/view.
What I want to do: When the user clicks on a specific state (district or any specific shape) then the data provided in the tiff file should be visible only for that shape. Basically, I want to clip the data in the GeoTIFF file according to a given shape (assuming I have the shape boundary definitions. Further the projection system of the shape boundaries and the GeoTiff file are the same).
Here is the code as of now to show whole tiff data on the map.
Code:
import { useEffect, useRef } from "react";
import proj4 from "proj4";
import { useLeafletContext } from "@react-leaflet/core";
import { useMap } from "react-leaflet";
import parseGeoraster from "georaster";
import GeoRasterLayer from "georaster-layer-for-leaflet";
window.proj4 = proj4;
const GeotiffLayer = ({ url, options }) => {
const geoTiffLayerRef = useRef();
const context = useLeafletContext();
const map = useMap();
useEffect(() => {
const container = context.layerContainer || context.map;
fetch(url)
.then((response) => response.arrayBuffer())
.then((arrayBuffer) => {
console.log(arrayBuffer);
parseGeoraster(arrayBuffer).then((georaster) => {
console.log("georaster:", georaster.values[0][1]);
options.georaster = georaster;
geoTiffLayerRef.current = new GeoRasterLayer(options);
container.addLayer(geoTiffLayerRef.current);
map.fitBounds(geoTiffLayerRef.current.getBounds());
});
});
// return () => {
// container.removeLayer(geoTiffLayerRef.current);
// };
}, [context, url, map, options]);
return null;
};
export default GeotiffLayer;
Output:
Fig 1 illustrates the whole tiff file shown on the map. Fig 1 illustrates the whole tiff file shown on the map.
Fig 2 illustrates the output after a click on the specific state.
illustrates the output after a click on the specific state
Please suggest any approach using georaster, leaflet, georaster-layer-for-leaflet, or some other library.