WP-ImaGeoMap 1.1.0 Release

2010年2月28日 0 開発 , , ,

WordPress 向けの画像のマップ貼り付けプラグイン、WP-ImaGeoMap 1.1.0 をリリースしました。

従来バージョンからの変更点は以下のようになります。

  • マーカー間にラインを引く機能を追加しました
  • JavaScript が無効の場合、余計なマップ領域を表示しないようにしました
  • マップ生成をページ読み込みが完了してから行うようにしました

ライン機能を有効にすると、マーカー間が半透明の線で結ばれます。将来的にはルート検索 API を利用した経路表示に対応したいので、まずは小手調べとしてラインを実装してみました。

WP-ImaGeoMap 1.1.0

以下のページで公開しています。

WP-ImaGeoMap 1.0 Release

2009年12月7日 0 開発 , , , , , ,

WordPress プラグイン、WP-ImaGeoMap 1.0 をリリースした。

シリーズまとめ
WP-ImaGeoMap 関連

このプラグインでは、画像と Google Map を組み合わせた情報を WordPress の記事やページに貼り付ける事を目的としている。

スクリーンショット

スクリーンショット

ぱっと思いつく範囲では、簡易な旅日記や散歩の記録、お店の紹介などに使えそう。動作デモのページでは、昨年の初秋に訪れた熱川バナナワニ園の記録を付けてみた。

ユーザビリティやデザインなどに改善の余地はあるが、一通りの機能を実装したので公開する事にした。開発は今後も継続するが、とりあえず一区切りという事で。

WP-ImaGeoMap 開発日誌 2

2009年11月21日 0 開発 , , , , , , ,

作成中の WordPress 用プラグイン、WP-ImaGeoMap の開発日誌。

シリーズまとめ
WP-ImaGeoMap 関連

今日はエディタに以下の機能を追加した。

  • マーカーを独自画像に変更して、選択状態を分かり易くする
  • フォームに画像を表示して、マーカーに合わせて切り替える
  • 位置情報から標高を動的に取得する
  • 位置情報から住所を動的に取得する

最新版エディタのスクリーンショットは以下。

エディタ

エディタ

ピンクのマーカーが通常、ブルーが選択状態となる。マーカーをクリックなどで選択するとブルーに変わり、フォーム部分左の画像も変更される。独自マーカーと画像切り替えの組み合わせの見た目は意外に良かったので、マップ表示もマーカー + 画像の方向で検討しようと思う。

全体の進捗率的は 85% といったところか。以降に本日の実装メモを残す。

独自画像のマーカーと選択による切り替え

マーカーを選択・非選択で切り替える為に独自の画像を作成する事にした。

マーカーは Expression Design で作成し、28×28 ピクセルの PNG としてエクスポートする。影の作成は以下のサイトが提供するサービスを使用した。

このサイトに画像の URL を通知すると、アルファ値を考慮した影画像が生成される。指定する画像がドーナッツ状に切り抜かれていれば、影の形もそれに従う。

画像が作成できたら、それを切り替えられるようにする。Google Map API V3 のマーカーは、icon と shadow プロパティに google.maps.MarkerImage を設定する事で、独自の画像と影を設定できる。

選択・非選択のマーカーは同一形状の色違いにしたので、選択・非選択と影の 3 種類の画像が必要となる。これらは一度だけインスタンスを生成して、マーカー間で共有するように設計した。実装は以下のようになる。

var markerImage       = null;	//! 通常時のマーカー画像。
var markerImageSelect = null;	//! 選択時のマーカー画像。
var markerImageShadow = null;	//! マーカーの影となる画像。

function initialize()
{
	// ...中略

	// マーカー ( 通常・選択 ) と影画像
	markerImage       = new google.maps.MarkerImage( "http://***/marker.png",        new google.maps.Size( 28, 28 ), new google.maps.Point( 0,0 ), new google.maps.Point( 14, 28 ) );
	markerImageSelect = new google.maps.MarkerImage( "http://***/marker-select.png", new google.maps.Size( 28, 28 ), new google.maps.Point( 0,0 ), new google.maps.Point( 14, 28 ) );
	markerImageShadow = new google.maps.MarkerImage( "http://***/marker-shadow.png", new google.maps.Size( 43, 28 ), new google.maps.Point( 0,0 ), new google.maps.Point( 14, 28 ) );

}

