ヤマレコBLOG

« 2007年01月 | メイン | 2007年03月 »

2007年02月24日

GPSデータからグラフ作り：３）経度・緯度で指定した2地点間の距離を求める

PHPでGPXファイルを取得することができたので、その取得した経度・緯度座標のリストから、距離を求める必要があります。

Webで検索したところ、正式っぽい数式が国土地理院のページにありました。
2点の平面直角座標x,yから測地線長および方向角を求める計算

・・・が、さっぱり理解できない。
仕方がないので他のページも調べてみると、Javascriptのプログラムまでついているページがありました。球面三角法という計算手法を使うようです。
緯度と経度による距離計算

内容を理解し切れてないのですが、ソースコードを参考（そのままコピー・・・）して使わせていただきました。
PHP向けに作り直したコードを乗せておきます。
function cal_len($na, $ta, $nb, $tb){ $na=pi()*$na/180; $nb=pi()*$nb/180; $ta=pi()*$ta/180; $tb=pi()*$tb/180; $na=$na-((11.55/60)*pi()/180)*sin(2*$na); $nb=$nb-((11.55/60)*pi()/180)*sin(2*$nb); $c=cos($na)*cos($nb)*cos($ta-$tb)+sin($na)*sin($nb); $s=sqrt(1-$c*$c); $t=$s/$c; $z=atan($t); $z=6378.137*$z; // 地球の半径を6378.137kmで計算 return $z; }
これを使って、やっとルートのグラフを生成するプログラムができました！
↓グラフはこんな感じです。


あとは、GPSに標高データが入っていないときでもグラフが作れるように、座標から標高データを取得する方法です。できるのかな・・・。

投稿者 matoyan : 16:16 | コメント (1)

GPSデータからグラフ作り：２）GPXのファイル読み込み

グラフを描く環境ができたので、次はPHPでGPXのファイルを読み込んで各地点の経度・緯度座標と標高を求める方法を検討しました。

XMLファイルの解析はPHPに解析用のライブラリが用意されているので、解析するのは非常に簡単です。

---------------------------------------
$fname="sample2.xml";
$data=implode("",file($fname));
$xml_parser = xml_parser_create('UTF-8');
xml_parser_set_option($xml_parser, XML_OPTION_CASE_FOLDING, 0);
xml_parser_set_option($xml_parser, XML_OPTION_SKIP_WHITE, 1);
xml_parse_into_struct($xml_parser, $data, $values, $idx);
xml_parser_free($xml_parser);
---------------------------------------

とするだけで、XMLの解析が完了します。
ちょっと理解しにくいのですが、$valuesと$idxにデータが分けて入ってます。
GPSの最初のデータにアクセスする場合、
緯度： $values[$idx['trkpt'][0]]['attributes']['lat']
経度： $values[$idx['trkpt'][0]]['attributes']['lon']
標高： $values[$idx['ele'][0]]['value']
時刻： $values[$idx['ele'][0]]['time']
にデータが入ってます。

これでGPSのデータを読み込むことができました。
ちなみに元のGPXファイルがこちら。
プログラムで解析した結果はこちら（ソースコードを見ると改行された表示が見えます）

⇒ 次は経度・緯度で指定した2地点間の距離を求める方法です。

投稿者 matoyan : 00:25 | コメント (0)

2007年02月23日

GPSデータからグラフ作り：１）折れ線グラフを書く

GPSからグラフを作るために、まずは折れ線グラフを書いてくれるライブラリを探しました。
自分の使える言語はPerlとPHPぐらいなので、その中からPHPで使えるJpGraphというライブラリを使いました。
「PHPで、 高機能なグラフ生成ライブラリーJpGraphを使いグラフを描いてみました」
というページにインストール方法からサンプルまでがまとまってます。これと公式マニュアルがあれば大体のグラフは描けそうです。

このライブラリを使えば↓のようなグラフが簡単に作成できます。


プログラムは非常に簡単です。
<?php //折れ線グラフ　作成手順サンプル include ("jpg/jpgraph.php"); include ("jpg/jpgraph_line.php"); $ydata = array(17,21,41,14,30,9); //（各月の最高温度） $xdata = array("Jan","Feb","Mar","Apr","May","Jun"); $graph = new Graph(300,200,"auto"); $graph->img->SetImgFormat("png"); $graph->SetScale("textlin"); $graph->title->Set("Line Plot Example"); $graph->xaxis->SetTickLabels($xdata); $graph->xaxis->title->Set("Month"); $graph->yaxis->title->Set("y-title"); $lp1 = new LinePlot($ydata); //<font color=red>*2</font> $lp1->SetLegend("Temperature"); $graph->Add($lp1); $graph->Stroke(); ?>

★[PHP]: JpGraph
公式HP：アシアル社
http://www.asial.co.jp/jpgraph/
マニュアル（オンライン／ダウンロード）
http://www.asial.co.jp/jpgraph/manual/jpgraph_manual/toc.html
http://www.asial.co.jp/jpgraph/download.php
解説／設定
「PHPで、 高機能なグラフ生成ライブラリーJpGraphを使いグラフを描いてみました」
http://www.linkclub.or.jp/~ma3ki/webutil/jpgraph/howtomake-jpgraph.html

Perlにも同じようなライブラリがあるみたいです。結局使いませんでしたが、おそらく同等の機能が実現できると思います。
★[Perl]: GD::Graph
公式HP：CPAN
http://cpan.uwinnipeg.ca/module/GD
解説／設定
http://www.linkclub.or.jp/~ma3ki/webutil/gdgraph/perlgd-install.html


その他、むかし大学の研究室時代によく使っていたツールも紹介しておきます。複雑な数式とかを使うときにはこちらの方がいいのかもしれません。
★[tool]: gnuplot
公式HP：
http://www.gnuplot.info/
解説／設定
http://t16web.lanl.gov/Kawano/gnuplot/

★[tool]: PGPLOT
公式HP：
http://www.astro.caltech.edu/~tjp/pgplot/
解説／設定：
http://www.fluidlab.naoe.t.u-tokyo.ac.jp/~minnie/pgplot/

⇒ 次はGPXファイルの読み込みです

投稿者 matoyan : 00:38 | コメント (0)

2007年02月22日

GPSデータからグラフ作り

携帯ページの作成は先送りになりますが、次にやりたいことが決まりました。

今のヤマレコで、ルートを表示するためにGPSのデータを登録してもらっていますが、ルートを表示するだけじゃもったいない。
どうせならカシミールのGPS関連の機能を他にも入れてしまおうと。

3D処理が必要な鳥瞰図とかは難しい気がしますが、まずは簡単なところでグラフ機能の生成からトライしたいです。

こんな感じでステップ分けしてやろうと思ってます。
・Step1：GPSのデータ（GPXファイル）からグラフ生成
・Step2：ヤマレコのHPから地図上をクリックするだけで、ルートとグラフが両方完成。
本来の趣旨からずれますが、GPSを持っていない人（実は自分も持ってませんが）でも、簡単に同じ機能を実現できればなぁと思ってます。

で、Step1に向けての課題を並べてみると
１）折れ線グラフを書く
２）GPXのファイルを読み込んで、各地点の経度・緯度座標と標高を求める。
３）経度・緯度で指定した2地点間の距離を求める。

Step2までやるなら
４）経度・緯度で指定した各地点の標高データを求める。
手元にデータがないので難しそう・・・。

できる範囲からコツコツやってきます。

投稿者 matoyan : 23:34 | コメント (0)

2007年02月20日

Yahoo Maps上にルート作成（５）：線画座標と経度・緯度座標の変換

GPSのGPXファイル（ルート情報）を読み込んで、Yahoo! 地図情報上にルートを作成するプログラムを作成しました。その際のメモを残しておきます。

前回までで、Yahoo地図上にプロットするための経度・緯度の座標データがそろいつつ、線画するためのライブラリも準備できました。

今回は線画用の座標系と経度・緯度の座標系変換です。

jsgraphics (wz_jsgraphics.js)で使う座標系は、divタグで指定したキャンバスの左上位置を座標(x,y)=(0,0)として、下にy軸、右にx軸が伸びる座標系です。

図１：キャンバスの座標系の例

それに対して、GPS情報で取得した座標データは経度・緯度ベースの情報なので、線を描くには座標系を合わせるための変換処理が必要になります。

図２：地図の座標系の例

今回はブラウザ上で線画をしたいので、GPS情報の経度・緯度情報を座標系に変換します。
座標変換のためには、まず
１）今表示している地図の経度・緯度ベースの座標範囲
２）地図を表示しているキャンバスのサイズ（ピクセル値）
を求めて、経度・緯度それぞれ１度移動すると縦横に何ピクセル移動するか（すなわち座標系のスケールの違い）を算出しておいて
Yahoo地図の左上（x,y)=(0,0)の経度・緯度をもとに、
３）GPSの各データのピクセル位置を特定します。

