現在位置: トップ > YOLP公式ブログ > ニュース > YOLPの地図で最新の雨雲レーダーを重ねて表示できるようになりました!

ここから本文です

YOLPの地図で最新の雨雲レーダーを重ねて表示できるようになりました!

[ニュース]  2012年9月18日
こんにちは、Yahoo! Open Local Platform (YOLP)の入山です。
いつもYOLPをご利用いただきありがとうございます。

本日、Yahoo! Open Local Platform (YOLP)のYahoo! JavaScriptマップAPIYahoo! iOSマップSDK、ならびにYahoo! AndroidマップSDKに、雨雲レーダー情報を地図に重ねて表示する機能を追加しました。この結果、パソコン向けサービスやスマートフォン向けアプリの開発において、任意のピンポイントな場所に関する雨雲の状態(雨が降っている/雨雲が近づいていている)を地図でビジュアルに確認する機能を簡単に実現することが可能になりました。

また上記API・SDK公開にあわせて、Yahoo!天気・災害の雨雲ズームレーダーとYahoo! ロコ - 地図のAndroidアプリがバージョンアップされ、地図上で雨雲レーダー情報を重ねて確認することが可能になりました。

Yahoo! 天気・災害
Yahoo! 天気・災害

地図 Yahoo!ロコ(Androidアプリ)
地図 Yahoo!ロコ(Androidアプリ)

アプリケーションIDを取得いただければ、どなたでも上記API・SDKを無料でご利用いただけます。さまざまな種類のサービス・アプリでの利用が可能かと思いますので、ぜひご活用ください。
では、簡単に今回アップデートされた内容を紹介させていただきます。

Yahoo! JavaScriptマップAPIで雨雲の状態を見る

Yahoo! JavaScriptマップAPIでは、デフォルトで地図の右上にオーバーレイボタンが表示されます。こちらのボタンから雨雲レーダーレイヤーをON/OFFすることで表示の切り替えが可能になります。実際に雨雲レーダーを表示した地図を見てみましょう。
名古屋駅

Yahoo! JavaScriptマップAPIで実装したサンプルをご紹介します。以下のリンクからご覧ください。
Yahoo! JavaScriptマップAPI 雨雲レーダー情報 サンプル

実装したサンプルコードはこちらになります。
サンプルコード
<!DOCTYPE html>
<html lang="ja">
<head>
<meta charset="utf-8">
<title>雨雲オーバーレイを表示する - Yahoo! JavaScriptマップAPI</title>
<script src="http://js.api.olp.yahooapis.jp/OpenLocalPlatform/V1/jsapi?appid=【あなたのアプリケーションID】"></script>
</head>
<body>
<h1>雨雲オーバーレイを表示する</h1>
<!-- ここで指定したwidthとheightが地図の大きさになります -->
<div id="map" style="width:800px; height:600px;"></div>
<script>
<!--
/**
 * ロード完了時のコールバック
 */
window.onload = function() {
    //地図オブジェクトを作成します。
    var map = new Y.Map("map", {
        configure : {
            doubleClickZoom: true,     //ダブルクリックで地図のズームインを有効にします。
            scrollWheelZoom: true,     //マウスのスクロールホイールによるズーム処理を有効にします。
            dragging: true,            //ドラッグ操作で地図を移動可能にします。
            weatherOverlay: true       //雨雲をデフォルトで地図上に重ねて表示します。
        }
    });
    //地図の縮尺を変更するための横長スライダー形式のユーザーインターフェースを表示します。
    map.addControl(new Y.SliderZoomControlHorizontal());
    //レイヤを選択するコントロールを追加します。
    map.addControl(new Y.LayerSetControl());
    //表示したい場所を指定します。
    map.drawMap(new Y.LatLng(35.665627, 139.730738), 6);
}

