AJAX な部分がほら、あれだからさ。
ひとまず実際に NOAA にデータを取りにいくとこは後回し。(自前でサービス立てるしかないと思う。)
1 <html>
2 <head>
3 <title>じっけんちゅう</title>
4 <meta charset="UTF-8">
5 <script src="http://openlayers.org/api/OpenLayers.js"></script>
6 </head>
7 <body>
8 <div style="width:100%; height:100%" id="map"></div>
9 <script defer="defer" type="text/javascript">
10 var projection4326 = new OpenLayers.Projection("EPSG:4326"); // WGS84
11 var projection3857 = new OpenLayers.Projection("EPSG:3857"); // Spherical Mercator (a.k.a WEB Mercator)
12 var map = new OpenLayers.Map({
13 div: "map",
14 projection: projection3857
15 });
16 var baselayer = new OpenLayers.Layer.XYZ("白地図",
17 "http://cyberjapandata.gsi.go.jp/xyz/blank/${z}/${x}/${y}.png", {
18 attribution: "<a href='http://maps.gsi.go.jp/development/ichiran.html' target='_blank'>地理院タイル</a>",
19 maxZoomLevel: 18
20 });
21 map.addLayer(baselayer);
22 var center_lonlat = new OpenLayers.LonLat(138.7313889, 35.3622222)
23 .transform(projection4326, projection3857);
24 map.setCenter(center_lonlat, 7);
25
26 var markers = new OpenLayers.Layer.Markers("Markers");
27 map.addLayer(markers);
28
29 var airports = {
30 "RJTT": {"lat": 35.552258, "lon": 139.779694, "elev": 35},
31 "RJAA": {"lat": 35.764722, "lon": 140.386389, "elev": 141},
32 };
33 var metars = {
34 "RJTT":
35 "RJTT 231200Z 14005KT 9999 FEW020 SCT080 BKN100 27/24 Q1007 BECMG TL1230 36008KT TEMPO 4000 -TSRA FEW008 BKN014 FEW020CB",
36 "RJAA":
37 "RJAA 231136Z 01007KT 9000 -SHRA FEW003 SCT015 BKN035 25/24 Q1007 RMK 1ST003 3CU015 5SC035 A2976",
38 };
39
40 for (apt in airports) {
41 var lonlat = new OpenLayers.LonLat(airports[apt]["lon"], airports[apt]["lat"])
42 .transform(projection4326, projection3857);
43 var marker = new OpenLayers.Marker(lonlat);
44 marker.id = apt;
45 marker.events.register("mousedown", marker, function() {
46 popup = new OpenLayers.Popup(apt,
47 lonlat,
48 new OpenLayers.Size(400, 200),
49 "<div style='font-size: 2em; background-color: #dff'>" + metars[apt] + "</div>",
50 true);
51 map.addPopup(popup);
52 });
53 markers.addMarker(marker);
54 }
55
56 </script>
57
58 </body>
59 </html>
こんなだ:
ん、何してんのかって? METAR/SPECI 解析書いたもんだから、これを「スマホで使う」のもやりたいが、WEB サービス作っちゃうのもいいよね、て思って。