I'm encountering an issue while trying to load a GeoTIFF file in a local web page using Leaflet and GeoTIFF.js. I've followed the steps provided in various tutorials, but I keep getting an error message that says 'Request failed' when trying to load the GeoTIFF file.
Here are some details about my setup:
I'm running a local server using EasyPHP. The GeoTIFF file is stored in the same directory as my HTML file. I've double-checked the file path and confirmed that the URL to the GeoTIFF file is correct. I've also verified that the GeoTIFF file is accessible by directly opening it in the browser. Despite these checks, I'm still encountering the error. I've tried troubleshooting by checking the server configuration, file permissions, and server logs, but haven't been able to pinpoint the issue.
<!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" defer></script>
<script src="https://cdn.jsdelivr.net/npm/geotiff"></script>
<script>
document.addEventListener("DOMContentLoaded", function() {
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);
// Load GeoTIFF file
var url = 'd.tif';
GeoTIFF.fromUrl(url)
.then(function(tiff) {
// Step 2: Extract image data
var image = tiff.getImage();
return image.readRasters();
})
.then(function(rasters) {
// Step 3: Convert image data to suitable format
var imageData = L.imageOverlay(rasters[0], [[-90, -180], [90, 180]]);
// Step 4: Add image layer to the map
imageData.addTo(map);
})
.catch(function(error) {
// Handle error
console.error('Error loading GeoTIFF:', error);
alert('Failed to load GeoTIFF: ' + error.message);
});
// Event listeners for navigation controls
document.getElementById('zoom-in').addEventListener('click', function() {
map.zoomIn();
});
document.getElementById('zoom-out').addEventListener('click', function() {
map.zoomOut();
});
document.getElementById('move-left').addEventListener('click', function() {
map.panBy([-100, 0]);
});
document.getElementById('move-right').addEventListener('click', function() {
map.panBy([100, 0]);
});
document.getElementById('move-up').addEventListener('click', function() {
map.panBy([0, -100]);
});
document.getElementById('move-down').addEventListener('click', function() {
map.panBy([0, 100]);
});
});
</script>
</body>
</html>Could anyone please offer some guidance on what might be causing this error and how I can resolve it? Any suggestions or insights would be greatly appreciated.
Thank you in advance!
Thank you, Mike 'Pomax' Kamermans, for your insightful response.
After inspecting the network requests in the browser's developer tools "network" tab, I discovered that the issue was indeed related to the GeoTIFF file not being accessible. The request for the GeoTIFF file resulted in a 404 error, indicating that the file was not found. Upon further investigation, I realized that the IDM (Internet Download Manager) downloader was causing the problem. After disabling it, the error ceased to occur.
Now that the IDM downloader issue has been resolved, I'd like to proceed with adding the GeoTIFF file as a layer to the map. However, I encountered an issue with the provided code snippet. The line return tiff.getImage().toCanvas(); did not work as expected.
Here's the updated code snippet with corrections: