GPSの経路ログ表示にGoogle Maps API V3 を使う (その1：KML 形式ファイルを作る)

最近，TripMate850 という GPS ロガーを買い，その経路のログを適度に間引いて Google Map や Yahoo RouteLab で地図に表示してみてる，と書いた（「GPSのログを間引く（折れ線を間引く）」）。この間の投稿では，経路のログの点数が多いので，それを如何に減らすか（如何に間引くか？）について書いた。

今回は，その続きで，Google Map に経路を表示し，出発点や終点，停留点や写真を撮った場所にアイコンを表示させ，さらにアイコンをクリックすると吹出しを出し，アイコン設置場所の住所や撮影した写真を載せるという話。

<<目次>>
GPSのログを間引く（折れ線を間引く） ：前回の投稿

GPSの経路ログ表示にGoogle Maps API V3 を使う　（その６ （+α） までを考慮したサンプル地図）
・その1：KML 形式ファイルを作る（今回）：Google Map 用の KML ファイルを作る
・その2：KMLファイルの中身を地図に表示する：Google Maps API v3 を用いて，JavaScript で Google Map を利用する
・その3：アイコン(Marker)の表示：好きな画像のアイコンを表示する
・その4：吹出し(InfoWindow)の表示：複数の InfoWindow の表示
・その5：センターマークの表示：Marker としてセンターマークを表示する
・その6：吹出しに高度と住所をいれる：Google Geocoder と Google ElevationService の利用
・その7：センターマークの改良：専用 KML ファイルを用いたセンターマークの表示
・その8：InfoWindowの改良：配列を使わずに InfoWindow（吹出し）を作ってみた
・その9：表示範囲の自動設定：表示範囲をKMLデータにfitさせるボタンを用意した（このシリーズの最後の投稿）

---

前回とカブる部分もあるけど，大体の流れを書くと，

　(1) GPS ロガーからのデータを取り込み，スクリプトで使いやすいデータとして取り込む。
　(2) 長くとどまった場所を停留点をして，写真を撮った場所をPhoto Pointとしてリストアップ
　(3) Douglas-Peuckerのアルゴリズムで経路点を間引く
　(4) 表示させたい写真のリスト，
　　　複数の経路がある場合の経路リスト，
　　　アイコンを表示させたい点のリスト，
　　　表示させたい経路のリスト，を作業ファイルとして書きだす。
　(5) 作業ファイルを元に，KML 形式で経路の色や経路の情報をファイルに保存する。
　(6) 保存した KML 形式のデータを用いて，Google Map に表示する。
　　　この際，Google Maps API V3 を用いて，JavaScript でアイコンを表示させたい経路点に
　　　アイコンを表示させ，アイコンをクリックすると吹出しを表示させるようにする。

というもの。これを Perl のスクリプトで処理する。(1)，(2)，(3) に関しては，前回の投稿に書いたので，今回は特に記述はしないでおこう。

(4) の作業ファイルだが，私は１点につき，１行とし，いろんな情報を TAB 区切りテキストの形でファイルに保存することにしている。TAB 区切りなので，取り出す時には Perl の split 関数を使って

@buff = split(/\t/,$inline);

とすればいいので。各行には，点の種類（出発点か停留点か，撮影場所か，など）によって異なるが，大体，どの経路か，どの経路点か，時刻，緯度，経度，高度，点の分類，などを記載している。

(5) の KML ファイルは，Google KML 形式に従って記述している。この Google KML 形式の説明のサイトは慣れないと分かりにくいが，左の方にある縦長のメニューの中の「ドキュメント」の中の項目，「概要」，「KML チュートリアル」，「デベロッパー ガイド」，「KML リファレンス」にいろいろな情報が記載してある。今回，KML ファイルには，経路の色指定と，地図のタイトル，一連の経路点の座標データを書き出している。アイコンを表示させたい点（WayPoint と呼ばれる）も記載できるが，今回は JavaScript を使ってアイコンを表示させるので，ここでは書き出していない。以下に KML ファイルのサンプルを載せておく。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://earth.google.com/kml/2.2">
<Document>
<description>
    <![CDATA[<p>Map TITLE</p>]]>
</description>
<Style id="Line_1">
    <LineStyle>
    <color>ffff0000</color>
    <width>3</width>
    </LineStyle>
</Style>
<Style id="Line_2">
    <LineStyle>
    <color>ff0000ff</color>
    <width>3</width>
    </LineStyle>
</Style>
    ...
    ...
<Style id="Line_X">
    <LineStyle>
    <color>ff0000ff</color>
    <width>3</width>
    </LineStyle>
