ページレイアウトの設定
まずは「雨フル？タッチ」を表示するためのページを作成します。スマホアプリライクな見た目を実現したいので、地図の表示サイズは全画面表示とし、降水強度情報を表示するためのウィンドウを追加します。
スタイルは、スマートフォンなどのタッチデバイスでアクセスしたときに最適になるように設定しています。
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no">
<meta name="apple-mobile-web-app-capable" content="yes">
<title>雨フル？タッチ</title>
<style type="text/css">
html, body {
width: 100%; height: 100%;
}
html, body, div{
margin: 0; padding: 0;
}
div.panel {
font-size: 9pt;
z-index: 2;
padding: 0px;
overflow: hidden;
color: #fff;
background-color: #000;
background-image: -webkit-gradient(
linear,
0% 0%,
0% 100%,
from(rgba(155, 155, 155, 0.1)),
to(rgba(255, 255, 255, 0.5)),
color-stop(.5,rgba(155, 155, 155, 0.2)),
color-stop(.5,rgba(255, 255, 255, 0.1))
);
border-radius: 8px;
position: absolute;
left: 0px;
top: 0px;
width: 100%;
height: 85px;
opacity: .9;
}
div.warea {
width: 14%;
height: 60px;
float: left;
align: center;
overflow: hidden;
}
div.wdata {
height: 40px;
width: 80%;
background-color: white;
color: black;
font-size: 18px;
text-align: center;
align: center;
border: solid 2px;
border-color: #ffffff;
}
div.wdate {
height: 20px;
}
</style>
</head>
<body>
<div id="map" style="width:100%; height:100%;"></div>
<div class="panel">
<div style="margin-left:5px;">
<div id="rainfall" style="margin-top:5px; margin-left:5px; height:20px;"></div>
</div>
<div style = " width:90%; height:60px; margin:0 auto;">
<div class="warea" >
<div class="wdata" onClick="setTimeShift(0)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(10)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(20)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(30)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(40)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(50)"></div>
<div class="wdate"></div>
</div>
<div class="warea" >
<div class="wdata" onClick="setTimeShift(60)"></div>
<div class="wdate"></div>
</div>
</div>
</div>
</body>
</html>
地図の表示
ページを作成したらまずは地図を表示します。
地図表示
map = new Y.Map('map', {
configure : {
scrollWheelZoom: true,
enableFlickScroll: false
}
});
map.drawMap(latlng, 10, Y.LayerSetId.NORMAL);
これで地図が全画面表示されます。latlngはグローバル変数で、初期位置は日本へそ公園を設定しています。
var latlng = new Y.LatLng(35, 135);
雨雲レーダーレイヤーの追加
次に雨雲レーダーレイヤーを追加します。
雨雲レーダーレイヤー
weather = new Y.WeatherMapLayer({
"opacity": 0.6
});
weather.startAutoUpdate(); //自動更新
weather.setDispTime(true); //時刻表示
weather.setUpdateCallback(getWeatherData); //コールバック関数
map.addLayer(weather);
透過度は0.6として、自動更新（デフォルトで5分毎）、雨雲レーダーの時刻表示を設定しています。雨雲レーダーが更新された時に呼ばれるコールバック関数もここで設定しておきます。
コールバック関数については後述します。
