-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathweather_map.html
286 lines (276 loc) · 12.6 KB
/
weather_map.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
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Weather Practice</title>
<!-- mobileview-->
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- weather-->
<!-- mapbox / geocode-->
<link href="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.css" rel="stylesheet">
<script src="js/mapbox-geocoder-utils.js"></script>
<!-- bootstrap-->
<link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-EVSTQN3/azprG1Anm3QDgpJLIm9Nao0Yz1ztcQTwFspd3yD65VohhpuuCOmLASjC" crossorigin="anonymous">
<!-- css-->
<link rel="stylesheet" href="css/weather_map.css">
</head>
<body class="bg-gradient">
<header class="d-flex">
<h1 class="bg-primary text-light vw-100">Weather Map</h1>
</header>
<main>
<!--searchbar-->
<section class ="searchbarSection">
<div><span id="user_display"></span></div>
<label class="text-center mb-2 col-12">Weather Map Search:</label>
<input type="text" id="user_input" placeholder="San Antonio, Texas"
class="inputFind mb-3 text-center col-12">
<button id="clickme" class="buttonFind mb-0 col-12">Search Area</button>
</section>
<!-- holding weather boxes-->
<section id="allWeatherContaiers" class="allWeatherContaiers text-sm-center d-flex">
<!-- ^----$("#allWeatherContaiers").html(html);-->
</section>
<!--the map, it was difficult to center outside of bootstrap.-->
<div id="map" class="m-auto mt-3 mb-5"></div>
</main>
<footer>
<div id="info"></div>
<!-- icons?-->
<!-- https://developer.mozilla.org/en-US/docs/Learn/Accessibility/HTML-->
</footer>
</div>
<!--bootstrap-->
<script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-MrcW6ZMFYlzcLA8Nl+NtUVF0sA7MsXsP1UyJoMp4YLEuNSfAP+JcXn/tWtIaxVXM" crossorigin="anonymous"></script>
<!--jQuery-->
<script src="https://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous"></script>
<!--mapbox-->
<script src="https://api.mapbox.com/mapbox-gl-js/v2.7.0/mapbox-gl.js"></script>
<script src="js/mapbox-geocoder-utils.js"></script>
<!--keys-->
<script src="js/keys.js"></script>
<script>
// // Exercise
// // Create a new HTML file called weather_map.html.
// // As you complete each step, commit your changes and push them to GitHub.
// // Using HTML, CSS, jQuery, AJAX, and the OpenWeatherMap API, start by showing the current conditions for city you live in on your page.
// // Update your layout and AJAX request(s) to display a five day forecast for the city you live in that looks like the screenshot below.
// // If you want to add the icons the URLs for OpenWeatherMap's icons are formatted like: http://openweathermap.org/img/w/[icon].png where [icon] comes from the API response.
// // Refer to your Mapbox API exercise. Recreate the map below your 5 day forecast. Read through the documentation for the Mapbox API and figure out how to allow the user to drop a pin on any place on the map. Once the user drops a pin, grab its coordinates and feed those into your OpenWeatherMap API. Update the five-day forecast with the information from those coordinates (you should also get rid of your input boxes at this point).
// // Add a Mapbox text input to search by location and have the forecast update when a new location is searched.
// // As a bonus make sure you can update the marker's position to the new search result.
$(document).ready(function() {
"use strict";
$('#clickme').click(function(){
$('#user_display').html($('#user_input').val());
});
mapboxgl.accessToken = MAPBOX_API_TOKEN;
const map = new mapboxgl.Map({
container: 'map', // container ID
style: 'mapbox://styles/mapbox/streets-v11', // style URL
center: [-98.4916, 29.4252], // starting position [lng, lat]
zoom: 9 // starting zoom
});
// Create a default Marker and add it to the map.
const marker1 = new mapboxgl.Marker({
draggable: true
})
.setLngLat([-98.4916, 29.4252])
.addTo(map);
marker1.on('drag', (e) => {
let newMarkerLat = parseFloat((marker1._lngLat.lat).toFixed(3));
let newMarkerLng = parseFloat((marker1._lngLat.lng).toFixed(3));
console.log(newMarkerLng, newMarkerLat);
});
//weather data code bellow;
$.get('https://api.openweathermap.org/data/2.5/onecall', {
lat: parseFloat((marker1._lngLat.lat).toFixed(3)),
lon: parseFloat((marker1._lngLat.lng).toFixed(3)),
appid: WEATHER_TOKEN,
exclude: 'minutely,hourly,current,alerts',
units: 'imperial'
}).done(function (data) {
console.log(data);
var html = "";
for(var i = 0; i < 5; i++) {
const date1 = Date(data.daily[i].dt);
// const date2 = date1.toUTCString();
html +=
"<section class='everyCard'>" +
"<span>" + date1 + "</span>" +
"<span>" + "Temperature: " + "</span>" + "<b>" + parseInt(data.daily[i].temp.max) + "<span>" +
"º / " +
"</span>" +
parseInt(data.daily[i].temp.min)
+ "º</b><br>" +
"Description: " + "<b>" + data.daily[i].weather[0].description
+ "</b><br>" +
"<details>" +
"Humidity: " + "<b>" + data.daily[i].humidity
+ "</b><br>" +
"Wind: " + "<b>" + data.daily[i].wind_speed
+ "</b><br>" +
"Pressure: " + "<b>" + data.daily[i].pressure
+ "</b>" +
"</details>" +
"</section>"
}
$("#allWeatherContaiers").html(html);
}).fail(function (jqXhr, status, error) {
console.log(jqXhr);
console.log(status);
console.log(error);
});
});
</script>
</body>
</html>
<!--//trial and errors// CODE DUMP ;-; ->-->
<!--//<div class="card text-dark bg-light mb-3" style="max-width: 18rem;">-->
<!--// <div class="card-header">Header</div>-->
<!--// <div class="card-body">-->
<!--// <h5 class="card-title">Light card title</h5>-->
<!--// <p class="card-text">Some quick example text to build on the card title and make up the bulk of the card's content.</p>-->
<!--// </div>-->
<!--// "<h4>" + data.daily[i].dt + "</h4>" +-->
<!--// "Temperature: " + data.daily[i].temp.max + "/" + data.daily[i].temp.min +-->
<!--//-->
<!--// "Description: " + "<h4>" + data.daily[i].weather[i].description + "</h4>" +-->
<!--//-->
<!--// "Humidity: " + "<h4>" + data.daily[i].humidity + "</h4>" +-->
<!--//-->
<!--// "Wind: " + "<h4>" + data.daily[i].wind_speed + "</h4>" +-->
<!--//-->
<!--// "Pressure: " + "<h4>" + data.daily[i].pressure + "</h4>"-->
<!--//https://java.codeup.com/img/5day-forecast-map.png-->
<!--//https://api.jquery.com/jquery.each/-->
<!--// $.each(data, function (index, value){-->
<!--// console.log(index, value);-->
<!--// // $(data).each(function (i, obj) {-->
<!--// // });-->
<!--// }).fail(function (jqXhr, status, error) {-->
<!--// console.log(jqXhr);-->
<!--// console.log(status);-->
<!--// console.log(error);-->
<!--// });-->
<!--// // console.log(data, "--Testing data---", data.daily[0].temp.day);-->
<!--// // $.each(data, function (index, value){-->
<!--// // console.log(index, value);-->
<!--// // });-->
<!--// // I can now go through the index values...but I'm not sure what to do with this, so I'll try something else.-->
<!--// // console.log(i + obj)-->
<!--// // })-->
<!--// // $("#weatherData").html("<p>" + data.daily[0].temp.day + "</p>"); this works-->
<!--// // // log 63 from humidity ---it matters that its under this.-->
<!--// // console.log(data.daily[0].temp.day + " will supposedly be the weather today");-->
<!--// //-->
<!--// //-->
<!--// // }).fail(function(jqXhr, status, error) {-->
<!--// // console.log(jqXhr);-->
<!--// // console.log(status);-->
<!--// // console.log(error);-->
<!--// // });-->
<!--// // function createHTML(data)-->
<!--// // {-->
<!--// // var html = "";-->
<!--// // for (var i = 0; i < data.length; i += 1) {-->
<!--// // html +=-->
<!--// // "<p>" + data.daily[i].temp.day + "</p>";-->
<!--// // }-->
<!--// // return html;-->
<!--// // };-->
<!--// // $.get('https://api.openweathermap.org/data/2.5/onecall', {-->
<!--// // lat: 29.4252,-->
<!--// // lon: -98.4916,-->
<!--// // appid: WEATHER_TOKEN,-->
<!--// // exclude: 'minutely,hourly,current,alerts',-->
<!--// // units: 'imperial'-->
<!--// // }).done(function(data) {-->
<!--// // $('#weatherData').html(createHTML);-->
<!--// // })-->
<!--// // .fail(function (jqXhr, status, error) {-->
<!--// // console.log(jqXhr);-->
<!--// // console.log(status);-->
<!--// // console.log(error);-->
<!--// // });-->
<!--// // });-->
<!--// // // $.get('https://api.openweathermap.org/data/2.5/onecall', {-->
<!--// // // lat: 29.4252,-->
<!--// // // lon: -98.4916,-->
<!--// // // appid: WEATHER_TOKEN,-->
<!--// // // exclude: 'minutely,hourly,current,alerts',-->
<!--// // // units: 'imperial'-->
<!--// // // }).done(function (data){-->
<!--// // // console.log(data.daily[0].temp.day);-->
<!--// // // var weatherText = "";-->
<!--// // // for(var i = 0; i < data.length; i++){-->
<!--// // // weatherText += document.getElementById("weatherData").innerHTML =-->
<!--// // // '<h2>' + data.daily[0].temp.day + '</h2>';-->
<!--// // // }-->
<!--// // // $("#weatherData").html(weatherText)-->
<!--// // // console.log(data.daily[0].dt);-->
<!--// // //-->
<!--// // // $("#weatherData").html(data.daily[0].dt);-->
<!--// //-->
<!--// // // console.log(($("#insert-weather-data").html(html));-->
<!--// // // log 63 from humidity ---it matters that its under this.-->
<!--// //-->
<!--// // // console.log(data.daily[0].feels_like.day.toFixed(0) + " will supposedly be the weather today");-->
<!--// //-->
<!--// //-->
<!-- trail and errors-->
<!--<!– weather section1–>-->
<!-- <section id="weatherContainer1" class="card">-->
<!-- <h2 id="weatherDate1" class="weatherDate card-header">Date Here</h2>-->
<!-- <div class="card-body">-->
<!-- <p id="weatherTemp1" class="weatherT card-text">temp</p>-->
<!-- <p id="weatherDesc1" class="weatherD card-text">description</p>-->
<!-- <p id="weatherHumidity1" class="weatherH card-text">humidity</p>-->
<!-- <p id="weatherWind1" class="weatherW card-text">wind</p>-->
<!-- <p id="weatherPressure1" class="weatherP card-text">pressure</p>-->
<!-- </div>-->
<!-- </section>-->
<!--<!– weather section2–>-->
<!-- <section id="weatherContainer2" class="card">-->
<!-- <h2 id="weatherDate2" class="weatherDate card-header">Date Here</h2>-->
<!-- <div class="card-body">-->
<!-- <p id="weatherTemp2" class="weatherT card-text">temp</p>-->
<!-- <p id="weatherDesc2" class="weatherD card-text">description</p>-->
<!-- <p id="weatherHumidity2" class="weatherH card-text">humidity</p>-->
<!-- <p id="weatherWind2" class="weatherW card-text">wind</p>-->
<!-- <p id="weatherPressure2" class="weatherP card-text">pressure</p>-->
<!-- </div>-->
<!-- </section>-->
<!--<!– weather section3–>-->
<!-- <section id="weatherContainer3" class="card">-->
<!-- <h2 id="weatherDate3" class="weatherDate card-header">Date Here</h2>-->
<!-- <div class="card-body">-->
<!-- <p id="weatherTemp3" class="weatherT card-text">temp</p>-->
<!-- <p id="weatherDesc3" class="weatherD card-text">description</p>-->
<!-- <p id="weatherHumidity3" class="weatherH card-text">humidity</p>-->
<!-- <p id="weatherWind3" class="weatherW card-text">wind</p>-->
<!-- <p id="weatherPressure3" class="weatherP card-text">pressure</p>-->
<!-- </div>-->
<!-- </section>-->
<!--<!– weather section4–>-->
<!-- <section id="weatherContainer4" class="card">-->
<!-- <h2 id="weatherDate4" class="weatherDate card-header">Date Here</h2>-->
<!-- <div class="card-body">-->
<!-- <p id="weatherTemp4" class="weatherT card-text">temp</p>-->
<!-- <p id="weatherDesc4" class="weatherD card-text">description</p>-->
<!-- <p id="weatherHumidity4" class="weatherH card-text">humidity</p>-->
<!-- <p id="weatherWind4" class="weatherW card-text">wind</p>-->
<!-- <p id="weatherPressure4" class="weatherP card-text">pressure</p>-->
<!-- </div>-->
<!-- </section>-->
<!--<!– weather section5–>-->
<!-- <section id="weatherContainer5" class="card">-->
<!-- <h2 id="weatherDate5" class="weatherDate card-header">Date Here</h2>-->
<!-- <div class="card-body">-->
<!-- <p id="weatherTemp5" class="weatherT card-text">temp</p>-->
<!-- <p id="weatherDesc5" class="weatherD card-text">description</p>-->
<!-- <p id="weatherHumidity5" class="weatherH card-text">humidity</p>-->
<!-- <p id="weatherWind5" class="weatherW card-text">wind</p>-->
<!-- <p id="weatherPressure5" class="weatherP card-text">pressure</p>-->
<!-- </div>-->
<!-- </section>-->