言葉で書いても分かりにくいので、例を使って個別に解説します。


１）今表示している地図の経度・緯度ベースの座標範囲

Yahoo!地図情報のリファレンスマニュアルを見ると、キャンバスの左上と右上の座標を取得する関数としてgetBottomLeft関数とgetTopRight関数が用意されています。
var bl = _map.getBottomLeft();
var tr = _map.getTopRight();
とすれば、左下の緯度・経度が（bl.lat, bl.lon)右上の緯度・経度が(tr.lat, tr.lon)に格納されます。


２）地図を表示しているキャンバスのサイズ（ピクセル値）

これはdivタグで指定したwidth, heightの値です。
Windowのサイズから自動的にとる場合は、
if(window.innerWidth) {
w = window.innerWidth;
h = window.innerHeight;
} else {
w=document.body.clientWidth;
h=document.body.clientHeight;
}
とすれば、変数wに幅が、hに高さがピクセル値で得られます。


これで、以下の式を使えば経度・緯度それぞれ１度あたりのピクセル数を算出できます。
var wscale = w / (tr_w.lon-bl_w.lon);
var hscale = h / (tr_w.lat-bl_w.lat);


４）GPSの各データのピクセル位置

GPSの各データがtrkpts[0]["-lat"], trkpts[0]["-lon"]に格納されていた場合、
x[0] = Math.round((trkpts[0]["-lon"] - bl_w.lon)*wscale);
y[0] = Math.round(h-(trkpts[0]["-lat"] - bl_w.lat)*hscale);
とすると、各トラックポイントの座標位置をキャンバス上の座標に変換することができます。

