· 6 years ago · Sep 11, 2019, 01:42 AM
1// TODO 1: Add the Mapbox code
2let mapAreaRef = document.getElementById("mapArea");
3mapboxgl.accessToken = 'pk.eyJ1IjoiYXJ2aW5ka2F1ciIsImEiOiJjamt0c20wcXIwOTE3M29tbXYyc2M2aXhsIn0.mOrPB0bbVVm9NitiWvz96w';
4// creating a new map instance
5let map = new mapboxgl.Map({
6 container: 'map',
7 center: [144.9648731,-37.8182711],
8 zoom: 16,
9 style: 'mapbox://styles/mapbox/streets-v9'
10});
11// TODO 2: This function get executed when Get Current Location button is clicked.
12// Add code here for geolocation api request. Use 'getCurrentPosition'
13// Remember to change the function name
14
15function getCurrentLocation()
16 {
17 navigator.geolocation.getCurrentPosition(function(position) {
18 new mapboxgl.LngLat(-122.420679, 37.772537);
19 // map.panTo(position.coords.latitude, position.coords.longitude);});
20 map.panTo(new mapboxgl.LngLat(position.coords.longitude, position.coords.latitude));
21
22 let marker = new mapboxgl.Marker({ "color": "#FF8C00" });
23 marker.setLngLat(new mapboxgl.LngLat(position.coords.longitude, position.coords.latitude));
24
25 // Display the marker.
26 marker.addTo(map);
27 });
28
29 // TODO 3 : Add the callback function for the geolocation api.
30 navigator.geolocation.watchPosition(function(position) {
31 map.panTo(new mapboxgl.LngLat(position.coords.longitude, position.coords.latitude));});
32 }
33
34// TODO 4 : This function get executed when Get current Weather button is clicked.
35// Use DarkSky api to request current weather for the current location.
36// Check whether a valid current location coordinates are available before making a api request.
37// If the coordinates are not available display a suitable error message as an alert.
38
39/*
40 jsonpRequest function
41 This function is used to generate a querystring for a web service url based on a data payload.
42 It will add a script tag to the bottom of the body tag on the HTML page.
43 */
44/*
45function jsonpRequest(url, lat, lng, data)
46{
47 // Build URL parameters from data object.
48 let params = "";
49 // For each key in data object...
50 for (let key in data)
51 {
52 if (data.hasOwnProperty(key))
53 {
54 if (params.length == 0)
55 {
56 // First parameter starts with '?'
57 params += "?";
58 }
59 else
60 {
61 // Subsequent parameter separated by '&'
62 params += "&";
63 }
64
65 let encodedKey = encodeURIComponent(key);
66 let encodedValue = encodeURIComponent(data[key]);
67
68 params += encodedKey + "=" + encodedValue;
69 }
70 }
71
72 let script = document.createElement('script');
73 script.src = url + lat + ", " + lng + params;
74 document.body.appendChild(script);
75}
76
77// TODO 5: callback function for DarkSky API.
78//https://api.darksky.net/forecast/163215dd819926db4263393be9bea844/-37.9110467,145.1343136
79//?exclude=exclusionList,minutely,hourly,daily&units=si&callback=funcName
80function currentWeather(data)
81{
82 console.log(data.currently);
83}
84
85let data =
86 {
87 callback: "currentWeather"
88 };
89
90//let lat = new mapboxgl.LngLat(data.coords.latitude);
91let lat = -37.9110467;
92//let lng = new mapboxgl.LngLat(data.coords.longitude);
93let lng = 145.1343136;
94let url = "https://api.darksky.net/forecast/163215dd819926db4263393be9bea844/"
95 jsonpRequest(url, lat, lng, data);
96*/
97
98function callAPI(){
99 let data =
100 {
101 callback: "currentWeather"
102 };
103 let lat = -37.9110467;
104 let lng = 145.1343136;
105 let url = "https://api.darksky.net/forecast/163215dd819926db4263393be9bea844/";
106
107 jsonpRequest(url, lat, lng, data);
108}
109
110 function jsonpRequest(url, lat, lng, data)
111 {
112 // Build URL parameters from data object.
113 let params = "";
114 // For each key in data object...
115 for (let key in data)
116 {
117 if (data.hasOwnProperty(key))
118 {
119 if (params.length == 0)
120 {
121 // First parameter starts with '?'
122 params += "?";
123 }
124 else
125 {
126 // Subsequent parameter separated by '&'
127 params += "&";
128 }
129
130 let encodedKey = encodeURIComponent(key);
131 let encodedValue = encodeURIComponent(data[key]);
132 params += encodedKey + "=" + encodedValue;
133 }
134 }
135
136 console.log(url + lat + "," + lng + params);
137 let script = document.createElement('script');
138 script.src = url + lat + "," + lng + params;
139 document.body.appendChild(script);
140 }
141
142 //https://api.darksky.net/forecast/163215dd819926db4263393be9bea844/-37.9110467,145.1343136
143 //?exclude=exclusionList,minutely,hourly,daily&units=si&callback=currentWeather
144
145 function currentWeather (data)
146 {
147 console.log(data.currently);
148 document.getElementById("temp").innerHTML = data.currently.temperature;
149 document.getElementById("sum").innerHTML = data.currently.summary;
150 document.getElementById("hud").innerHTML = data.currently.humidity;
151 document.getElementById("pres").innerHTML = data.currently.pressure;
152 document.getElementById("dewP").innerHTML = data.currently.dewPoint;
153 document.getElementById("rays").innerHTML = data.currently.uvIndex;
154 }
155
156 // Extract the weather information and display as a table.(include units)
157 // javscript code for modifing the HTML table is :
158 /* let outputTableRef = document.getElementById('table-weather'); // create a reference to outputTableRef
159 let rowHTML="";
160 rowHTML+='<tr><th>'+'property name'+'</th><td>'+'property value'+'</td></tr>'; */