-
Notifications
You must be signed in to change notification settings - Fork 11
Expand file tree
/
Copy pathtanaka.html
More file actions
65 lines (57 loc) · 2.1 KB
/
tanaka.html
File metadata and controls
65 lines (57 loc) · 2.1 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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Gridviz tanaka 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 src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script>
const map = new gridviz.Map(document.getElementById('map'), {
x: 4200000, y: 2800000, z: 1000,
backgroundColor: "#888"
}).addZoomButtons()
const dataset = new gridviz.MultiResolutionDataset(
[100, 200, 500, 1000, 2000, 5000, 10000, 20000],
resolution => new gviz_par.TiledParquetGrid(map,
"https://raw.githubusercontent.com/jgaffuri/tiled-euroDEM/main/pub/v1/tiles_" + resolution + "/"),
{ preprocess: (c) => c.v != undefined && c.v > 0 }
)
//define style
const tanakaStyle = new gridviz.SideTanakaStyle({
classifier: cells => {
return c => {
const v = c.v
if (v === undefined) return undefined
if (v < 0) return 0
if (v < 100) return 1
if (v < 200) return 2
if (v < 500) return 3
if (v < 1000) return 4
if (v < 2000) return 5
if (v < 3000) return 6
return 7
}
},
limit: "steep", // none step steep
//revert: true,
})
//add layer to map
map.layers = [new gridviz.GridLayer(dataset, [tanakaStyle], { minPixelsPerCell: 3 })]
</script>
</body>
</html>