//-->
</script>
<p>
<!-- Begin Yahoo! JAPAN Web Services Attribution Snippet -->
<a href="http://developer.yahoo.co.jp/about">
<img src="//s.yimg.jp/images/yjdn/yjdn_attbtn2_105_17.gif" width="105" height="17" title="Webサービス by Yahoo! JAPAN" alt="Webサービス by Yahoo! JAPAN" style="border:0; margin:15px 15px 15px 15px;"></a>
<!-- End Yahoo! JAPAN Web Services Attribution Snippet -->
</p>
</body>
</html>
雨雲レーダー情報を表示するオーバーレイボタンの設定について、詳しくはこちらをご覧ください。

また、Yahoo! JavaScriptマップAPIでは、JavaScriptからの操作でも雨雲レーダーレイヤー表示の切り替えが可能になっています。詳しくはこちらをご覧ください。

Yahoo! iOSマップSDKで雨雲の状態を見る

iOSデバイス向けのアプリでも同様に雨雲レーダーを利用できます。Yahoo! iOSマップSDKの設定で、雨雲レーダーの表示やデータの自動更新設定が可能です。
ここでは、実装したサンプルをご紹介します。

iPhoneSDK
サンプルコード ViewController.h
#import <UIKit/UIKit.h>

#import <YMapKit/YMapKit.h>

@interface ViewController : UIViewController <YMKMapViewDelegate, YMKWeatherOverlayDelegate> {
    YMKMapView *map;
    YMKWeatherOverlay *weatherOverlay;
    UIButton *onOffButton;
    UILabel *dateTimeLabel;
}

@property(nonatomic, retain) YMKMapView *map;
@property(nonatomic, retain) YMKWeatherOverlay *weatherOverlay;
@property(nonatomic, retain) UIButton *onOffButton;
@property(nonatomic, retain) UILabel *dateTimeLabel;
@end
サンプルコード ViewController.m
#import "ViewController.h"
#import <YMapKit/YMKWeatherOverlay.h>
#import <YMapKit/YMKWeatherOverlayDelegate.h>

@interface ViewController ()

@end

@implementation ViewController

@synthesize map, weatherOverlay, onOffButton, dateTimeLabel;

- (void)viewDidLoad
{
    [super viewDidLoad];
    NSString *myAppID = @"【あなたのアプリケーションID】";
    // YMKMapViewのインスタンスを作成します。
    map = [[YMKMapView alloc]
                initWithFrame:CGRectMake(0, 0, self.view.frame.size.width, self.view.frame.size.height)
           appid:[myAppID copy]];
    // 地図のタイプを指定します(標準の地図を指定)。
    map.mapType = YMKMapTypeStandard;
    
    
    [self.view addSubview:map];
    
    // YMKMapViewDelegateに自身のオブジェクトを登録します。
    map.delegate = self;
    
    // 地図の位置と縮尺を設定します。
    CLLocationCoordinate2D center;
    center.latitude = 35.6586308;
    center.longitude = 139.7454106;
    map.region = YMKCoordinateRegionMake(center, YMKCoordinateSpanMake(7.5, 7.5));
    
    // 雨雲オーバーレイを地図に追加します。
    weatherOverlay = [[YMKWeatherOverlay alloc] init];
    [map addOverlay:weatherOverlay];
    
    // オーバーレイ切り替えボタンを作成します。
    onOffButton = [UIButton buttonWithType:UIButtonTypeRoundedRect];
    [onOffButton setTitle:@"雨雲OFF" forState:UIControlStateNormal];
    [onOffButton sizeToFit];
    onOffButton.frame = CGRectMake(0, 0, onOffButton.frame.size.width, onOffButton.frame.size.height);
    [onOffButton addTarget:self
                    action:@selector(toggleOnOffButton:)
          forControlEvents:UIControlEventTouchUpInside];
    [self.view addSubview:onOffButton];
    
    // 雨雲時刻表示用ラベルを作成します。
    dateTimeLabel = [[UILabel alloc] init];
    dateTimeLabel.font = [UIFont fontWithName:@"AppleGothic" size:12];
    dateTimeLabel.adjustsFontSizeToFitWidth = YES;
    dateTimeLabel.textAlignment = UITextAlignmentLeft;
    dateTimeLabel.frame = CGRectMake(self.view.frame.size.width -100, 0, 100, onOffButton.frame.size.height);
}

