-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
208 lines (179 loc) · 7.92 KB
/
index.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<title>WebGIS - Prakiraan cuaca BMKG</title>
<!-- Bootstrap CSS -->
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css"
integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<!-- google -->
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons">
<link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<link href="https://fonts.googleapis.com/css2?family=Roboto&display=swap" rel="stylesheet">
<!-- Manual style -->
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.9.4/dist/leaflet.css"
integrity="sha256-p4NxAoJBhIIN+hmNHrzRCf9tD/miZyoHS5obTRR9BMY=" crossorigin="" />
<style type="text/css">
body {
font-family: 'Roboto', sans-serif;
}
#map {
height: 100vh;
width: 100%;
}
.navbar {
margin-inline: 50px;
height: 85px;
background-color: rgba(128, 128, 128, 0.9);
}
.navbar span {
color: white !important;
font-weight: 300;
}
</style>
</head>
<body>
<!-- Navbar -->
<nav class="navbar d-flex justify-content-between navbar-expand-md navbar-light fixed-top ">
<div class="container">
<a class="navbar-brand" href="#"><img src="assets\images\logo brand.png" width="40" height="40"
class="d-inline-block align-center" alt=""><span class="navbar-brand mb-0 h1">WebGIS Indra
Bayu</span></a>
<div class="collapse navbar-collapse" id="navbarNav">
<form class="form-inline ml-auto" id="searchForm">
<input class="form-control mr-sm-2" id="searchInput" type="search" placeholder="Search"
aria-label="Search">
<button class="btn btn-lg btn-outline-info d-flex justify-content-center" type="submit"
style="color: #ffff;"><i class="material-icons" style="font-size: 20px;">search</i></button>
</form>
</div>
</div>
</nav>
<!-- Map Leaflet -->
<div class="map" id="map"></div>
</body>
<!-- Make sure you put this AFTER Leaflet's CSS -->
<script src="https://unpkg.com/leaflet@1.9.4/dist/leaflet.js"
integrity="sha256-20nQCchB9co0qIjJZRGuk2/Z9VM+kNiyxNV1lvTlZBo=" crossorigin=""></script>
<script type="text/javascript">
// leaflet coordinate system ([latitude, longitude], zoom)
// var map = L.map('map').setView([51.507, -0.09], 13);
let map = L.map('map').setView([-8.5264, 117.5], 9);
// date time
let date = new Date();
let dateTime = date.getFullYear() + '' +
(date.getMonth() + 1).toString().padStart(2, '0') + '' +
(date.getDate()).toString().padStart(2, '0') + '' +
date.getHours() + '00';
let kodeCuaca = {
'0': ['Cerah', 'clearskies'],
'1': ['Cerah Berawan', 'partlycloudy'],
'2': ['Cerah Berawan', 'partlycloudy'],
'3': ['Berawan', 'mostlycloudy'],
'4': ['Berawan Tebal', 'overcast'],
'5': ['Udara Kabur', 'haze'],
'10': ['Asap', 'smoke'],
'45': ['Kabut', 'fog'],
'60': ['Hujan Ringan', 'lightrain'],
'61': ['Hujan Sedang', 'rain'],
'63': ['Hujan Lebat', 'heavyrain'],
'80': ['Hujan Lokal', 'isolatedshower'],
'95': ['Hujan Petir', 'severethunderstorm'],
'97': ['Hujan Petir', 'severethunderstorm'],
};
console.log(dateTime);
// API xml BMKG
let apiURL = 'https://data.bmkg.go.id/DataMKG/MEWS/DigitalForecast/DigitalForecast-NusaTenggaraBarat.xml';
L.tileLayer('https://tile.openstreetmap.org/{z}/{x}/{y}.png', {
attribution: '© <a href="http://www.openstreetmap.org/copyright">OpenStreetMap</a>'
}).addTo(map);
let weatherData = null; // variabel untuk menyimpan data cuaca
getData();
// Fungsi untuk mengambil data cuaca dari API
async function getData() {
try {
let response = await fetch(apiURL);
let xmlString = await response.text();
let parse = new DOMParser();
let xmlData = parse.parseFromString(xmlString, 'text/xml');
weatherData = xmlData.querySelectorAll('area'); // menyimpan data cuaca
processWeatherData(); // Memproses data cuaca setelah diambil
} catch (error) {
console.error('Error fetching data:', error);
}
}
// Fungsi untuk memproses data cuaca dan menambahkan marker ke peta
function processWeatherData() {
weatherData.forEach((area) => {
let des = area.getAttribute('description');
let lat = area.getAttribute('latitude');
let lng = area.getAttribute('longitude');
let weathers = area.querySelectorAll('parameter[id="weather"] timerange');
let posPrakiraan;
let getTime = false;
weathers.forEach((weather, i) => {
let getDateTime = weather.getAttribute('datetime');
if (getDateTime > dateTime && !getTime) {
posPrakiraan = i;
getTime = true;
}
});
let prakiraan = weathers[posPrakiraan].querySelector('value').textContent;
let iconURL = 'assets/images/icon/' + kodeCuaca[prakiraan][1] + '.png';
let deskripsi = kodeCuaca[prakiraan][0];
let marker = L.marker([lat, lng], {
icon: L.icon({
iconUrl: iconURL,
iconSize: [50, 50],
iconAnchor: [25, 25],
})
}).bindPopup('<strong>Wilayah : ' + des + '</strong><br>Keterangan : ' + deskripsi);
marker.addTo(map);
});
}
// Fungsi untuk melakukan pencarian dengan data cuaca yang telah diambil
async function getDataAndSearch(searchInput) {
if (!weatherData) {
console.error('Data cuaca belum diambil');
return;
}
weatherData.forEach((area) => {
let des = area.getAttribute('description');
let lat = area.getAttribute('latitude');
let lng = area.getAttribute('longitude');
let weathers = area.querySelectorAll('parameter[id="weather"] timerange');
let posPrakiraan;
let getTime = false;
weathers.forEach((weather, i) => {
let getDateTime = weather.getAttribute('datetime');
if (getDateTime > dateTime && !getTime) {
posPrakiraan = i;
getTime = true;
}
});
if (des === searchInput) {
let prakiraan = weathers[posPrakiraan].querySelector('value').textContent;
let iconURL = 'assets/images/icon/' + kodeCuaca[prakiraan][1] + '.png';
let deskripsi = kodeCuaca[prakiraan][0];
let marker = L.marker([lat, lng], {
icon: L.icon({
iconUrl: iconURL,
iconSize: [50, 50],
iconAnchor: [25, 25],
})
});
marker.bindPopup('<strong>Wilayah : ' + des + '</strong><br>Keterangan : ' + deskripsi)
.openPopup();
marker.addTo(map);
map.setView([lat, lng], 12); // Set view to the searched area
}
});
}
// Pemanggilan fungsi dengan memberikan nama wilayah yang ingin dicari
//getDataAndSearch('Nama_Wilayah_Yang_Dicari');
</script>
<script src="search.js"></script>
</html>