上記の内容を踏まえて線を描くと・・・

★サンプルはこちらのページにあります。

線がはみ出ます・・・。あとドラッグしても線が置き去りになります。

ということで、さらに
・キャンバス外に出たポイントを線画しないように修正
・ドラッグしたときに再線画するように修正
すれば、やっとGPX情報を経路情報として表示できるようになりました！

本当は線画領域の境界を計算して画面ぎりぎりまで線を引くべきなんですが、サボって画面外に出たら線を引かないようにしてます。この部分はそのうち直すかも。

興味のある方は、完成したトレースの表示ページから、ソースコードも確認してみてください。


関連エントリ：
・Yahoo Maps上にルート作成（１）：GPXファイルの取得
・Yahoo Maps上にルート作成（２）：GPXファイルの解析
・Yahoo Maps上にルート作成（３）：測地系の変換
・Yahoo Maps上にルート作成（４）：Yahoo!Map上に線を描く
・Yahoo Maps上にルート作成（５）：線画座標と経度・緯度座標の変換

投稿者 matoyan : 01:52 | コメント (0) | トラックバック

Yahoo Maps上にルート作成（４）：Yahoo!Map上に線を描く

GPSのGPXファイル（ルート情報）を読み込んで、Yahoo! 地図情報上にルートを作成するプログラムを作成しました。その際のメモを残しておきます。

前回までで、Yahoo地図上にプロットするための座標データがそろいました。

原稿執筆時点では、Yahoo!地図情報のライブラリに線画用のライブラリが存在しないため、GPS情報のルートを書くために別の線画ライブラリを利用します。

Javascriptで線画するために、複数のブラウザで確実に動かすこと（クロスブラウザ対応）も考慮したライブラリを使うことになります。

候補としては
１）jsgraphics (wz_jsgraphics.js)
２）GoogleのExplorerCanvas
３）phpspotで紹介されていた、javascript線画用ライブラリ
などがありました。