- (IBAction)toggleOnOffButton:(id)sender
{
    BOOL isOverlayEnable = ([onOffButton.currentTitle isEqualToString:@"雨雲OFF"]);
    
    if (isOverlayEnable) {
        // 雨雲オーバーレイをONからOFFに切り替え、ボタンの文言を変更します。
        [map removeOverlay:weatherOverlay];
        [onOffButton setTitle:@"雨雲ON" forState:UIControlStateNormal];
        [dateTimeLabel removeFromSuperview];
    } else {
        // 雨雲オーバーレイをOFFからONに切り替え、ボタンの文言を変更します。
        [map addOverlay:weatherOverlay];
        [onOffButton setTitle:@"雨雲OFF" forState:UIControlStateNormal];
        [self.view addSubview:dateTimeLabel];
    }
}

- (void)finishUpdateWeather:(YMKWeatherOverlayView *)weatherOverlayView
{
    // 表示中の雨雲時刻を取得してラベルに表示します。
    NSDate *nowDate = weatherOverlayView.nowDate;
    NSDateFormatter *formatter = [[[NSDateFormatter alloc] init] autorelease];
    NSLocale *jpLocale = [[NSLocale alloc] initWithLocaleIdentifier:@"ja-JP"];
    [formatter setLocale:jpLocale];
    [formatter setDateStyle:NSDateFormatterShortStyle];
    [formatter setTimeStyle:NSDateFormatterShortStyle];
    
    dateTimeLabel.text = [NSString stringWithFormat:@"%@%@", [formatter stringFromDate:nowDate], @" 現在"];
    [self.view addSubview:dateTimeLabel];
}

- (void)errorUpdateWeather:(YMKWeatherOverlayView *)weatherOverlayView withError:(int)error
{
}

- (YMKOverlayView*)mapView:(YMKMapView *)mapView viewForOverlay:(id <YMKOverlay>)overlay
{
    if ([overlay isKindOfClass:[YMKWeatherOverlay class]] ){
        // YMKWeatherOverlayViewを作成して返します。
        YMKWeatherOverlayView *weatherOverlayView = [[YMKWeatherOverlayView alloc]
                                                        initWithOverlay:overlay];
        // delegateを自身のオブジェクトに設定します。
        weatherOverlayView.delegate = self;
        // アルファ値を設定し、半透明表示とします。
        weatherOverlayView.alpha = 0.6;
        return weatherOverlayView;
    }
    
    return nil;
}

@end

Yahoo! AndroidマップSDKで雨雲の状態を見る

Yahoo! AndroidマップSDKでも同様に雨雲レーダーを利用できます。

AndroidSDK
サンプルコード MainActivity.java
package jp.co.yahoo.android;
import jp.co.yahoo.android.maps.GeoPoint;
import jp.co.yahoo.android.maps.MapActivity;
import jp.co.yahoo.android.maps.MapController;
import jp.co.yahoo.android.maps.MapView;
import jp.co.yahoo.android.maps.weather.WeatherOverlay;
import jp.co.yahoo.android.maps.weather.WeatherOverlay.WeatherOverlayListener;
import android.os.Bundle;
import android.view.Menu;
import android.view.MenuItem;
import android.view.Window;

public class MainActivity extends MapActivity implements WeatherOverlayListener
{
	private MapView mMapView = null ; //MapView
	private static final int MENUITEM_WEATHER = 1;//雨雲メニュー	
	private WeatherOverlay mWeatherOverlay = null;//雨雲オーバーレイ
	
