-
Notifications
You must be signed in to change notification settings - Fork 0
/
basic_multiscale_parquet.html
36 lines (29 loc) · 1.39 KB
/
basic_multiscale_parquet.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
<div id="map" style="height: 500px; width: 800px"></div>
<script src="../dist/gridviz-parquet.js"></script>
<script src="https://cdn.jsdelivr.net/npm/gridviz"></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(
//the resolutions
[5000, 10000, 20000, 50000, 100000],
//the function returning each dataset from the resolution
resolution => new gviz_par.ParquetGrid(map, "https://raw.githubusercontent.com/eurostat/gridviz/master/assets/parquet/Europe/pop_2018_" + Math.round(resolution / 1000) + "km_snappy.parquet", resolution)
)
//define color for each cell c
const colorFunction = (cell, resolution) => {
const density = 1000000 * cell.population / (resolution * resolution)
if (density > 1500) return "#993404"
else if (density > 600) return "#d95f0e"
else if (density > 200) return "#fe9929"
else if (density > 60) return "#fec44f"
else if (density > 15) return "#fee391"
else return "#ffffd4"
}
//define style
const style = new gridviz.ShapeColorSizeStyle({ color: colorFunction })
//add layer to map
map.layers = [new gridviz.GridLayer(dataset, [style])]
</script>