-
Notifications
You must be signed in to change notification settings - Fork 4
/
cbs.html
120 lines (112 loc) · 4.05 KB
/
cbs.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
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8' />
<title></title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.37.0/mapbox-gl.css' rel='stylesheet' />
<script src="node_modules/papaparse/papaparse.min.js"></script>
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:20%; width:100%; }
#info { position:absolute; top:80%; height:20%; width: 100%; outline: 1px solid black; background: white; overflow: auto;}
</style>
</head>
<body>
<div id='map'></div>
<div id='info'></div>
<script>
//mapboxgl.accessToken = 'pk.eyJ1IjoiYW5uZWIiLCJhIjoiOVR1NFVoRSJ9.x0d9OLRZADt-GJaDqE0XPg';
var map = new mapboxgl.Map({
container: 'map',
style: 'styles/freetilehosting/positron.json',
zoom: 7,
center: [4.913, 52.18]
});
// First value is the default, used where there is no data
var stops = [["0", "rgba(0,0,0,0)"]];
var dataKeyField = 'gwb_code_10'
var dataValueField = 'p_1gezw';
Papa.parse("data/cbsgemeenten2016.csv", {
"download": true,
"complete": function(results) {
var data = results.data;
var valueFieldNumber = data[0].indexOf(dataValueField);
var minValue = Number.MAX_VALUE;
var maxValue = -Number.MAX_VALUE;
for (var i = 1; i < data.length; i++) {
data[i][valueFieldNumber] = parseFloat(data[i][valueFieldNumber]); // convert to numeric
if (minValue > data[i][valueFieldNumber]) {
minValue = data[i][valueFieldNumber];
}
if (maxValue < data[i][valueFieldNumber]) {
maxValue = data[i][valueFieldNumber];
}
}
var keyFieldNumber = data[0].indexOf(dataKeyField);
// http://colorbrewer2.org/#type=sequential&scheme=Greens&n=8
for (i = 1; i < data.length; i++) {
var ratio = (data[i][valueFieldNumber] - minValue) / (maxValue - minValue);
var red = Math.floor(247 * ratio);
var green = 90 + Math.floor((252 - 90) * ratio);
var blue = 50 + Math.floor((245 - 50) * ratio);
var color = "rgba(" + red + "," + green + "," + blue + ",1)";
stops.push([data[i][keyFieldNumber], color]);
}
}
});
map.on('load', function () {
map.addSource("gemeenten", {
type: 'vector',
tiles:["https://saturnus.geodan.nl/mvt/gemeenten2016/{z}/{x}/{y}.mvt"],
"bounds": [3.38,50.73,7.2432,53.5455]
});
map.addLayer({
"id": "gemeenten",
"minzoom": 5,
"type": "fill",
"source": "gemeenten",
"source-layer": "gemeenten2016",
"filter": [ '==', 'water', 'NEE'],
"paint": {
"fill-color": {
"property": "gm_code",
"type": "categorical",
"stops": stops
},
"fill-opacity": 0.8
}
}, 'place_other');
map.addLayer({
'id': "gemeentewater",
"minzoom": 5,
"type": "fill",
"source": "gemeenten",
"source-layer": "gemeenten2016",
"filter": [ '==', 'water', 'JA'],
"paint": {
"fill-color": "hsl(205,56%, 73%)",
"fill-opacity": 0.5
}
}, 'place_other');
map.addLayer({
"id": "gemeentenline",
"minzoom": 5,
"type": "line",
"source": "gemeenten",
"source-layer": "gemeenten2016",
"paint": {
"line-color": 'gray',
"line-width": 0.5,
"line-opacity": 0.5
}
}, 'place_other');
});
map.on('mousemove', function (e) {
var features = map.queryRenderedFeatures(e.point).map(function(feature){ return {layer: {id: feature.layer.id, type: feature.layer.type}, properties:(feature.properties)};});
document.getElementById('info').innerHTML = JSON.stringify(features, null, 2);
});
</script>
</body>
</html>