</Style>
<Folder>
    <name>Screen Overlays</name>
    <visibility>0</visibility>
    <ScreenOverlay>
        <name>Title strings</name>
        <visibility>0</visibility>
        <Icon>
        <href>./map_title.png</href>
        </Icon>
        <overlayXY x="0.5" y="1" xunits="fraction" yunits="fraction"/>
        <screenXY x="0.5" y="1" xunits="fraction" yunits="fraction"/>
        <rotationXY x="0.5" y="0.5" xunits="fraction" yunits="fraction"/>
        <size x="0" y="0" xunits="pixels" yunits="pixels"/>
    </ScreenOverlay>
</Folder>
<Folder>
    <name>Tracks</name>
    <Placemark>
        <name>経路 1: 謎の経路</name>
        <description><![CDATA[Track の説明]]></description>
        <styleUrl>#Line_1</styleUrl>
        <LineString>
        <extrude>0</extrude>
        <tessellate>1</tessellate>
        <altitudeMode>clampToGround</altitudeMode>
        <coordinates>
            136.5,35.0,106.2
            136.51,35.0,106.2
            136.52,35.0,106.2
            136.53,35.0,106.2
            136.54,35.0,106.2
            ....
            (これらの値はテキトーです)
            ....
        </coordinates>
        </LineString>
    </Placemark>
    <Placemark>
        ...
        ...
    </Placemark>
</Folder>
</Document>
</kml>

インデント（字下げ）は私の好みなので，ちょっと見にくいかもしれないが，ご勘弁を。この KML 形式は，広くは xml 形式の範疇に入るもので，<XXX> と </XXX> に挟んでいろんな項目を記述する形式となってる。web のソースコードと同じ類いのもの，ということができる。

KML ファイルは，<kml> と </kml> に挟まれ，かつ，ほとんど全体が <Document> と </Document> に挟まれた範囲に書かれている。
<Document> と </Document> の間には，<description> と </description> に挟まれて全体の説明があり，次に<Style id="XXXX"> と </Style> に挟まれた線の色や線幅の定義が並ぶ。その下に <Folder> と </Folder> に挟まれた Folder 要素が並ぶ。

Folder 要素は Screen Overlays を記述するものと，経路 (Track) を記述するものが並んでいる。
最初の Folder 要素の中は <ScreenOverlay> と </ScreenOverlay> に挟まれて Screen Overlay (地図の上に置く画像など) の記述があり，後ろの Folder 要素の中には <Placemark> と </Placemark> に挟まれて各経路の点の座標が記述されいてる。
今回使った Screen Overlay は，画面の上端中央に画像化した地図のタイトルを表示させるためのものである。地図のタイトル文字列の画像化には，PerlMagick を使った。Screen Overlay の他のパラメーターに関しては KML リファレンスの Screen Overlay 項目を見てほしい。

各経路 (track) がどのスタイルを使うかは，<styleUrl>#Line_2</styleUrl> と指定してある。この要素は URL でないといけないので，同じファイル内で定義されたスタイルを用いる際には，要素の先頭に「#」をつけないといけない。

もし，KML 形式で WayPoint を記述するなら，まず Style 要素としてアイコンの種類ごとに以下のようなスタイルの定義を加える。

<Style id="wpIcon">
    <IconStyle>
    <scale>1</scale>
    <Icon>
    <href>http://maps.gstatic.com/intl/ja_jp/mapfiles/ms/micons/red-pushpin.png</href>
    </Icon>
    <hotSpot x="0.5"  y="0.5" xunits="fraction" yunits="fraction"/>
    </IconStyle>
</Style>

ここでは Google の赤い押しピンを指定している。「hotSpot」はアイコンの中のどの点を経路点に配置するか，を表す（押しピンなら画像の中のピンの先を指定）が，何故か今回はうまく働かなかった。
さらに，Screen Overlay を記述している Folder 要素の下に，以下のような WayPoint のための Folder 要素を配置しておけばいい。

<Folder>
...
(Screen Overlay の記述)
...
</Folder>
<Folder>
    <name>WayPoints</name>
    <Placemark>
        <name>経路1：出発点</name>
        <address>出発点のアドレス</address>
        <description><![CDATA[出発点の説明]]></description>
        <styleUrl>#wpIcon</styleUrl>
        <LookAt>
        <longitude>136.5</longitude><latitude>35.0</latitude>
        <range>6000</range><tilt>45</tilt><heading>0</heading>
        </LookAt>
        <Point>
        <coordinates>136.5,35.0,57.8</coordinates>
        </Point>
    </Placemark>
    <Placemark>
        ...
        ...
    </Placemark>
</Folder>
<Folder>
    ...
    (Track の記述)
    ...
</Folder>

ここもパラメーターの詳細に関しては KML リファレンスの Placemark の項目を見てほしい。

（その2：KMLファイルの中身を地図に表示するへ続く）