This repository has been archived by the owner on Oct 14, 2020. It is now read-only.
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index_3413.html
102 lines (95 loc) · 3.22 KB
/
index_3413.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
<!doctype html>
<html lang="en">
<head>
<style>
body { margin:0; padding: 0; width:100%; height:100%;}
.map { position:absolute; top:0; bottom:0; width:100%; }
</style>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.0.3/dist/leaflet.css">
<script src="https://unpkg.com/leaflet@1.0.3/dist/leaflet.js"></script>
<script src="src/proj4-compressed.js"></script>
<script src="src/proj4leaflet.js"></script>
<title>rio-tiler CRS example</title>
</head>
<body>
<div id="map" class="map"></div>
<script type="text/javascript">
// from https://github.com/nasa-gibs/gibs-web-examples/blob/master/examples/leaflet/arctic-epsg3413.js
var EPSG3413 = new L.Proj.CRS(
'EPSG:3413',
'+proj=stere +lat_0=90 +lat_ts=70 +lon_0=-45 +k=1 +x_0=0 +y_0=0 ' +
'+ellps=WGS84 +datum=WGS84 +units=m +no_defs', {
origin: [-4194304, 4194304],
resolutions: [
8192.0,
4096.0,
2048.0,
1024.0,
512.0,
256.0
],
bounds: L.bounds([
[-4194304, -4194304],
[4194304, 4194304]
])
}
);
var map = L.map('map', {
center: [90, 0],
zoom: 0,
maxZoom: 9,
crs: EPSG3413
});
var template =
'https://gibs-{s}.earthdata.nasa.gov/wmts/epsg3413/best/' +
'{layer}/default/{time}/{tileMatrixSet}/{z}/{y}/{x}.jpg';
var layer = L.tileLayer(template, {
layer: 'MODIS_Terra_CorrectedReflectance_TrueColor',
tileMatrixSet: 'EPSG3413_250m',
time: '2013-06-15',
tileSize: 512,
subdomains: 'abc',
noWrap: true,
continuousWorld: true,
attribution:
'<a href="https://wiki.earthdata.nasa.gov/display/GIBS">' +
'NASA EOSDIS GIBS</a> ' +
'<a href="https://github.com/nasa-gibs/web-examples/blob/master/examples/leaflet/arctic-epsg3413.js">' +
'View Source' +
'</a>'
});
map.addLayer(layer);
// north
L.tileLayer('http://0.0.0.0:8501/tiles/EPSG3413/{z}/{x}/{y}@2x.png?filename=north_cog', {
minZoom: 3,
maxZoom: 7,
continuousWorld: true,
attribution: 'rio-tiler-crs',
tileSize: 512,
//bounds: [[76.79677030658075, -82.93633501037206], [79.34081659677736, -69.69194862994055]]
}).addTo(map)
L.polygon([
[76.79677030658075, -82.93633501037206],
[76.79677030658075, -69.69194862994055],
[79.34081659677736, -69.69194862994055],
[79.34081659677736, -82.93633501037206],
[76.79677030658075, -82.93633501037206]
]).addTo(map)
// DEBUG
L.GridLayer.GridDebug = L.GridLayer.extend({
createTile: function (coords) {
const tile = document.createElement('div')
tile.style.outline = '1px solid green'
tile.style.fontWeight = 'bold'
tile.style.fontSize = '14pt'
tile.innerHTML = [coords.z, coords.x, coords.y].join('/')
return tile;
},
})
L.gridLayer.gridDebug = function (opts) {
return new L.GridLayer.GridDebug(opts)
}
map.addLayer(L.gridLayer.gridDebug())
</script>
</body>
</html>