-
Notifications
You must be signed in to change notification settings - Fork 1
/
index_1.html
70 lines (64 loc) · 2.05 KB
/
index_1.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
<!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.17.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.17.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<div id='map'></div>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiY3J1emluNzN2dyIsImEiOiI3RDdhUi1NIn0.jaEqREZw7QQMRafKPNBdmA';
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/mapbox/light-v8', //stylesheet location
center: [-118.243685,34.052234], // starting position
zoom: 11 // starting zoom
});
var canvas = map.getCanvasContainer();
map.on('load', function () {
map.addSource('2015_ent', {
type: 'vector',
url: 'mapbox://cruzin73vw.9i44wx2w'
});
map.addLayer({
"id": "2015_ent",
"type": "circle",
"source": "2015_ent",
"source-layer": "2015_ent",
"layout": {
"visibility": "visible"
},
"paint": {
"circle-radius": 6,
"circle-color": "hsl(116, 100%, 52%)",
"circle-opacity":.25
}
});
//Filters by Case Number
});
map.on('click',function(){
//console.log(e.point);
var features = map.queryRenderedFeatures([[0,900],[1920,0]], {
layers: ['2015_ent']
});
//console.log(canvas.getBoundingClientRect());
//console.log(features);
var features_1=features.filter(function(el){
//console.log(el.properties['Case Numbe'].indexOf("ZC")>=0);
return el.properties['Case Numbe'].indexOf("SPR")>=0;
});
//console.log(features_1);
map.setFilter('2015_ent', ['in', 'Case Numbe'].concat(features_1.map(function(feature) {
return feature.properties['Case Numbe'];
})));
});
</script>
</body>
</html>