-
Notifications
You must be signed in to change notification settings - Fork 11
Expand file tree
/
Copy pathsquarecolorcatwgl.html
More file actions
153 lines (147 loc) · 5.33 KB
/
squarecolorcatwgl.html
File metadata and controls
153 lines (147 loc) · 5.33 KB
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
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gridviz side categorical webGL example</title>
<style>
html,
body {
height: 100%; /* Ensure the parent elements have a height so that the map can take up 100% correctly */
margin: 0; /* Remove default margins to prevent scrolling */
overflow: hidden; /* Prevent potential scrollbars */
}
</style>
</head>
<body>
<div id="map" style="height: 100%; width: 100%"></div>
<script src="../../dist/gridviz.js"></script>
<script>
//define map with initial view
const map = new gridviz.Map(document.getElementById('map'), {
x: 4500000,
y: 2900000,
z: 3000,
}).addZoomButtons()
//define multi resolution dataset
const dataset = new gridviz.MultiResolutionDataset(
[500, 1000, 2000, 5000, 10000, 20000, 50000, 100000],
(resolution) =>
new gridviz.TiledGrid(
map,
'https://raw.githubusercontent.com/jgaffuri/tiledgrids/main/data/europe/clc/' +
resolution +
'm/'
)
)
//define colors for categories
const clcColors = {
1: '#e6004d',
2: '#ff0000',
3: '#cc4df2',
4: '#cc0000',
5: '#e6cccc',
6: '#e6cce6',
7: '#a600cc',
8: '#a64d00',
9: '#ff4dff',
10: '#ffa6ff',
11: '#ffe6ff',
12: '#ffffa8',
13: '#ffff00',
14: '#e6e600',
15: '#e68000',
16: '#f2a64d',
17: '#e6a600',
18: '#e6e64d',
19: '#ffe6a6',
20: '#ffe64d',
21: '#e6cc4d',
22: '#f2cca6',
23: '#80ff00',
24: '#00a600',
25: '#4dff00',
26: '#ccf24d',
27: '#a6ff80',
28: '#a6e64d',
29: '#a6f200',
30: '#e6e6e6',
31: '#cccccc',
32: '#ccffcc',
33: '#000000',
34: '#a6e6cc',
35: '#a6a6ff',
36: '#4d4dff',
37: '#ccccff',
38: '#e6e6ff',
39: '#a6a6e6',
40: '#00ccf2',
41: '#80f2e6',
42: '#00ffa6',
43: '#a6ffe6',
44: '#e6f2ff',
48: 'gray',
}
//define labels for categories
const clcLabels = {
1: 'Continuous urban fabric',
2: 'Discontinuous urban fabric',
3: 'Industrial or commercial units',
4: 'Road and rail networks and associated land',
5: 'Port areas',
6: 'Airports',
7: 'Mineral extraction sites',
8: 'Dump sites',
9: 'Construction sites',
10: 'Green urban areas',
11: 'Sport and leisure facilities',
12: 'Non-irrigated arable land',
13: 'Permanently irrigated land',
14: 'Rice fields',
15: 'Vineyards',
16: 'Fruit trees and berry plantations',
17: 'Olive groves',
18: 'Pastures',
19: 'Annual crops associated with permanent crops',
20: 'Complex cultivation patterns',
21: 'Land principally occupied by agriculture with significant areas of natural vegetation',
22: 'Agro-forestry areas',
23: 'Broad-leaved forest',
24: 'Coniferous forest',
25: 'Mixed forest',
26: 'Natural grasslands',
27: 'Moors and heathland',
28: 'Sclerophyllous vegetation',
29: 'Transitional woodland-shrub',
30: 'sands',
31: 'Bare rocks',
32: 'Sparsely vegetated areas',
33: 'Burnt areas',
34: 'Glaciers and perpetual snow',
35: 'Inland marshes',
36: 'Peat bogs',
37: 'Salt marshes',
38: 'Salines',
39: 'Intertidal flats',
40: 'Water courses',
41: 'Water bodies',
42: 'Coastal lagoons',
43: 'Estuaries',
44: 'Sea and ocean',
48: 'No data',
}
//define style
const style = new gridviz.SquareColorCategoryWebGLStyle({
code: (cell) => cell.clc,
color: clcColors,
})
//add layer to map
map.layers = [
new gridviz.GridLayer(dataset, [style], {
minPixelsPerCell: 1.5,
cellInfoHTML: (cell) => clcLabels[cell.clc],
}),
]
</script>
</body>
</html>