機能的には１、２ともに同じ様な感じだった（３は試してない）ですが、２）に関しては新しくキャンバスという画像領域を定義されるのでYahooの地図上に白いキャンバスが重なってしまい、線だけを重ねる方法がわからず断念。
１）のjsgraphicsライブラリを使って線画することにしました。

リンク先のページを見てもらえると分かりますが、jsgraphicsは線を引くだけではなくて、円や長方形などの図形も描けるので、楕円のグラフを書いたりすることもできそうです。

で、この機能を使って線を１本書いてみました。Yahoo地図上に重ねて表示するために、Yahoo地図の領域「map」にキャンバス領域を重ねて表示しています。
<div id="canvas" style="position:absolute;width:200px; height:200px;"> <div id="map" style="width:200px; height:200px;"></div></div> <script type="text/javascript"> <!-- var Ymap = new YahooMapsCtrl("mapcanvas1", "36.322500,137.730583", 4); // 地図の表示 var jg_doc; jg_doc = new jsGraphics("canvas"); // canvas領域に記述することを宣言 jg_doc.setColor("#ff0000"); // 線の色は赤色 jg_doc.setStroke(4); // 線の太さは4px jg_doc.drawLine(10, 10, 100, 100); //(x,y)=(10,10)から(x,y)=(100,100)まで線を引く jg_doc.paint(); // 線画命令 // --> </script>










上記では単純な１本線だったのでdrawLine関数を使いましたが、折れ線の場合はdrawPolylineを使うこともできます。drawLineを何回も呼ぶ方法ももちろんアリです。（どちらが線画速度が速いのか分かりませんが）

⇒ 次は線画座標と経度・緯度座標の変換処理です。


関連エントリ：
・Yahoo Maps上にルート作成（１）：GPXファイルの取得
・Yahoo Maps上にルート作成（２）：GPXファイルの解析
・Yahoo Maps上にルート作成（３）：測地系の変換
・Yahoo Maps上にルート作成（４）：Yahoo!Map上に線を描く
・Yahoo Maps上にルート作成（５）：線画座標と経度・緯度座標の変換

投稿者 matoyan : 01:00 | コメント (0) | トラックバック

Yahoo Maps上にルート作成（３）：測地系の変換

GPSのGPXファイル（ルート情報）を読み込んで、Yahoo! 地図情報上にルートを作成するプログラムを作成しました。その際のメモを残しておきます。

前回までで、GPXファイルを読み込んで経度・緯度の座標を取得するところまで行きました。ただ、一般的なGPSで取得した座標データはWGS84という測地系に従っていて、Yahoo!地図情報では記事執筆時点では日本測地系（Tokyo）のデータしか扱えません。

そのため、座標情報の変換処理が必要になります。正確にやるためには地域ごとの変換テーブルを用意する必要があるらしいのですが、こちらのページの解説をもとに今回はJavascript上で動く簡易的な変換関数を利用しました。

function TOKYOtoWGS84(tb,tl) { this.lat = tb - 0.000106950 * tb + 0.000017464 * tl + 0.0046017; this.lon = tl - 0.000046038 * tb - 0.000083043 * tl + 0.0100400; } function WGS84toTOKYO(b,l) { this.lat = b + 0.000106960 * b - 0.000017467 * l - 0.0046020; this.lon = l + 0.000046047 * b + 0.000083049 * l - 0.0100410; } 例えばGPSの経度、緯度データを変数lat, lonに入れている場合、
var gps_t = new WGS84toTOKYO(lat, lon);
とすれば、
・経度：gps_t.lat
・緯度：gps_t.lon
に日本測地系のデータが格納されます。

★サンプルはこちらのページにあります。

⇒ 次は線画用のライブラリを使って、Yahooの地図上に線を描く方法です。


関連エントリ：
・Yahoo Maps上にルート作成（１）：GPXファイルの取得
・Yahoo Maps上にルート作成（２）：GPXファイルの解析
・Yahoo Maps上にルート作成（３）：測地系の変換
・Yahoo Maps上にルート作成（４）：Yahoo!Map上に線を描く
・Yahoo Maps上にルート作成（５）：線画座標と経度・緯度座標の変換

投稿者 matoyan : 00:45 | コメント (0) | トラックバック

