-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathevent.html
181 lines (163 loc) · 7.37 KB
/
event.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
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>event</title>
<link rel="stylesheet" href="css/style.css">
<link href='https://fonts.googleapis.com/css?family=Montserrat' rel='stylesheet' type='text/css'>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.2.0/dist/leaflet.css"
integrity="sha512-M2wvCLH6DSRazYeZRIm1JnYyh22purTM+FDB5CsyxtQJYeKq83arPe5wgbNmcFXGqiSH2XR8dT/fJISVA1r/zQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.2.0/dist/leaflet.js"
integrity="sha512-lInM/apFSqyy1o6s89K4iQUKg6ppXEgsVxT35HbzUupEVRh2Eu9Wdl4tHj7dZO0s1uvplcYGmt3498TtHq+log=="
crossorigin=""></script>
</head>
<body id="ebody">
<header id="eventt">
<h1 class="sub">Recent events</h1>
</header>
<nav class="navcontainer">
<!-- set the link.href different according to the singer so that it can link to correspoding song page -->
<h3 class="backk"><a id="stoe" href="javascript:void(0)" onclick="etos(); ">Find songs </a><a href=index.html>Back</a></h3>
<form class="reeform" action="event.html" method="GET">
<label for="reevent">Event:
<input type="text" name="search" id="reevent">
</label>
<input type="submit" id="event_button" value="search">
</form>
</nav>
<p id="loc">Location</p>
<div id="mapcontainer">
<div id="mappp">
</div>
<ol id='ppp'></ol>
</div>
<footer>
<h3 class="copyright">© Hexarch copyright </h3>
</footer>
<script>
//for zoom and manipulate markers
var markers={};
var markerArray = [];
// query in the search box
var searchh;
//the find songs button in the navigation bar can link corresponding song
var etos=function(){
var parameters=extract();
var etos=parameters['search'];
window.location.href = "login.html?search="+etos;
};
// deal with response, creater marker according to the location and adding information in the marker
var parseResponse = function() {
var response = JSON.parse(this.response);
var items=response._embedded.events;
// show information on the map
for (var i=0;i<items.length;i++){
//show the list item in the event list
processResponse(items[i]);
//find loctions of the event
var loc=items[i]._embedded.venues[0].location
console.log(loc)
//create markers
markers[items[i].id]=(L.marker([loc.latitude, loc.longitude]))
// deal with the pricerange
if (items[i].priceRanges!=undefined){
// add link in the marker
markers[items[i].id].bindPopup("<b>"+"<a href="+items[i].url+" target=_blank>"+(i+1)+"."+items[i].name+"</a>"+"</b><br>"
+items[i].dates.start.localDate+"<br>"+items[i]._embedded.venues[0].country.name+"<br>"
+items[i]._embedded.venues[0].city.name+"<br>"+"$"+items[i].priceRanges[0].min+"--$"+items[i].priceRanges[0].max)
}
else {
markers[items[i].id].bindPopup("<b>"+"<a href="+items[i].url+" target=_blank>"+(i+1)+"."+items[i].name+"</a>"+"</b><br>"
+items[i].dates.start.localDate+"<br>"+items[i]._embedded.venues[0].country.name+"<br>"
+items[i]._embedded.venues[0].city.name)
}
// make makers can be clicked to show information
markerArray.push(markers[items[i].id]);
markers[items[i].id].on('click', function(){
this.openPopup();
})
};
// make the map zoom in to proper view to see all makers
var featureGroup = L.featureGroup(markerArray).addTo(mymap);
mymap.fitBounds(featureGroup.getBounds());
}
// Function to ensure parameters used in request are encoded correctly
var encodeParameters = function(params) {
var strArray = [];
for (var key in params) {
if (params.hasOwnProperty(key)) {
var paramString = key + "=" + params[key];
strArray.push(paramString);
}
}
return strArray.join("&");
}
//function show the event list
var processResponse=function(info){
var item=document.createTextNode(info.name+'('+info.dates.start.localDate+')');
var para=document.createElement("li");
var body=document.querySelector('#ppp');
para.appendChild(item);
para.id=info.id;
body.appendChild(para);
if (info.imageLinks!=undefined){
var img=document.createElement("img");
img.src = info.imageLinks.smallThumbnail;
body.appendChild(img);
}
// make the item in the list can be clicked to zoom the makers and information in the map
para.addEventListener('click', function(){
markers[para.id].openPopup();
var latLngs = [ markers[para.id].getLatLng() ];
var markerBounds = L.latLngBounds(latLngs);
mymap.fitBounds(markerBounds);
})
}
// initiate the map
var mymap = L.map('mappp').setView([51.505, -0.09], 13);
var marker = L.marker([51.5, -0.09]).addTo(mymap);
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}', {
attribution: 'Map data © <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery © <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 7,
id: 'mapbox.streets',
accessToken: 'pk.eyJ1Ijoid3R0dHR0dDEyMyIsImEiOiJjamE5cWYwancwbDZzMndxZWpkNzRldHNxIn0.90ZN7qBm2mgV7ciNymNJZg',
}).addTo(mymap);
var extract=function(){
var query=window.location.search.substring(1);
var params=query.split("&");
var return_data={};
for (var i=0;i<params.length;i++){
var keyvalue=params[i].split('=');
console.log(keyvalue);
return_data[keyvalue[0]]=keyvalue[1]
}
return return_data;
}
var parameters=extract();
searchh=parameters['search'];
// send request to api
var event = function() {
parameters = {
term: searchh,
//size: 10,
//apikey:'LYlkrschyiZZg7173JDdovwvgBllKXBP'
latitude:37.786882,
longitude:-122.399972,
};
var xhttp = new XMLHttpRequest();
xhttp.addEventListener('load', parseResponse);
var url = 'https://api.yelp.com/v3/businesses/search?'+ encodeParameters(parameters);
console.log(url);
xhttp.open('GET', url);
xhttp.setRequestHeader('Authorization', 'Bearer '+
'oFHsJ268xS68YA8NxV4l6fQpb8xwO0xelTzGfKE1gQZUuHE-NmQEf_flSPB18kyZ_IvZjUXOKSL3_3EYb_0lMUfZdsbGwODk1qyTXO2W59tPFp8SNK-65hy5iab-WnYx');
//xhttp.setRequestHeader('Content-Type','application/json');
xhttp.send();
};
// page load to run event function
window.onload=event();
</script>
</body>
</html>