-
Notifications
You must be signed in to change notification settings - Fork 4
/
agnadressen.html
122 lines (115 loc) · 4.37 KB
/
agnadressen.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
<!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='https://npmcdn.com/@turf/turf/turf.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>
<script>
var hilitebuilding = function(e) {
map.setFilter("buildingshover", ["==", "gebwbagid", e.features[0].properties.gebwbagid]);
}
var unhilitebuilding = function() {
map.setFilter("buildingshover", ["==", "gebwbagid", ""]);
};
function formatInfo(features) {
// features is structured like: [{layer:{id:layername, type: line|fill|symbol}, properties: {key:value,key:value}}, ..]
if (!features.length) {
return "";
}
var result = '<table border="1"><thead><tr><th>stijllaag</th><th>feature eigenschappen</th></tr></thead>';
for (i = 0; i < features.length; i++) {
result += "<tr><td>" + features[i].layer.id + "</td><td>";
var first = true;
for (key in features[i].properties) {
if (first) {
first = false;
} else {
result += ", ";
}
result += key + ":" + features[i].properties[key]
}
result += "</td></tr>";
}
result += "</table>";
return result;
}
</script>
</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/bagagnadressen.json',
zoom: 18,
center: [4.9132, 52.34227],
});
map.on("load", function(){
//map.on("mousemove", "buildings", hilitebuilding);
// Reset the buildingshover layer's filter when the mouse leaves the layer.
//map.on("mouseleave", "buildings", unhilitebuilding);
map.addLayer ({
'id': 'gebouwbuffer',
'type' : 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': []
}
},
'layout': {},
'paint': {
'fill-color': 'green',
'fill-opacity': 0.6,
'fill-outline-color': 'white'
}
});
map.addLayer ({
'id': 'clickobject',
'type' : 'fill',
'source': {
'type': 'geojson',
'data': {
'type': 'FeatureCollection',
'features': []
}
},
'layout': {},
'paint': {
'fill-color': 'rgba(0,0,0,0)',
//'fill-opacity': 0.1,
'fill-outline-color': 'red'
}
});
map.on('click', function (e) {
var features = map.queryRenderedFeatures(e.point, {"layers":["buildings"]}).map(function(feature){ return {layer: {id: feature.layer.id, type: feature.layer.type}, properties:(feature.properties)};});
if (features.length) {
var bagid = features[0].properties.gebwbagid;
var sourceFeatures = map.querySourceFeatures("bagagngebouwen", {"sourceLayer": "gebouwen", "filter": ["==", "gebwbagid", bagid]});
if (sourceFeatures.length) {
var combinedFeature = sourceFeatures[0];
for (var i = 1; i < sourceFeatures.length; i++) {
combinedFeature = turf.union(combinedFeature, sourceFeatures[i]);
}
map.getSource('gebouwbuffer').setData(turf.buffer(combinedFeature, 0.05, {units:'kilometers'}));
map.getSource('clickobject').setData(combinedFeature);
}
console.log(sourceFeatures.length);
}
document.getElementById('info').innerHTML = formatInfo(features); //JSON.stringify(features, null, 2);
});
});
</script>
</body>
</html>