Yahoo Maps上にルート作成（２）：GPXファイルの解析

GPSのGPXファイル（ルート情報）を読み込んで、Yahoo! 地図情報上にルートを作成するプログラムを作成しました。その際のメモを残しておきます。

１回目の記事で、サーバ上に用意したGPXファイルのリモート読み込みが完了しました。
次は、その取得したファイルから座標情報を取り出します。

前回と同じように、Javascript上でXMLファイルを解析できるライブラリを探しました。
今回はXMLファイルの解析のみできればいいので、XML.ObjTree クラスというライブラリを利用します。

ファイルの取得とXML解析の両機能をもつライブラリである、JKL.ParseXMLもあるのですが、前回prototype.jsでファイルを取得するところまでは作ってあるので、XML.ObjTree クラスの方を利用しました。

GPXファイルの構造を見ると、先頭から gpxタグ ⇒ trkタグ ⇒ trksegタグ、とたどった先にtrkptタグがあり、その中にトラックデータが入っています。内容は、１）座標データ、２）標高、３）時刻の３つのデータがあります。

例えば↓のような感じで格納されています。元のGPXファイルはこちら <trkpt lat="35.428840" lon="139.218526"> <ele>751.000000</ele> <time>2007-02-03T08:55:21Z</time> </trkpt> ※ 時刻の部分は、GPSの仕様でグリニッジ標準時（日本時刻-9時間）が入る場合が多いらしいです。

解析方法は
var xotree = new XML.ObjTree();
var tracks = xotree.parseXML( prototype.jsで取得したGPXデータ );

とすれば、tracks.gpx.trk.trkseg.trkptの中に配列でトラックデータが格納されます。
今回は経度・緯度のみのデータを使うので、1つ目のデータの場合：
・経度：tracks.gpx.trk.trkseg.trkpt.trkpts[0]["-lat"]
・緯度：tracks.gpx.trk.trkseg.trkpt.trkpts[0]["-lon"]
を取得すればOK。

で、前回とコードを合わせると、 function getgpx(){ var url = "http://www.yamareco.com/labo/sample.xml"; new Ajax.Request(url , { method: 'get', onSuccess: function(req){ var xotree = new XML.ObjTree(); var tracks = xotree.parseXML( req.responseText ); trkpts = tracks.gpx.trk.trkseg.trkpt; alert('経度：'+trkpts[0]["-lat"]+', 緯度'+trkpts[0]["-lon"]); } }); }
★サンプルはこちらのページにあります。

⇒ 次は取得した経度、緯度情報の測地系を変換する処理です。


関連エントリ：
・Yahoo Maps上にルート作成（１）：GPXファイルの取得
・Yahoo Maps上にルート作成（２）：GPXファイルの解析
・Yahoo Maps上にルート作成（３）：測地系の変換
・Yahoo Maps上にルート作成（４）：Yahoo!Map上に線を描く
・Yahoo Maps上にルート作成（５）：線画座標と経度・緯度座標の変換

投稿者 matoyan : 00:28 | コメント (0) | トラックバック

Yahoo Maps上にルート作成（１）：GPXファイルの取得

GPSのGPXファイル（ルート情報）を読み込んで、Yahoo! 地図情報上にルートを作成するプログラムを作成しました。その際のメモを残しておきます。

最初はサーバ上に用意したGPXファイルのリモート読み込みです。

GPXファイルを読み込むために、まずJavascript上でリモートファイルを取ってくるライブラリを探しました。
Ajax ライブラリまとめ のページにリンクがある、prototype.jsを使いました。

prototype.jsを使えば、ファイルを取るのは簡単です。
function getgpx(){ var url = "http://www.yamareco.com/labo/sample.xml"; new Ajax.Request(url , { method: 'get', onSuccess: function(req){ alert('ファイル取得！'); } }); }
とするだけで、クロスブラウザ（とりあえずIEとFirefox）対応でXMLファイルを取得することができました。

★サンプルはこちらのページにあります。
※拡張子はあらかじめ「gpx」から「xml」に変更してあります。
⇒ 次はXMLファイルの解析です。