	@Override
	public void onCreate(Bundle savedInstanceState) {
	super.onCreate(savedInstanceState);
		requestWindowFeature(Window.FEATURE_NO_TITLE);
		
		mMapView = new MapView(this,"【あなたのアプリケーションID】");
		MapController c = mMapView.getMapController();
		c.setCenter(new GeoPoint(35665721, 139731006)); //初期表示の地図を指定
		c.setZoom(10); 				  //初期表示の縮尺を指定
		setContentView(mMapView);
	}
	/**
 	*オプションメニュー
 	*@param				:menu、MenuItemインスタンス
 	*@return				:false
 	*@exception			:なし
 	*/
	@Override
	public boolean onCreateOptionsMenu(Menu menu) {
   		menu.add(Menu.NONE,MENUITEM_WEATHER,Menu.NONE,"雨雲オーバーレイ");
		return true;
	}

	/**
 	*オプションメニューイベント
 	*@param				:item、MenuItemインスタンス
 	*@return			:false
 	*@exception			:なし
 	*/
	@Override
	public boolean onOptionsItemSelected(MenuItem item){
		switch(item.getItemId()){
		case MENUITEM_WEATHER:
			if(mWeatherOverlay==null){
				//表示されていない場合は表示
				
				//WeatherOverlayを作成
				mWeatherOverlay = new WeatherOverlay(this);
				//WeatherOverlayListenerを設定
				mWeatherOverlay.setWeatherOverlayListener(this);
				//自動更新設定をON(10分間隔)
				mWeatherOverlay.startAutoUpdate(10);
				//MapViewにWeatherOverlayを追加
				mMapView.getOverlays().add(mWeatherOverlay);
			}else{
				//表示されいる場合は非表示
				mMapView.removeOverlay(mWeatherOverlay);
				mWeatherOverlay = null;
			}
			return true;
		}
		return false;
	}
    
	@Override
	public void errorUpdateWeather(WeatherOverlay arg0, int arg1) {
		// TODO 自動生成されたメソッド・スタブ
		
	}

	@Override
	public void finishUpdateWeather(WeatherOverlay arg0) {
		// TODO 自動生成されたメソッド・スタブ
		
	}

	@Override
	protected boolean isRouteDisplayed() {
		// TODO 自動生成されたメソッド・スタブ
		return false;
	}
}

主な雨雲レーダー対応サービス・アプリ

前述のAPI・SDKを採用した以下のサービス・アプリで、本日より雨雲レーダー情報表示機能がご利用いただけますので、あわせてご活用ください。

ヤマケイオンライン - 株式会社 山と溪谷社様
るるぶ.com - 株式会社JTBパブリッシング様
みんカラ - 株式会社カービュー様
Yahoo! 天気・災害
Yahoo! ロコ - 地図
地図 Yahoo!ロコ(Androidアプリ)

今後について

YOLPの地図API・SDKを使ったサービス・スマートフォン向けアプリを増やしていくことで、雨雲レーダー情報を表示可能な地図を利用できる機会を増加させ、デベロッパー・ユーザーの皆さまの利便性向上を目指します。
また、雨雲レーダーのように地図と重ねて表示可能なリアルタイム性の高いコンテンツを拡充していくことで、地図の概念を、「位置を確認するためのツール」から位置・天気など「現在の状況を多角的に確認するためのツール」へとシフトさせていくことを目指します。
今後も、Yahoo! Open Local Platformをよろしくお願いいたします。

Yahoo! Open Local Platform(YOLP): http://olp.yahoo.co.jp/
YOLP@Facebook(外部リンク): http://www.facebook.com/yahoojpYOLP
YOLP@Twitter(外部リンク): http://twitter.com/yahoojpYOLP
YOLP@GitHub(外部リンク): https://github.com/yahoojpYOLP/
Yahoo!地図アプリ iPhone版/Android版(無料)
Yahoo!地図ブログ
本文はここまでです このページの先頭へ