-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
79 lines (71 loc) · 2.77 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
<!DOCTYPE html><html lang="ja"><head><meta charset="utf-8"><meta name="viewport" content="width=device-width">
</head><body>
<script type="module">
import { h1, add, link } from "https://js.sabae.cc/stdom.js";
import { CSVMap } from "https://code4fukui.github.io/csv-map/csv-map.js";
import { CSV } from "https://js.sabae.cc/CSV.js";
import { QRCode } from "https://code4fukui.github.io/qr-code/qr-code.js";
import { Day } from "https://code4fukui.github.io/day-es/Day.js";
import { getCurrentPosition } from "https://js.sabae.cc/getCurrentPosition.js";
import { sleep } from "https://js.sabae.cc/sleep.js";
onload = async () => {
document.body.style.textAlign = "center";
h1("福井県河川水位計マップ");
const map = new CSVMap();
document.body.appendChild(map);
await sleep(10);
const sensors = CSV.toJSON(await CSV.fetch("./sensors.csv"));
const data = CSV.toJSON(await CSV.fetch("./data/" + new Day().toString() + ".csv")).reverse();
console.log(data, sensors);
const getTransition = (data) => {
const n = Math.min(5, data.length);
const res = [];
for (let i = 0; i < n; i++) {
const d = data[i];
res.push(d.河川水位 + "m(" + d.日時.substring(d.日時.length - 5) + ")");
}
const t = res.reverse().join(" → ");
return t;
};
sensors.forEach(s => {
const d = data.find(d => d.id == s.id);
s.河川水位 = d.河川水位;
s.水位の推移 = getTransition(data.filter(d => d.id == s.id));
s.日時 = d.日時;
delete s.日付;
// "blue", "green", "orange", "yellow", "red", "purple", "violet"
const p = (s) => parseFloat(s);
if (p(s.河川水位) >= p(s.はん濫危険水位)) {
//s.color = "red";
s.color = "purple";
} else if (p(s.河川水位) >= p(s.避難判断水位)) {
//s.color = "orange";
s.color = "red";
} else if (p(s.河川水位) >= p(s.はん濫注意水位)) {
s.color = "yellow";
} else if (p(s.河川水位) >= p(s.水防団待機水位)) {
//s.color = "purple";
s.color = "green"; // lightblue
} else {
//s.color = "green";
s.color = "white";
}
//console.log(s.color, s.河川水位, s.はん濫危険水位, )
});
map.value = sensors;
const btn = document.createElement("button");
btn.textContent = "現在位置付近を見る(GPS等使用)";
btn.style.margin = "1em";
btn.onclick = async () => {
const pos = await getCurrentPosition();
map.map.flyTo(new L.LatLng(pos.latitude, pos.longitude), 14);
};
document.body.appendChild(btn);
add("br");
link("簡易グラフ表示", "./graph.html");
add("br");
link("DATA: CC BY 福井県河川水位オープンデータ", "https://github.com/code4fukui/waterlevel_fukui");
add("br");
document.body.appendChild(new QRCode());
};
</script>