関連エントリ：
・Yahoo Maps上にルート作成（１）：GPXファイルの取得
・Yahoo Maps上にルート作成（２）：GPXファイルの解析
・Yahoo Maps上にルート作成（３）：測地系の変換
・Yahoo Maps上にルート作成（４）：Yahoo!Map上に線を描く
・Yahoo Maps上にルート作成（５）：線画座標と経度・緯度座標の変換

投稿者 matoyan : 00:14 | コメント (0) | トラックバック

2007年02月17日

Yahoo!地図情報への移行（Yahoo Maps上にルート＆山データ表示）

細かい解説は後で書こうと思いますが、ここ1週間作り続けてきたYahoo!地図情報への移行が完了しました！！
実際の地図は地図閲覧用ページから確認できます。

↓地図の表示画面

アイコンはちょっと地図に溶け込んでて分かりにくいので、変える可能性アリです。

ちなみに、上記画面の右上にGoogle Mapを使った表示ページへのリンクもあります。興味がある方はYahooの地図とGoogleの地図を比較してみてください。
航空写真はGoogleのほうが綺麗に写りますね。

次に、GPSなどで採取したルート情報（GPXファイル）も表示できるようにしました。
ライブラリをあっちこっちから収集してきて作ったので、結構大変だった・・・。

実際のルートサンプルはこちらから確認してください。[IE6/Firefox2.0で確認済み]

美しくないですが、興味のある方は上記リンク先のソースコードをご覧くださいませ。

大雑把な処理内容は↓のような感じです。
１）Yahoo!地図を表示
２）サーバ上のGPXをprototype.jsで取得
３）XML.ObjTreeで取得したGPXファイルを解析
４）wz_jsgraphics.jsで線を引く（画面外は線を引かない）

画面外部の座標の切り方に手を抜いていたり、リサイズ時の対処ができていなかったり、まだ改善点は多いですが、順次直していきます。
Google MAPsのGPolyline関数のような線を引く関数（YPolylineみたいな感じで）をYahooが提供してくれると助かるんですが・・・

ということで、第一報でした。

関連エントリ：
・Yahoo Maps上にルート作成（１）：GPXファイルの取得
・Yahoo Maps上にルート作成（２）：GPXファイルの解析
・Yahoo Maps上にルート作成（３）：測地系の変換
・Yahoo Maps上にルート作成（４）：Yahoo!Map上に線を描く
・Yahoo Maps上にルート作成（５）：線画座標と経度・緯度座標の変換

投稿者 matoyan : 05:24 | コメント (0) | トラックバック

2007年02月14日

Yahoo MapのaddIconsメソッドのサンプル

Yahoo!地図情報のAPI（Yahoo Maps API）での開発メモを引き続き。

アイコンをaddIconメソッドで一個一個設置していると表示が非常に重くなるので、1月から新たに追加された
addIcons(ary)
メソッドを使ってみました。

リファレンスマニュアル によると

複数のアイコンを追加します。 パラメータ： * ary - アイコン情報が格納された配列 引数aryは配列になっており、1つの要素が1つのアイコンを表します。 配列の1つの要素は以下のような JSON オブジェクトになっています。 {id:'icon1',pos:'35.40.39.798,139.46.15.436',popup:'ポップアップ',type:'L1',label:'ラベル'} JSONオブジェクトのそれぞれのパラメータの仕様については、 addIcon()メソッドを参照してください。

となっています。
JSONオブジェクトなるものの配列らしいのですが、Googleで検索してもサンプルコードもないし適当に実装してみてもぜんぜん動きません。

試行錯誤したところ

var Ymap = new YahooMapsCtrl("maparea1", "35.40.39.798,139.46.15.436", 3);
var icons = [{id:'icon1',pos:'35.40.39.798,139.46.15.436',popup:'ポップアップ',type:'L1',label:'ラベル'}];
Ymap.addIcons(icons);

と、角括弧でくくるようです。（あたりまえか）
↓



複数表示させる場合は

var Ymap = new YahooMapsCtrl("maparea2", "35.40.39.798,139.46.15.436", 3);
var icons = [{id:'icon1',pos:'35.40.39.798,139.46.15.436',popup:'ポップアップ1',type:'L1',label:'ラベル1'}.{id:'icon2',pos:'35.40.39.0,139.46.15.0',popup:'ポップアップ2',type:'L2',label:'ラベル2'}];
Ymap.addIcons(icons);

