19 |
20 |
22 |
23 |
24 |
25 |
26 |
27 |
--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
1 | # Air-Temperature-and-Map-of-City
2 |
3 | Enter the name of major cities and get the current air quality and temperature of the city as well as an image of the location on a map.
4 |
5 | **Link to project:** [a URL](http://mariacristinadelvalle.bitballoon.com/)
6 |
7 | ## How It's Made:
8 |
9 | **Tech used:** HTML, APIs, JavaScript, Jquery
10 |
11 | The api taken for air quality pulls the information from the two input fields to determine the air quality. At the same time, this data is turned into latitude and longitude coordinates. These coordinates are then put into the weather api and the google maps api to give back values.
12 |
13 | ## Lessons Learned:
14 |
15 | This was a good chance to see that some apis require information to be in the html file as well as in the Javascript. It was also an oprutnity to combine several other apis that I have worked on into one to get a more meaningful application.
16 |
17 |
18 |
--------------------------------------------------------------------------------
/starter-code/jquery_ajax/main.js:
--------------------------------------------------------------------------------
1 |
2 | var map;
3 | // function initMap() {
4 | // map = new google.maps.Map(document.getElementById('map'), {
5 | // center: {lat: -34.397, lng: 150.644},
6 | // zoom: 8
7 | // });
8 | // }
9 |
10 |
11 | $("button").on('click', function() {
12 | // 3 seconds after the center of the map has changed, pan back to the
13 | // marker.
14 | var latitude = $("#latitude").val();
15 | var longitude = $("#longitude").val();
16 | var apiKey = "";
17 | var apiURL = "http://api.airvisual.com/v2/city?city="+latitude+"&state="+longitude+"&country=USA&key="+apiKey;
18 | var apiKey2 = "";
19 | //the & makes it a parementer that needs to go after the other parameters
20 |
21 | var apiURL2 = "http://api.openweathermap.org/data/2.5/weather?q="+latitude+","+longitude+apiKey2;
22 | // var long =.data.location.coordinates[1]
23 | $.ajax({
24 | url: apiURL,
25 | success: function(response){
26 | var newLng = response.data.location.coordinates[0]
27 | var newLat = response.data.location.coordinates[1]
28 | console.log(response.data.current.pollution.maincn);
29 | $("#mapin").text(response.data.current.pollution.maincn)
30 | console.log(newLat)
31 | console.log(newLng)
32 | console.log(apiURL)
33 | $.ajax({
34 | url:apiURL2,
35 | success:function(t){
36 | $("h5").append((1.8*(t.main.temp-273)+32).toFixed(3)+"F")
37 | console.log((1.8*(t.main.temp-273)+32));
38 | // placing the temperature and doing the appropriate math
39 | },
40 | error(r){
41 | conseol.log(r)
42 | }
43 |
44 | })
45 | // center = new google.maps.LatLng(newLat, newLng);
46 | // // using global variable:
47 | map = new google.maps.Map(document.getElementById('map'), {
48 | center: {lat: newLat, lng: newLng},
49 | zoom: 11
50 | });
51 | // map.panTo(center);
52 |
53 | },
54 | error: function(r){
55 | console.log(r);
56 | }
57 | })
58 |
59 | });
60 | // }
61 |
62 |
63 |
64 | // var gKey="AIzaSyC3ZpLqYjRKgFNds7e0By2Dm9rMPNcHydM"
65 | // var gURL="https://maps.googleapis.com/maps/api/js?key="+gKey+"&callback=initMap"
66 | // var latitude=$("#latitude").val();
67 | // var longitude =$("#longitude").val();
68 | // $.ajax({
69 | // url:gURL,
70 | // success:function(res){
71 | // console.log(res);
72 | // },
73 | // error:function(re){
74 | // console.log(re);
75 | // }
76 | //
77 | // })
78 | // var map;
79 | // function initMap() {
80 | // console.log(google)
81 | // map = new google.maps.Map(document.getElementById('map'), {
82 | // center: {lat: -34.397, lng: 150.644},
83 | // zoom: 8
84 | // });
85 | // }
86 |
--------------------------------------------------------------------------------