-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
134 lines (121 loc) · 4.28 KB
/
index.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
123
124
125
126
127
128
129
130
131
132
133
134
<!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.30.0/mapbox-gl.js'></script>
<link href='https://api.tiles.mapbox.com/mapbox-gl-js/v0.30.0/mapbox-gl.css' rel='stylesheet' />
<style>
body { margin:0; padding:0; }
#map { position:absolute; top:0; bottom:0; width:100%; }
</style>
</head>
<body>
<style type='text/css'>
#info {
display: block;
position: absolute;
right: 10px;
margin: 0px;
width: 150px;
height: auto;
padding: 10px;
border: none;
border-radius: 3px;
font-size: 12px;
text-align: left;
color: #222;
background: #fff;
top: 30px;
}
#info span{
margin-top: 2px;
border-radius: 50%;
display: inline-block;
height: 10px;
margin-right: 5px;
width: 10px;
opacity: 0.8;
}
#info .container{
opacity: 0.8;
right:30px;
position: relative;
}
</style>
<div id='map'></div>
<pre id='info'>
<b>Legend<b>
<div class='container'>
<span style='background-color: #A85F4D'></span>People
<span style='background-color: #AB62F5'> </span>Birds-Animals
<span style='background-color: #55C9EB'> </span>Machine
<span style='background-color: #C7B32C'> </span>Vehicles
<span style='background-color: #FD4879'> </span>Daily-chores
<span style='background-color: #2A792D'> </span>Nature
Size is proportional to
intensity of sound.
</div>
</pre>
<script>
mapboxgl.accessToken = 'pk.eyJ1IjoiYWJoaTE5MSIsImEiOiJjaW0wN3lqd3kwOG5rdTlrcjRvMmJ6Nzl5In0.e4wsWhGuh8Arbubho1PIvg';
//Set bounds to NID Bangalore
var map = new mapboxgl.Map({
container: 'map', // container id
style: 'mapbox://styles/abhi191/cixprghd800422rp5a876mrib', //stylesheet location
center: [77.534010, 13.035795], // starting position /
zoom: 17, // starting zoom
pitch: 60,
bearing: -67.5,
});
map.on('load', function() {
map.addLayer({
'id': '3d-buildings',
'source': 'composite',
'source-layer': 'building',
'filter': ['==', 'extrude', 'true'],
'type': 'fill-extrusion',
'minzoom': 15,
'paint': {
'fill-extrusion-color': '#aaa',
'fill-extrusion-height': {
'type': 'identity',
'property': 'height'
},
'fill-extrusion-base': {
'type': 'identity',
'property': 'min_height'
},
'fill-extrusion-opacity': .6
}
});
});
var popup = new mapboxgl.Popup({
closeButton: false,
closeOnClick: false
});
map.on('mousemove', function(e) {
var features = map.queryRenderedFeatures(e.point, { layers: ['nid-sounds-birdsanimal','nid-sounds-birdsanimal copy','nid-sounds-birdsanimal copy 1',
'nid-sounds-dailychores','nid-sounds-dailychores copy',
'nid-sounds-machine','nid-sounds-machine copy',
'nid-sounds-vehicles','nid-sounds-vehicles copy',
'nid-sounds-materials','nid-sounds-materials copy',
'nid-sounds-people','nid-sounds-people copy','nid-sounds-people copy 1',
'nid-sounds-nature'] });
// Change the cursor style as a UI indicator.
map.getCanvas().style.cursor = (features.length) ? 'pointer' : '';
if (!features.length) {
popup.remove();
return;
}
var feature = features[0];
// Populate the popup and set its coordinates
// based on the feature found.
popup.setLngLat(feature.geometry.coordinates)
.setHTML("Sounds of <b>"+feature.properties.source+"</b> is "+feature.properties.intensity)
.addTo(map);
});
</script>
</body>
</html>