と、角括弧の中にJSON形式のデータを並べればちゃんと2つ表示されました。
↓

投稿者 matoyan : 00:35 | コメント (0)

2007年02月13日

Yahoo Mapのポップアップ(popup)の表示崩れ

Yahoo!地図情報のAPI（Yahoo Maps API）での開発メモを引き続き。

先日の日記をもとにヤマレコのサイト内でAPIを使って、addIconメソッドでアイコンを設置してみたのですが
↓こんな感じで表示が崩れてしまいました。

崩れたページを表示

このブログで正しく表示できたコードをそのままヤマレコに持ってきただけで表示が崩れたので、xoopsのせいなのか何なのかさっぱり原因がわからなかったのですが、半日ぐらい悩んで分かりました。

原因がわかると当たり前なんですが、ヤマレコのサイトで
・tableタグのCSSを定義していたこと
でした。

Yahoo MapのaddIconメソッドで表示されるアイコンのpopupはtableで書かれているとのことで、cssでtableのwidthを100%にしたり、padding-leftやpadding-rightに値を指定するとポップアップの左右の画像が重なって表示されてしまいます。

上記の表示崩れページは正しく表示されるページに以下のコードを追加しただけです。

---ここから---
<style type="text/css">
<!--
table {width:100%;}
table td {padding-right:2px;padding-left:2px;}
-->
</style>
---ここまで---

原因は判明したのですが、ヤマレコはサイト全体で1つのCSSを使っているので
■CSSのtable {width:100%;}を書くと、Yahoo地図のポップアップが崩れる。
■CSSのtable {width:100%;}を削除すると、もともとのサイトの表示が崩れる。
というジレンマに陥ってしまいました。

仕方がないので、地図ページ専用にtableタグを定義していないCSSファイルを作成しました。
本来はtable全体にスタイル定義するのではなくて、クラスなりIDなりを定義して、そこにスタイル定義するべきなんでしょうね。

投稿者 matoyan : 23:05 | コメント (0) | トラックバック

2007年02月10日

山屋ならGoogle MapsよりもYahoo地図か？

いまさら気づいたのですが、Yahoo地図もGoogleと同じく地図情報を扱えるWebサービスAPIを公開していました。
去年の12月公開らしいです。

さっそく、Yahooの地図の解説にしたがって設置してみました。
Google Maps APIを触ったことがある人なら、簡単に設置できます。

↓常念岳

で、設置して見て初めて気がついたのですが、Yahooの地図（正確にはアルプス社の地図）には等高線がちゃんと表示されるんですよね・・・。

Google Mapsで設置したら、一部の山頂付近は等高線が表示されるところもあるのですが、ほとんどの場合、のっぺりした等高線も何もない地図しか表示されません。等高線がないと単に山頂の場所表示にしか使えないので非常に不満だったのですが、これなら便利ですね。登山道も表示されますし。ズームしすぎると何も表示されなくなるのは玉にキズですが。


設置ついでにリファレンスマニュアルを一通り見てみました。Google MapのGPolylineのような線画用のクラスがないようなので、ヤマレコでやっているルートの表示みたいな機能をつくるには、別のライブラリを使うなり、自分で一から作るなりしないといけないっぽいです。

あとは、Google Mapsの世界測地系ではなくて、日本測地系データを使わないといけないので、変換機能も1枚かます必要がありそうです。


いろいろ面倒な気がしますが、でも山屋からしたら、やっぱり等高線が表示される方を選択したいですし、新しい機能にも触ってみたいので、とりあえずYahoo地図でも表示できるように作り始めようかなと思っています。

さらに登山道が表示されるということは、今のヤマレコのようなカシミール3Dを使ってルートを作る方法ではなくて、地図上でクリックして行ってルートを登録する、みたいな機能も実現する価値が出るかも、とちょっと期待してます。

投稿者 matoyan : 00:50 | コメント (0)

2007年02月08日

上に戻るボタン

携帯電話サイトでよく見かける、番号0を押すと「上に戻る」もしくは「ページの先頭へ」みたいなリンクを追加しました。

