Skip to content

Commit f6a307d

Browse files
committed
Copy tests into leaflet-1.0.3 folder
1 parent 408ea50 commit f6a307d

35 files changed

+2056
-0
lines changed
Lines changed: 52 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,52 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0./dist/leaflet.css" />
6+
<style>
7+
#map {
8+
bottom: 0;
9+
left: 0;
10+
position: absolute;
11+
right: 0;
12+
top: 0;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="map"></div>
18+
<script src="https://unpkg.com/browse/whatwg-fetch@3.2.0/dist/fetch.umd.js"></script>
19+
<script src="https://unpkg.com/leaflet@1.0./dist/leaflet.js"></script>
20+
<script src="https://unpkg.com/georaster"></script>
21+
<script src="../dist/georaster-layer-for-leaflet.min.js"></script>
22+
<script>
23+
// initalize leaflet map
24+
var map = L.map("map").setView([0, 0], 5);
25+
26+
// add OpenStreetMap basemap
27+
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
28+
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
29+
}).addTo(map);
30+
31+
var url_to_geotiff_file =
32+
"https://raw.githubusercontent.com/GeoTIFF/georaster-layer-for-leaflet-example/master/example_4326.tif";
33+
34+
fetch(url_to_geotiff_file)
35+
.then(function (response) {
36+
return response.arrayBuffer();
37+
})
38+
.then(function (arrayBuffer) {
39+
parseGeoraster(arrayBuffer).then(function (georaster) {
40+
console.log("georaster:", georaster);
41+
var layer = new GeoRasterLayer({
42+
debugLevel: 4,
43+
georaster: georaster,
44+
resolution: 512
45+
});
46+
map.fitBounds(layer.getBounds());
47+
layer.addTo(map);
48+
});
49+
});
50+
</script>
51+
</body>
52+
</html>
Lines changed: 50 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,50 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0./dist/leaflet.css" />
6+
<style>
7+
#map {
8+
bottom: 0;
9+
left: 0;
10+
position: absolute;
11+
right: 0;
12+
top: 0;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="map"></div>
18+
<script src="https://unpkg.com/browse/whatwg-fetch@3.2.0/dist/fetch.umd.js"></script>
19+
<script src="https://unpkg.com/leaflet@1.0./dist/leaflet.js"></script>
20+
<script src="https://unpkg.com/proj4"></script>
21+
<script src="https://unpkg.com/georaster"></script>
22+
<script src="../dist/georaster-layer-for-leaflet.min.js"></script>
23+
<script>
24+
// initalize leaflet map
25+
var map = L.map("map").setView([0, 0], 5);
26+
27+
// add OpenStreetMap basemap
28+
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
29+
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
30+
}).addTo(map);
31+
32+
var url_to_geotiff_file = "https://s3.amazonaws.com/georaster-layer-for-leaflet/utm.tif";
33+
34+
fetch(url_to_geotiff_file)
35+
.then(function (response) {
36+
return response.arrayBuffer();
37+
})
38+
.then(function (arrayBuffer) {
39+
parseGeoraster(arrayBuffer).then(function (georaster) {
40+
var layer = new GeoRasterLayer({
41+
georaster: georaster,
42+
resolution: 512
43+
});
44+
layer.addTo(map);
45+
map.fitBounds(layer.getBounds());
46+
});
47+
});
48+
</script>
49+
</body>
50+
</html>

