forked from monstermaria/info-app
-
Notifications
You must be signed in to change notification settings - Fork 0
/
app.js
95 lines (82 loc) · 3 KB
/
app.js
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
/* The user choses a city to show information about by using a dropdown
list and then clicking the search button.
This calls the initial function that reads the city input, and calls the
other functions with the input as parameter.
The other functions gets data from their respective sources, and
presents it in their corresponding divs on the homepage
*/
// Variables for handling the map
var map, mapMarker;
// Function that sets up a weather widget using data from openweathermap.org
function getWeather(weatherId) {
"use strict";
// Delete weather data from widget
$("#openweathermap-widget-15").html("");
// Delete previous script from document's head to avoid multiple copies
$('script[src="//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js"]').remove();
// Widget code from openweathermap.org to get weather data with weatherId
window.myWidgetParam = [
{
id: 15,
cityid: weatherId,
appid: "fc2cef4d05e5acca0565daf50456a1af",
units: "metric",
containerid: "openweathermap-widget-15",
},
];
(function () {
var script = document.createElement("script");
script.async = true;
script.src =
"//openweathermap.org/themes/openweathermap/assets/vendor/owm/js/weather-widget-generator.js";
var s = document.getElementsByTagName("script")[0];
s.parentNode.insertBefore(script, s);
})();
}
// Load initial weather widget with Malmö, Sweden weather data
getWeather("2692969");
// Set up initial map with Malmö, Sweden coordinates
function getMap() {
"use strict";
map = L.map("map").setView([55.583, 13.0333], 11);
mapMarker = L.marker([55.583, 13.0333]).addTo(map);
// Code from leafletjs.com to get baselayer from openstreetmap.org
L.tileLayer(
"https://api.mapbox.com/styles/v1/{id}/tiles/{z}/{x}/{y}?access_token={accessToken}",
{
attribution:
'Map data © <a href="https://www.openstreetmap.org/copyright">OpenStreetMap</a> contributors, Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
maxZoom: 18,
id: "mapbox/streets-v11",
tileSize: 512,
zoomOffset: -1,
accessToken:
"pk.eyJ1IjoiZ3JlZW55NzMiLCJhIjoiY2szNXFhY3B4MWVoeTNobzJ0cjBrenl1biJ9.82vZeA5kvvzOlk2lFXlXlw",
}
).addTo(map);
}
getMap();
// Update map with new coordinates
function updateMap(coordinates) {
"use strict";
map.setView(coordinates, 10);
if (mapMarker) {
map.removeLayer(mapMarker);
}
mapMarker = L.marker(coordinates).addTo(map);
}
// Function that reads input, then reads JSON data from a local file and uses that data
// to call other functions that collect weather and map data
function getInfo() {
"use strict";
var city = $("#city").val();
$("#info").removeAttr("style");
$.getJSON("info.json", function (data) {
var cityData = data[city];
getWeather(cityData.weatherId);
updateMap(cityData.mapCoordinates);
$("#info").text(cityData.infoText);
});
}
// Add event listener to search button
$("#search-button").click(getInfo);