I'm currently facing an issue while trying to display GeoTIFF raster data as a layer on a Leaflet map. Here's the problem I'm encountering:
I have an HTML page with JavaScript code that fetches a GeoTIFF file and attempts to display it on a Leaflet map. However, when trying to read the image data from the GeoTIFF file, I encountered the following error in the browser console: "TypeError: image.getWidth is not a function".
Here's a simplified version of my code:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoTIFF Viewer</title>
<link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />
<style>
#map-container {
height: 500px;
}
#navigation-controls {
margin-top: 10px;
}
button {
margin-right: 5px;
}
</style>
</head>
<body>
<div id="map-container"></div>
<div id="navigation-controls">
<button id="zoom-in">Zoom In</button>
<button id="zoom-out">Zoom Out</button>
<button id="move-left">Move Left</button>
<button id="move-right">Move Right</button>
<button id="move-up">Move Up</button>
<button id="move-down">Move Down</button>
</div>
<script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/geotiff"></script>
<script>
var map = L.map('map-container').setView([0, 0], 2);
L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© OpenStreetMap contributors'
}).addTo(map);
// Step 1: Load GeoTIFF file
var url = 'd.tif'; // Replace with your GeoTIFF file URL
fetch(url)
.then(response => response.arrayBuffer())
.then(arrayBuffer => {
return GeoTIFF.fromArrayBuffer(arrayBuffer);
})
.then(tiff => {
var image = tiff.getImage();
var width = image.getWidth();
var height = image.getHeight();
// Read pixel values
return image.readRasters({ window: [0, 0, width, height] });
})
.then(rasters => {
var imageData = rasters[0]; // Assuming a single band image
var bounds = [[0, 0], [imageData.length, imageData[0].length]]; // Update bounds as needed
var imageOverlay = L.imageOverlay(imageData, bounds);
imageOverlay.addTo(map);
})
.catch(error => {
console.error('Error loading GeoTIFF:', error);
});
</script>
</body>
</html>Error description from console:
index2.php:63 Error loading GeoTIFF: TypeError: image.getWidth is not a function
at index2.php:49:23Could someone please provide guidance on how to properly read and display GeoTIFF raster data as a layer on a Leaflet map? Any help or suggestions would be greatly appreciated. Thank you!