tests/leaflet-1.0.3/arrows.html

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0./dist/leaflet.css" />
6+
<style>
7+
#map {
8+
bottom: 0;
9+
left: 0;
10+
position: absolute;
11+
right: 0;
12+
top: 0;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="map"></div>
18+
<script src="https://unpkg.com/browse/whatwg-fetch@3.2.0/dist/fetch.umd.js"></script>
19+
<script src="https://unpkg.com/leaflet@1.0./dist/leaflet.js"></script>
20+
<script src="https://unpkg.com/georaster"></script>
21+
<script src="../dist/georaster-layer-for-leaflet.min.js"></script>
22+
<script>
23+
// initalize leaflet map
24+
var map = L.map("map").setView([0, 0], 5);
25+
26+
// add OpenStreetMap basemap
27+
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
28+
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
29+
}).addTo(map);
30+
31+
var url_to_geotiff_file = "https://georaster-layer-for-leaflet.s3.amazonaws.com/wind_direction.tif";
32+
33+
fetch(url_to_geotiff_file)
34+
.then(function (response) {
35+
return response.arrayBuffer();
36+
})
37+
.then(function (arrayBuffer) {
38+
parseGeoraster(arrayBuffer).then(function (georaster) {
39+
var layer = new GeoRasterLayer({
40+
georaster: georaster,
41+
customDrawFunction: function ({ context, x, y, width, height, values }) {
42+
// from https://github.com/stuartmatthews/leaflet-geotiff/blob/master/leaflet-geotiff-vector-arrows.js
43+
var value = values[0];
44+
var arrowSize = width / 2.5;
45+
context.save();
46+
context.translate(x, y);
47+
context.rotate(((90 + value) * Math.PI) / 180);
48+
context.beginPath();
49+
context.moveTo(-arrowSize / 2, 0);
50+
context.lineTo(+arrowSize / 2, 0);
51+
context.moveTo(arrowSize * 0.25, -arrowSize * 0.25);
52+
context.lineTo(+arrowSize / 2, 0);
53+
context.lineTo(arrowSize * 0.25, arrowSize * 0.25);
54+
context.stroke();
55+
context.restore();
56+
}
57+
});
58+
layer.addTo(map);
59+
map.fitBounds(layer.getBounds());
60+
});
61+
});
62+
</script>
63+
</body>
64+
</html>
Lines changed: 71 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,71 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0./dist/leaflet.css" />
6+
<style>
7+
#map {
8+
bottom: 0;
9+
left: 0;
10+
position: absolute;
11+
right: 0;
12+
top: 0;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="map"></div>
18+
<script src="https://unpkg.com/browse/whatwg-fetch@3.2.0/dist/fetch.umd.js"></script>
19+
<script src="https://unpkg.com/leaflet@1.0./dist/leaflet.js"></script>
20+
<script src="https://unpkg.com/georaster"></script>
21+
<script src="https://unpkg.com/proj4"></script>
22+
<script src="../dist/georaster-layer-for-leaflet.min.js"></script>
23+
<script>
24+
// initalize leaflet map
25+
var map = L.map("map").setView([0, 0], 0);
26+
27+
// add OpenStreetMap basemap
28+
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
29+
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
30+
}).addTo(map);
31+
32+
const rasterUrl =
33+
"https://storage.googleapis.com/pdd-stac/disasters/hurricane-harvey/0831/20170831_172754_101c_3b_Visual.tif";
34+
parseGeoraster(rasterUrl).then(function (georaster) {
35+
georaster.getValues = () => {
36+
throw new Error("failure to fetch values");
37+
};
38+
39+
const { noDataValue } = georaster;
40+
const resolution = 64;
41+
const lyr = new GeoRasterLayer({
42+
attribution: "Planet",
43+
georaster
44+
});
45+
lyr.addTo(map);
46+
47+
setTimeout(() => {
48+
map.flyToBounds(lyr.getBounds());
49+
}, 1000);
50+
51+
lyr.on("tileerror", data => {
52+
const { coords, tile } = data;
53+
const height = 256;
54+
const width = 256;
55+
56+
tile.style.visibility = "visible";
57+
tile.style.padding = null;
58+
tile.height = height;
59+
tile.style.height = height + "px";
60+
tile.width = width;
61+
tile.style.width = width + "px";
62+
63+
const { x, y, z } = coords;
64+
const img = new Image(256, 256);
65+
img.onload = () => data.tile.getContext("2d").drawImage(img, 0, 0);
66+
img.src = `https://tiles.rdnt.io/tiles/${z}/${x}/${y}?url=${rasterUrl}`;
67+
});
68+
});
69+
</script>
70+
</body>
71+
</html>

tests/leaflet-1.0.3/cog-mask.html

