2

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. enter image description here

Fig 2 illustrates the output after a click on the specific state. illustrates the output after a click on the specific state enter image description here

Please suggest any approach using georaster, leaflet, georaster-layer-for-leaflet, or some other library.

1
  • I can't see any reference to a shapefile in your code, or question. shapefile refers to a file format, do you instead mean any drawn shape/polygon?
    – nmtoken
    May 4 at 18:36

0

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Browse other questions tagged or ask your own question.