-
Notifications
You must be signed in to change notification settings - Fork 1
/
wpjp.html
131 lines (124 loc) · 4.59 KB
/
wpjp.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
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" >
<title>WPJP example - uppermaps by etoyoda</title>
<script type="text/javascript">
function status_line(str) {
var stp = document.getElementById('status');
stp.innerText = str;
}
function plot_wind(levdb, mapctx) {
var windlayer = L.layerGroup([]);
var p = levdb.p;
var zt = levdb.z_target;
var title = "wind " + p + "hPa level (" + zt + "m)";
var n = 0
for (stnid in levdb.data) {
var tup = levdb.data[stnid];
var dd = Math.floor((tup.dd + 5) / 10);
if (dd == 0) { dd = 36; }
// assuming ff is given in m/s
var ff = Math.floor((tup.ff + 1.25) / 2.5) * 5;
if ((ff == 0) && (tup.ff > 0.5)) { ff = 5; }
if (ff == 0) { dd = 0; }
var bn = 'd' + dd + 'f' + ff + '.png';
var url = 'http://toyoda-eizi.net/2018/wxsymbols/img/' + bn;
var ic = L.icon({iconUrl: url, iconSize: [64, 64], iconAnchor: [32, 32]});
var opt = {icon: ic, title: bn};
var ptx = '<p>Station <a href="http://www.jma.go.jp/jp/windpro/{stnid}.html">{stnid}</a><br>Obs time: {rt}<br>Hight: {hagl} m AGL, {hmsl} m AMSL<br>Wind vector: {u}, {v}, {w} m/s<br>Signal: {signal} dB</p>';
ptx = ptx.replace(/{stnid}/g, stnid).replace(/{(\w+)}/g, function(m,p1){ return tup[p1]; });
L.marker([tup.lat, tup.lon], opt).bindPopup(ptx).addTo(windlayer);
n += 1;
}
mapctx.ov[title] = windlayer;
if (n > mapctx.sel.sz) {
mapctx.sel.ly = windlayer;
mapctx.sel.sz = n;
mapctx.sel.tl = title;
}
return windlayer;
}
function wplistener(ev, xhr, mapctx) {
// if there be no MSIE, we could simply take xhr.response
var response = JSON.parse(xhr.responseText);
var stx = 'Wind Profiler ' + response.reftime.replace(/:00:00Z/, 'Z') + ' loaded.';
status_line(stx);
mapctx.sel = {ly: null, sz: -1, tl: ''};
for (levid in response) {
if (levid.match(/^isobar/)) {
var ly = plot_wind(response[levid], mapctx);
}
}
if (mapctx.sel.ly) {
mapctx.ly.push(mapctx.sel.ly);
stx += " " + mapctx.sel.tl + " selected.";
status_line(stx);
}
var mymap = L.map(mapctx.mi, {
center: [36.0, 135.0],
zoom: 4,
layers: mapctx.ly
});
var layercontrol = L.control.layers(mapctx.bm, mapctx.ov, {})
layercontrol.addTo(mymap);
}
function prepare_basemap(mapid) {
var tile1 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/pale/{z}/{x}/{y}.png', {
attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>(淡色)',
maxZoom: 7
});
var tile0 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/english/{z}/{x}/{y}.png', {
attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>(English)',
maxZoom: 7
});
var tile2 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/blank/{z}/{x}/{y}.png', {
attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>(白地図)',
maxZoom: 7
});
var tile3 = L.tileLayer('https://cyberjapandata.gsi.go.jp/xyz/seamlessphoto/{z}/{x}/{y}.jpg', {
attribution: '<a href="https://maps.gsi.go.jp/development/ichiran.html">地理院タイル</a>(写真)',
maxZoom: 7
});
var basemaps = {
"English": tile0,
"淡色地図": tile1,
"白地図": tile2,
"写真": tile3
};
status_line('base layers ready');
return {bm: basemaps, ly: [tile0], mi: mapid, ov: {}};
}
function init() {
var canv = document.getElementById('mapid');
canv.style.csstext = 'height: ' + (window.innerHeight - 22) + ';';
var mapctx = prepare_basemap('mapid');
var xhr = new XMLHttpRequest();
xhr.addEventListener("load", function(ev){ wplistener(ev, xhr, mapctx); });
// if there be no MSIE, we could simply use responseType = 'json'
if (navigator.userAgent.indexOf('Trident') == -1) {
xhr.responseType = 'text';
}
var url = 'http://toyoda-eizi.net/2018/uppermaps/wpjp.json';
xhr.open("GET", url);
xhr.send(null);
status_line('XHR sent');
}
document.addEventListener("DOMContentLoaded", init);
</script>
<link rel="stylesheet" href="https://unpkg.com/leaflet@1.3.3/dist/leaflet.css"
integrity="sha512-Rksm5RenBEKSKFjgI3a41vrjkw4EVPlJ3+OiI65vTjIdo9brlAacEuKOiQ5OFh7cOI1bkDwLqdLw3Zg0cRJAAQ=="
crossorigin=""/>
<script src="https://unpkg.com/leaflet@1.3.3/dist/leaflet.js"
integrity="sha512-tAGcCfR4Sc5ZP5ZoVz0quoZDYX5aCtEm/eu1KhSLj2c9eFrylXZknQYmxUssFaVJKvvc0dJQixhGjG2yXWiV9Q=="
crossorigin=""></script>
<style>
html, body, #mapid { height: 100%; width: 100%; margin: 0; padding: 0; }
#status { height: 18px; margin: 1px; padding: 0; }
</style>
</head>
<body>
<p id="status">(status)</p>
<div id="mapid" />
</body>
</html>