Lines changed: 81 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,81 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0./dist/leaflet.css" />
6+
<script src="https://unpkg.com/reproject-geojson"></script>
7+
<style>
8+
#map {
9+
bottom: 0;
10+
left: 0;
11+
position: absolute;
12+
right: 0;
13+
top: 0;
14+
}
15+
</style>
16+
</head>
17+
<body>
18+
<div id="map"></div>
19+
<script src="https://unpkg.com/browse/whatwg-fetch@3.2.0/dist/fetch.umd.js"></script>
20+
<script src="https://unpkg.com/leaflet@1.0./dist/leaflet.js"></script>
21+
<script src="https://unpkg.com/georaster"></script>
22+
<script src="https://unpkg.com/proj4"></script>
23+
<script src="../dist/georaster-layer-for-leaflet.min.js"></script>
24+
<script>
25+
// initalize leaflet map
26+
var map = L.map("map").setView([0, 0], 0);
27+
28+
// add OpenStreetMap basemap
29+
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
30+
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
31+
}).addTo(map);
32+
33+
const rasterUrl =
34+
"https://storage.googleapis.com/pdd-stac/disasters/hurricane-harvey/0831/20170831_172754_101c_3b_Visual.tif";
35+
parseGeoraster(rasterUrl).then(function (georaster) {
36+
const { noDataValue, xmin, ymin, xmax, ymax } = georaster;
37+
var pixelValuesToColorFn = function (values) {
38+
if (
39+
values.some(function (value) {
40+
return value === noDataValue;
41+
})
42+
) {
43+
return "rgba(0,0,0,0.0)";
44+
} else {
45+
const [r, g, b] = values;
46+
return `rgba(${r},${g},${b},.85)`;
47+
}
48+
};
49+
const resolution = 64;
50+
var layer = new GeoRasterLayer({
51+
debugLevel: 4,
52+
attribution: "Planet",
53+
georaster: georaster,
54+
pixelValuesToColorFn: pixelValuesToColorFn,
55+
resolution: resolution,
56+
mask: {
57+
type: "Feature",
58+
geometry: {
59+
type: "Polygon",
60+
coordinates: [
61+
[
62+
[xmin, ymax],
63+
[xmin, ymin],
64+
[xmax, ymin],
65+
[xmax, ymax],
66+
[xmin, ymax]
67+
]
68+
]
69+
}
70+
},
71+
mask_srs: georaster.projection
72+
});
73+
layer.addTo(map);
74+
75+
setTimeout(() => {
76+
map.flyToBounds(layer.getBounds());
77+
}, 1000);
78+
});
79+
</script>
80+
</body>
81+
</html>
Lines changed: 45 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,45 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta name="viewport" content="width=device-width, initial-scale=1" />
5+
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0./dist/leaflet.css" />
6+
<style>
7+
#map {
8+
bottom: 0;
9+
left: 0;
10+
position: absolute;
11+
right: 0;
12+
top: 0;
13+
}
14+
</style>
15+
</head>
16+
<body>
17+
<div id="map"></div>
18+
<script src="https://unpkg.com/browse/whatwg-fetch@3.2.0/dist/fetch.umd.js"></script>
19+
<script src="https://unpkg.com/leaflet@1.0./dist/leaflet.js"></script>
20+
<script src="https://unpkg.com/georaster"></script>
21+
<script src="../dist/georaster-layer-for-leaflet.min.js"></script>
22+
<script>
23+
// initalize leaflet map
24+
const map = L.map("map").setView([0, 0], 5);
25+
26+
// add OpenStreetMap basemap
27+
L.tileLayer("http://{s}.tile.osm.org/{z}/{x}/{y}.png", {
28+
attribution: '&copy; <a href="http://osm.org/copyright">OpenStreetMap</a> contributors'
29+
}).addTo(map);
30+
31+
const url_to_geotiff_file =
32+
"https://georaster-layer-for-leaflet.s3.amazonaws.com/California-Vegetation-CanopyBaseHeight-2016-Summer-00010m.tiff";
33+
parseGeoraster(url_to_geotiff_file).then(function (georaster) {
34+
console.log("georaster:", georaster);
35+
const layer = new GeoRasterLayer({
36+
debugLevel: 4,
37+
georaster,
38+
resolution: 512
39+
});
40+
map.fitBounds(layer.getBounds());
41+
layer.addTo(map);
42+
});
43+
</script>
44+
</body>
45+
</html>

0 commit comments

Comments
 (0)