· 5 years ago · May 19, 2020, 02:56 PM
1// Fill in your API key here.
2const APPID = "YOUR API KEY";
3
4
5/**
6 * This is the basic implementation of a leaflet map
7 * The code may need some restructuring when the application grows
8 * After week 2 of Programming for Online, this is the intended state of the demo application
9 */
10
11// Create a map.
12// 'L' is the Leaflet object similar to the '$' being the jQuery object
13// You can address that object to call its methods
14// (for instance to place a map in the element with the specified ID)
15var map = L.map("mapid");
16
17// Leaflet needs to know where to get the map images from
18// This variable contains the template URL
19// In this example the data of openstreetmap will be used
20var tileURL = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png";
21
22// The licence agreement of openstreetmap states that you must credit them in case you use their data
23// Much like the dress code states that you must refer to sources you use
24// This variable contains a string in the form openstreetmap requires the credit to be
25var attribution = "© <a href='https://www.openstreetmap.org/copyright'>OpenStreetMap</a> contributors";
26
27// Create a tile layer (a layer with images/tiles making up the map)
28// It also makes Leaflet show the credit as defined earlier. That will appear at the bottom right
29var tileLayer = L.tileLayer(tileURL, {attribution: attribution});
30
31// Add the tile layer to the map created earlier
32tileLayer.addTo(map);
33
34// Set the initial position (longitude-latitude) and zoom level of the map
35// lon and lat must be put in an array, the last parameter represents the zoom level
36map.setView([52, 5], 8);
37
38// Tell Leaflet that, when the map is no longer moving (user dragging or zooming), the function 'movingHasEnded' must be called
39map.on('moveend', mapMoved);
40
41/**
42 * Event handler for the moveend event of the leaflet map
43 * It asks the map what the new center of the map is
44 * Then outputs that to the console.
45 */
46function mapMoved(){
47 var center = map.getCenter();
48 console.log(center);
49 var lat = center.lat;
50 var lon = center.lng;
51
52 getCurrentWeather(lat, lon);
53}
54
55/**
56 * Gets the current weather for the specified location
57 *
58 * @param {number} lat The lattitude of the location requested
59 * @param {number} lon The longitude of the location requested
60 */
61function getCurrentWeather(lat, lon){
62
63 $.ajax({
64 url: `https://api.openweathermap.org/data/2.5/weather?lat=${lat}&lon=${lon}&APPID=${APPID}&units=metric`,
65 dataType: "JSON",
66
67 /**
68 * The method called in case the request succeeeds
69 * See also: https://api.jquery.com/jQuery.ajax/
70 *
71 * Puts the data from the incoming JSON into the proper HTML elements
72 *
73 * @param {Object} response The response as received from the server
74 */
75 success: function (response) {
76 $("#weather-description").html(response.weather[0].description);
77 $("#current-temperature").html(response.main.temp);
78 $("#location-name").html(response.name);
79 $("#current-wind-speed").html(response.wind.speed);
80 },
81
82 /**
83 * The method called in case the request fails
84 * See also: https://api.jquery.com/jQuery.ajax/
85 *
86 * It shows an element in the HTML by means of jQuery
87 * The element shows some error message.
88 *
89 * @param {Object} request The request object (contains a response too, it's complicated)
90 * @param {String} status A general status indication of the request
91 * @param {String} message Possible HTTP status (only when HTTP error occurs)
92 */
93 error: function(request, status, message){
94
95 $("#message-box-backdrop").fadeIn();
96 $("#close-message").on("click", function () {
97 $("#message-box-backdrop").fadeOut();
98 });
99 }
100 });
101}