/
soundsofcity.html
executable file
·121 lines (107 loc) · 4.19 KB
/
soundsofcity.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
<!DOCTYPE html>
<html>
<head>
<meta charset=utf-8 />
<title>Sounds Of the City - Mumbai </title>
<meta name='viewport' content='initial-scale=1,maximum-scale=1,user-scalable=no' />
<script src='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.js'></script>
<link href='https://api.mapbox.com/mapbox.js/v2.4.0/mapbox.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>
L.mapbox.accessToken = 'pk.eyJ1IjoiaW5kaWFudGlua2VyIiwiYSI6ImNpcTFzYnpqejAxMGlmaG5uOWlheDM3d2sifQ.IHWtGSGCMWq7T_SQCuv7LA';
var map = L.mapbox.map('map', 'mapbox.streets');
// The GeoJSON representing a point feature with a property of 'sounds'
var geoJson = {
type: 'FeatureCollection',
features: [{
type: 'Feature',
properties: {
title: 'Dadar',
'marker-color': '#f00',
'marker-size': 'large',
'marker-symbol': 'star',
url: 'http://en.wikipedia.org/wiki/Mumbai',
sounds: '<iframe width="80%" height="100" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/286542914&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>'
},
geometry: {
type: 'Point',
coordinates: [72.8341091,19.0207793]
}
},
{
type: 'Feature',
properties: {
title: 'Juhu Chaupati',
'marker-color': '#f00',
'marker-size': 'large',
'marker-symbol': 'star',
url: 'http://en.wikipedia.org/wiki/Mumbai',
sounds: '<iframe width="80%" height="100" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/286542908&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>'
},
geometry: {
type: 'Point',
coordinates: [72.8236957,19.0878018]
}
}
,
{
type: 'Feature',
properties: {
title: 'Mumbai Central',
'marker-color': '#f00',
'marker-size': 'large',
'marker-symbol': 'star',
url: 'http://en.wikipedia.org/wiki/Mumbai',
sounds: '<iframe width="80%" height="100" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/286542918&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>'
},
geometry: {
type: 'Point',
coordinates: [72.8218589,18.9698996]
}
}
,
{
type: 'Feature',
properties: {
title: 'Dadar Procession',
'marker-color': '#f00',
'marker-size': 'large',
'marker-symbol': 'star',
url: 'http://en.wikipedia.org/wiki/Mumbai',
sounds: '<iframe width="80%" height="100" scrolling="no" frameborder="no" src="https://w.soundcloud.com/player/?url=https%3A//api.soundcloud.com/tracks/286542913&auto_play=false&hide_related=false&show_comments=true&show_user=true&show_reposts=false&visual=true"></iframe>'
},
geometry: {
type: 'Point',
coordinates: [72.840056,19.0210741]
}
}
]
};
var myLayer = L.mapbox.featureLayer().addTo(map);
// Add the iframe in a custom popup using the custom feature properties
myLayer.on('layeradd', function(e) {
var marker = e.layer,
feature = marker.feature;
// Create custom popup content
var popupContent = '<a target="_blank" class="popup" href="' +
feature.properties.url + '">' +
feature.properties.sounds +
'<h2>' + feature.properties.title + '</h2>' + '</a>';
// http://leafletjs.com/reference.html#popup
marker.bindPopup(popupContent,{
closeButton: false,
minWidth: 320
});
});
// Add features to the map
myLayer.setGeoJSON(geoJson);
map.setView([19.04,72.85], 11);
</script>
</body>
</html>