<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1" />
<link
rel="stylesheet"
href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css"
/>
<style>
#map {
bottom: 0;
left: 0;
position: absolute;
right: 0;
top: 0;
z-index: 1;
}
#info {
background: rgba(20, 20, 20, 0.85);
color: lightblue;
left: 15%;
padding: 15px;
position: absolute;
top: 0;
right: 15%;
z-index: 2;
}
#info a {
color: lightblue;
}
</style>
</head>
<body>
<div id="map"></div>
<script src="https://unpkg.com/chroma-js"></script>
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="https://unpkg.com/georaster"></script>
<script src="https://unpkg.com/proj4"></script>
<script src="https:///unpkg.com/georaster-layer-for-leaflet@latest"></script>
<script>
// initalize leaflet map
var map = L.map("map").setView([0, 0], 5);
// add OpenStreetMap basemap
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
attribution:
'© <a href="http://osm.org/copyright">OpenStreetMap</a> contributors',
}).addTo(map);
var url_to_geotiff_file =
"https://abc.s3.amazonaws.com/abc/2022-03-14/Ratan+Waje.tif";
const scale = chroma
.scale([
"rgba(0,0,0,0)",
"#d73027",
"#f46d43",
"#fdae61",
"#fee08b",
"#ffffbf",
"#d9ef8b",
"#a6d96a",
"#66bd63",
"#1a9850",
"#006837",
])
.domain([0, 0.1, 0.2, 0.3, 0.4, 0.5, 0.6, 0.7, 0.8, 0.9, 1]);
var pixelValuesToColorFn = (values) => {
return scale(values).hex();
};
parseGeoraster(url_to_geotiff_file).then((georasters) => {
var layer = new GeoRasterLayer({
georasters,
pixelValuesToColorFn,
resolution: 64,
opacity: 0.5,
});
layer.addTo(map);
map.fitBounds(layer.getBounds());
});
</script>
</body>
</html>
Describe the bug
A clear and concise description of what the bug is.
I'm trying to show tiff on the map, but when I add my tiff path e.g.
https://abc.s3.amazonaws.com/abc/2022-03-14/abc.tifand run the program , it adds.ovrat the endTo Reproduce
Steps to reproduce the behavior:
Here is the code
Expected behavior
I should be able to see tiff on the map
Screenshots
Desktop (please complete the following information):