これらをマーカーに設定する場合は以下のようになる。

// 初期化の場合
var marker = new google.maps.Marker( { position: latlng, map: map, title: "test", draggable: true, icon: markerImage, shadow: markerImageShadow } );

// 切り替えの場合
marker.setIcon( markerImageSelect );

初期化時は、icon と shadow プロパティに画像のインスタンスを設定する。切り替えの場合は icon プロパティに代入するのではなく、setIcon メソッドに画像インスタンスを指定する。

標高の取得

標高の取得はアメリカ地質調査所の getElevation サービスを使用する。このサービスは緯度と経度を指定すると、標高を REST ( XML ) として返す。以前に C# から取得する方法を実装済みなので、今回はそれを参考にする

Google Map API V2 まではライブラリに XML パーサーも含まれていたが、V3 では無くなった。つまり JavaScript から getElevation のデータを解析する場合、自前でパーサーを用意する事になるが、これは面倒なので PHP で取得する事にした。

JavaScript から PHP の CGI を呼び出し、PHP は処理結果を JSON 形式で標準出力に書き出す。

PHP の実装としては以下のようになる。標高は取得した値に m を付けて 29m のような文字列にしているが、余計な処理にも思えてきたので付けるのをやめるかもしれない。

<?php
/**
 * 指定された緯度と経度から標高を取得します。
 * 取得された標高は JSON 形式で標準出力に書き込まれます。
 *
 * 緯度・経度の指定が不正な場合や、取得に失敗した場合は空文字を書き込みます。
 */
function getElevation()
{
	$data = array( "altitude" => "", "id" => ( isset( $_GET[ "id" ] ) ? $_GET[ "id" ] : -1 ) );

	$latitude  = ( isset( $_GET[ "latitude"  ] ) ? $_GET[ "latitude"  ] : -1 );
	$longitude = ( isset( $_GET[ "longitude" ] ) ? $_GET[ "longitude" ] : -1 );

	if( $latitude != -1 && $longitude != -1 )
	{
		$feed = "http://gisdata.usgs.gov/xmlwebservices2/elevation_service.asmx/getElevation?X_Value={$longitude}&Y_Value={$latitude}&Elevation_Units=METERS&Source_Layer=-1&Elevation_Only=true";
		$xml  = simplexml_load_file( $feed );

		if( $xml )
		{
			// 不正な緯度・経度を指定した場合は "-1.79769313486231E+308" という文字列が入るので、
			// 必ず数値判定を行って安全性を保証する必要がある。
			//
			$altitude = ( string )$xml;
			if( is_numeric( $altitude ) )
			{
				$data[ "altitude" ] = "{$altitude}m";
			}
		}
	}

	header( "Content-Type: application/json; charset=utf-8" );
	$json = json_encode( $data );
	echo "{$_GET[ 'callback' ]}({$json});";
}

getElevation();
?>

JavaScript からの呼び出しには、jQuery.getJSON を使用する。このメソッドは非同期実行されるが、呼び出す CGI 用 URL の末尾に “callback=?” を指定する事によりコールバック関数を指定できる。

JavaScript の実装は以下のようになる。

/**
 * 指定されたマーカーに標高を設定します。
 *
 * @param	marker	マーカー。
 */
function setElevation( marker )
{
	// CGI の URL は仮のもの
	var target = "http://****/read-elevation.php?id=" + marker.id + "&latitude=" + marker.position.lat() + "&longitude=" + marker.position.lng() +  "&callback=?";

	// getJSON は非同期実行されるので、結果が返された時は必ず id のチェックを行う事
	jQuery.getJSON( target, function( data )
			{
				// data.id に id が入っている
				// data.altitude に標高が入っている
			});
}

エディタの JavaScript では、google.maps.Marker.prototype.id を宣言する事で、マーカーに id を割り当て、個体識別できるようにしている。

jQuery.getJSON は非同期実行されるので、実行前後で選択しているマーカーが変更される可能性があるが、PHP に id を渡し、戻り値の JSON にそれを含める事で、標高の反映先を確実に指定できるようにしている。

前述の PHP の最後の処理が実行されると、出力された JSON 形式のデータが解析され、コールバック関数の引数のプロパティとなる。