作り方は簡単で、リンクの属性に「accesskey」を追加すればOK。

例えば、ページの先頭に
<a name="pagetop" /></a>
と飛び先を書いておいて、ページの下に
<a href="#pagetop" accesskey="0">ページの先頭へ↑</a>
と書いておきます。

すると携帯電話の番号0を押すと、そのページの先頭にある「pagetop」タグまで飛んでいきます。
非常にカンタン。

ヤマレコにも全部のページに「ページの先頭へ」のリンクを追加してみました。
気がついたら使ってみてください。

投稿者 matoyan : 00:14 | コメント (0)

2007年02月07日

Google Mapのボタンが英語になる件

いつからそうなったのか分からないのですが、地図ページの右上のボタンが
ブラウザによっては英語表記になっていました。

google mapのリクエスト送信先を
<script src="http://maps.google.com/maps?....
から
<script src="http://maps.google.co.jp/maps?....
にすると直りました。
（※google.comからgoogle.co.jpに変更）
Googleの仕様が変わったのかな。

■サンプル：富士山のページ
http://www.yamareco.com/modules/yamainfo/

投稿者 matoyan : 00:16 | コメント (0)

2007年02月06日

携帯向けページ作成中

先日はじめたばかりですが、携帯向けのページを作ってます。
ログイン機能も登録機能もありませんが、キーワードで山や山行を検索できるところまで作ってみました。
試験もロクにしていないし、プログラムの更新タイミングによっては使えないと思いますが、興味がある方は覗いてみてください。

http://www.yamareco.com/i/

↓QRコードも作ってみました。

あとは、現在地周辺の山行記録を探すために、GPSを使った検索機能も付けてみました。
auでしか確認していないので、docomoとかsoftbankではまだ動かないです。

完成までは時間がかかると思いますが、気長にお待ちくださいませ。
春ごろを目標に地道に作りこんでいきます。

投稿者 matoyan : 01:08 | コメント (0)

2007年02月05日

RSS配信

自分の周囲は仕事がらRSSリーダーを使ってニュースやblogをチェックしている人が多いのですが、山をやっている人で、RSSを使っている人ってどのぐらいいるんでしょうか。

山岳会や個人のページにRSSの生成機能をつけたら、山行が投稿されたら分かるようになるので結構便利かな、とも思ったりするんですが。
使う人がいれば作ろうかな。RSS機能、誰か使います？

投稿者 matoyan : 23:49 | コメント (0)

2007年02月01日

経度・緯度から直線距離を求める方法

携帯のGPS機能などで現在の位置が経度・緯度で分かったあと、そこから近い山を探すためには2地点の座標から直線距離を求める必要があります。

正式な計算方法は国土地理院の↓のページにあるようです。
「2点の平面直角座標x,yから測地線長および方向角を求める計算」
http://vldb.gsi.go.jp/sokuchi/surveycalc/algorithm/

が、残念ながら理解できなかった＆そこまで正確な値が欲しい訳ではないので、ものぐさ心でネットを探したら公開されているコードがありました。
「経度・緯度による距離計算」
http://www2.neweb.ne.jp/wd/nobuaki/New_Homepage/okinawa703.htm

Javascriptだと携帯では使えないので、perlに書き直しました。
【地点1】北緯: $na, 東経: $ta
【地点2】北緯: $nb, 東経: $tb
のときの場合です。あらかじめdd.dddddd（度のみの表記）に変換したものを使います。

$na=3.1415926535*$na/180;
$ta=3.1415926535*$ta/180;
$na=$na-((11.55/60)*3.1415926535/180)*sin(2*$na);
$nb=3.1415926535*$nb/180;
$tb=3.1415926535*$tb/180;
$nb=$nb-((11.55/60)*3.1415926535/180)*sin(2*$nb);
$c=cos($na)*cos($nb)*cos($ta-$tb)+sin($na)*sin($nb);
$s=sqrt(1-$c**2);
$d=atan2($s, $c)*6369;

とすると、$dにkm表示で2地点間の直線距離が入ります。
でも内容を理解できていないので、記号の羅列にしか見えなかったり・・・

まぁぼちぼちやっていきます。

投稿者 matoyan : 00:09 | コメント (0)