forked from mapbox/mapbox-gl-js
-
Notifications
You must be signed in to change notification settings - Fork 0
/
query_features.html
117 lines (105 loc) · 3.1 KB
/
query_features.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
<!DOCTYPE html>
<html>
<head>
<title>Mapbox GL JS debug page</title>
<meta charset='utf-8'>
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
<link rel='stylesheet' href='../dist/mapbox-gl.css' />
<style>
body { margin: 0; padding: 0; }
html, body, #map { height: 100%; }
#controls { position: absolute; top: 0; left: 0; }
</style>
</head>
<body>
<div id='map'></div>
<div id='controls'>
<label><input id='terrain-checkbox' type='checkbox'> terrain</label><br />
</div>
<script src='../dist/mapbox-gl-dev.js'></script>
<script src='../debug/access_token_generated.js'></script>
<script>
var map = new mapboxgl.Map({
container: 'map',
zoom: 12.5,
center: [-77.01866, 38.888],
hash: true,
style: 'mapbox:https://styles/mapbox/streets-v9'
});
map.addControl(new mapboxgl.NavigationControl());
var emptyFc = {type: 'FeatureCollection', features: []};
map.on('style.load', function() {
map.addSource('queried', {type: 'geojson', data: emptyFc});
map.addLayer({
"id": "query",
"type": "line",
"source": "queried",
"paint": {
"line-color": "#8D8DEC",
"line-width": {base: 1.5, stops: [[5, 0.75], [18, 32]]}
}
}, 'country-label-sm');
map.addSource('boxsource', {type: 'geojson', data: emptyFc});
map.addLayer({
"id": "box",
"type": "fill",
"source": "boxsource",
"paint": {
"fill-color": "#8D8DEC",
"fill-opacity": 0.5
},
"interactive": true
}, 'country-label-sm');
});
var box = [];
map.on('click', function(e) {
if (box.length >= 2) {
box = [];
}
if (box.length <= 1) {
box.push(e.point);
}
if (box.length === 2) {
var boxcoords = box
.map(map.unproject.bind(map))
.map(function (latlng) { return [latlng.lng, latlng.lat]; })
.sort(function (a, b) { return a[0] - b[0]; });
boxcoords = [
boxcoords[0],
[boxcoords[0][0], boxcoords[1][1]],
boxcoords[1],
[boxcoords[1][0], boxcoords[0][1]],
boxcoords[0]
];
var results = map.queryRenderedFeatures(box, {});
map.getSource('queried').setData({
type: 'FeatureCollection',
features: results
});
map.getSource('boxsource').setData({
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {},
geometry: {
type: 'LineString',
coordinates: boxcoords
}
}]
});
}
});
document.getElementById('terrain-checkbox').onclick = function() {
if (!map.getSource('mapbox-dem')) {
map.addSource('mapbox-dem', {
"type": "raster-dem",
"url": "mapbox:https://mapbox.terrain-rgb",
"tileSize": 512,
"maxzoom": 14
});
}
map.setTerrain(this.checked ? {"source": "mapbox-dem", "exaggeration": 1.5} : null);
};
</script>
</body>
</html>