-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
129 lines (128 loc) · 3.16 KB
/
index.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
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>moon map</title>
<meta
name="viewport"
content="initial-scale=1,maximum-scale=1,user-scalable=no"
/>
<script src="https://unpkg.com/maplibre-gl@^5.0.0/dist/maplibre-gl.js"></script>
<link
href="https://unpkg.com/maplibre-gl@^5.0.0/dist/maplibre-gl.css"
rel="stylesheet"
/>
<style>
body {
margin: 0;
padding: 0;
background-color: #222;
}
#map {
position: absolute;
top: 0;
bottom: 0;
width: 100%;
}
</style>
</head>
<body>
<div id="map"></div>
<script>
const map = new maplibregl.Map({
container: 'map',
zoom: 0,
renderWorldCopies: false,
style: {
version: 8,
projection: { type: 'globe' },
glyphs: 'https://mierune.github.io/fonts/{fontstack}/{range}.pbf',
sources: {
surface: {
type: 'raster',
tiles: [
//'https://moon-workers.infokukan.workers.dev/lroc_wac/{z}/{y}/{x}.png',
'https://trek.nasa.gov/tiles/Moon/EQ/LRO_WAC_Mosaic_Global_303ppd_v02/1.0.0//default/default028mm/{z}/{y}/{x}.jpg',
],
tileSize: 256,
minzoom: 0,
maxzoom: 10,
tms: true,
attribution:
'USGS/NASA: <a href="https://astrogeology.usgs.gov/search/map/Moon/LRO/LROC_WAC/Lunar_LRO_LROC-WAC_Mosaic_global_100m_June2013">Surface</a> | <a href="https://planetarynames.wr.usgs.gov/Page/MOON/target">Crater</a> | <a href="https://pgda.gsfc.nasa.gov/products/54">DEM</a>',
},
crater: {
type: 'geojson',
// data: './cratername.geojson',
data: './Crater.geojson',
},
},
layers: [
{
id: 'surface',
type: 'raster',
source: 'surface',
paint: {
'raster-fade-duration': 0,
},
},
{
id: 'crater',
type: 'symbol',
source: 'crater',
layout: {
'text-field': ['get', 'name'],
'text-font': ['Metropolis Bold'],
'text-size': 15,
},
paint: {
'text-color': 'white',
'text-halo-color': 'black',
'text-halo-width': 1,
},
minzoom: 5,
},
{
id: 'crater-mid',
type: 'symbol',
source: 'crater',
layout: {
'text-field': ['get', 'name'],
'text-font': ['Metropolis Bold'],
'text-size': 17,
},
paint: {
'text-color': 'white',
'text-halo-color': 'black',
'text-halo-width': 1,
},
filter: ['>', ['get', 'diameter'], 100],
minzoom: 3.5,
},
{
id: 'crater-big',
type: 'symbol',
source: 'crater',
layout: {
'text-field': ['get', 'name'],
'text-font': ['Metropolis Bold'],
'text-size': 20,
},
paint: {
'text-color': 'white',
'text-halo-color': 'black',
'text-halo-width': 1,
},
filter: ['>', ['get', 'diameter'], 300],
},
],
},
maxPitch: 85,
maxZoom: 9,
});
map.addControl(new maplibregl.NavigationControl());
map.addControl(new maplibregl.FullscreenControl());
map.addControl(new maplibregl.LogoControl(), 'bottom-left');
</script>
</body>
</html>