読み書きプログラミング

日常のプログラミングで気づいたことを綴っています

Google Earthコンテンツの作り方 (6) ーインタラクティブなバルーンー

KML


Goolge EarthのバルーンはHTMLで記述でき、そこからのアンカーのリンク先はGoolge Earth内のブラウザで開かれますので、HTML5に準じた表現力豊かなコンテンツを用意することができます。既にGoogleマップでストリートビューを見ましたね。YouTubeも見ることができます。HTML5のゲームとか動きます。試してみましょう。
オンラインゲームのsplax.netさんがiPhone/Android用のゲームも色々ご提供されていますので、1つ拝借しました。iPad/iPhoneで以下のURLにアクセスしてお楽しみください。

http://y-ich.github.io/kml/game-load.kml

iOS用です。パソコン版ではリンク先がトップページにリダイレクトされるようです。Android版ではどうなるのでしょうか？


Google EarthのバルーンやブラウザはWebkitでレンダリングされるのですが、いくつかの制約があります。

  • アンカータグのtargetは未サポート
  • alert/confirmなどのダイアログボックスは未サポート
  • CSSのurl関数は未サポート
  • localStorageは未サポート。(applicationCacheは?)

更にモバイル版の場合、

  • ウィンドウサイズが固定
  • (内部ブラウザでなく)バルーンの場合、KMZ内のjsを相対URLで読み込むことができない。

さて、バルーンやブラウザの中のインタラクションを見ましたが、目印間でも何らかのインタラクションが欲しいですね。アンカータグの形で用意されています。

Google Earth内のWebkitは、アンカータグのURLの拡張子がkml/kmzだったり、typeがapplication/vnd.google-earth.kml+xmlの時には、クリックされると処理をGoogle Earth本体に渡し、本体はkml/kmzを読み込みます。その時、URLにフラグメント(#id名)が付いていると、そのid名のFeatureにジャンプします。これによって目印間の移動が可能になります。

例を見てましょう。スイスの山々を見たので、負けずに日本の三大岩稜を題材にしました。

http://y-ich.github.io/kml/ridge-load.kml

パソコン版Google Earthで見ていただくと、バルーンの中のアンカーリンクで別の目印に移動できることを確認して下さい。

中身は以下の通りです。

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
	<name>ridge.kml</name>
	<StyleMap id="msn_track">
		<Pair>
			<key>normal</key>
			<styleUrl>#sn_track</styleUrl>
		</Pair>
		<Pair>
			<key>highlight</key>
			<styleUrl>#sh_track</styleUrl>
		</Pair>
	</StyleMap>
	<Style id="sn_track">
		<IconStyle>
			<scale>1.1</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
		<BalloonStyle>
			<text><![CDATA[<h3>$[name]</h3>
$[description]]]></text>
		</BalloonStyle>
		<ListStyle>
		</ListStyle>
	</Style>
	<Style id="sh_track">
		<IconStyle>
			<scale>1.3</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
		<BalloonStyle>
			<text><![CDATA[<h3>$[name]</h3>
$[description]]]></text>
		</BalloonStyle>
		<ListStyle>
		</ListStyle>
	</Style>
	<Folder>
		<name>三大岩稜</name>
		<open>1</open>
		<Placemark id="hodaka">
			<name>穂高岳</name>
			<description><![CDATA[<a href="#tsurugi">剱岳にGo!</a>]]></description>
			<LookAt>
				<longitude>137.6534067547421</longitude>
				<latitude>36.28608603502574</latitude>
				<altitude>0</altitude>
				<heading>11.49156950225207</heading>
				<tilt>64.59160323302423</tilt>
				<range>8107.54193495845</range>
				<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
			</LookAt>
			<styleUrl>#msn_track</styleUrl>
			<Point>
				<coordinates>137.6480560177238,36.289167005804,0</coordinates>
			</Point>
		</Placemark>
		<Placemark id="tsurugi">
			<name>剣岳</name>
			<description><![CDATA[<a href="#tanigawa">谷川岳にGo!</a>]]></description>
			<LookAt>
				<longitude>137.6137058223657</longitude>
				<latitude>36.61131307739188</latitude>
				<altitude>0</altitude>
				<heading>11.93472255443647</heading>
				<tilt>65.31669940396245</tilt>
				<range>4418.920346075673</range>
				<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
			</LookAt>
			<styleUrl>#msn_track</styleUrl>
			<Point>
				<coordinates>137.617072998593,36.62331099878913,0</coordinates>
			</Point>
		</Placemark>
		<Placemark id="tanigawa">
			<name>谷川岳</name>
			<description><![CDATA[<a href="#hodaka">穂高岳にGo!</a>]]></description>
			<LookAt>
				<longitude>138.9350227376156</longitude>
				<latitude>36.83205127562792</latitude>
				<altitude>0</altitude>
				<heading>-94.05479804179602</heading>
				<tilt>35.23905537428566</tilt>
				<range>2293.433224821648</range>
				<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
			</LookAt>
			<styleUrl>#msn_track</styleUrl>
			<Point>
				<coordinates>138.931310825322,36.83312412925407,0</coordinates>
			</Point>
		</Placemark>
	</Folder>
</Document>
</kml>


これを使えば、世界を旅しながら色々できそうでしょ？


ところが、このKML、iOS版Google Earthではうまく行きません。以下の不具合があるようです。

  • リンクをタッチする度に、KMLを読み込み、目印などが重複していく。
  • 対応する目印のビューに移動せずに、全目印の重心に移動する。

早く不具合に対応してもらえたら嬉しいですね。


擬似的に同じようなことをiOS版でやろうと思うと、以下のように非常時の目印毎のKMLを別途用意する方法があります。

http://y-ich.github.io/kml/ridge-ipad-load.kml


ridge-ipad.kml

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
	<name>ridge.kml</name>
	<StyleMap id="msn_track">
		<Pair>
			<key>normal</key>
			<styleUrl>#sn_track</styleUrl>
		</Pair>
		<Pair>
			<key>highlight</key>
			<styleUrl>#sh_track</styleUrl>
		</Pair>
	</StyleMap>
	<Style id="sn_track">
		<IconStyle>
			<scale>1.1</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
		<BalloonStyle>
			<text><![CDATA[<h3>$[name]</h3>
$[description]]]></text>
		</BalloonStyle>
		<ListStyle>
		</ListStyle>
	</Style>
	<Style id="sh_track">
		<IconStyle>
			<scale>1.3</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
		<BalloonStyle>
			<text><![CDATA[<h3>$[name]</h3>
$[description]]]></text>
		</BalloonStyle>
		<ListStyle>
		</ListStyle>
	</Style>
	<Folder>
		<name>三大岩稜</name>
		<open>1</open>
		<Placemark id="#hodaka">
			<name>穂高岳</name>
			<description><![CDATA[<a href="tsurugi.kml#tsurugi">剱岳にGo!</a>]]></description>
			<LookAt>
				<longitude>137.6534067547421</longitude>
				<latitude>36.28608603502574</latitude>
				<altitude>0</altitude>
				<heading>11.49156950225207</heading>
				<tilt>64.59160323302423</tilt>
				<range>8107.54193495845</range>
				<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
			</LookAt>
			<styleUrl>#msn_track</styleUrl>
			<Point>
				<coordinates>137.6480560177238,36.289167005804,0</coordinates>
			</Point>
		</Placemark>
		<Placemark id="#tsurugi">
			<name>剣岳</name>
			<description><![CDATA[<a href="tanigawa.kml#tanigawa">谷川岳にGo!</a>]]></description>
			<LookAt>
				<longitude>137.6137058223657</longitude>
				<latitude>36.61131307739188</latitude>
				<altitude>0</altitude>
				<heading>11.93472255443647</heading>
				<tilt>65.31669940396245</tilt>
				<range>4418.920346075673</range>
				<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
			</LookAt>
			<styleUrl>#msn_track</styleUrl>
			<Point>
				<coordinates>137.617072998593,36.62331099878913,0</coordinates>
			</Point>
		</Placemark>
		<Placemark id="#tanigawa">
			<name>谷川岳</name>
			<description><![CDATA[<a href="hodaka.kml#hodaka">穂高岳にGo!</a>]]></description>
			<LookAt>
				<longitude>138.9350227376156</longitude>
				<latitude>36.83205127562792</latitude>
				<altitude>0</altitude>
				<heading>-94.05479804179602</heading>
				<tilt>35.23905537428566</tilt>
				<range>2293.433224821648</range>
				<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
			</LookAt>
			<styleUrl>#msn_track</styleUrl>
			<Point>
				<coordinates>138.931310825322,36.83312412925407,0</coordinates>
			</Point>
		</Placemark>
	</Folder>
</Document>
</kml>

hodaka.kml

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
	<name>hodaka.kml</name>
	<StyleMap id="msn_track">
		<Pair>
			<key>normal</key>
			<styleUrl>#sn_track</styleUrl>
		</Pair>
		<Pair>
			<key>highlight</key>
			<styleUrl>#sh_track</styleUrl>
		</Pair>
	</StyleMap>
	<Style id="sn_track">
		<IconStyle>
			<scale>1.1</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
		<BalloonStyle>
			<text><![CDATA[<h3>$[name]</h3>
$[description]]]></text>
		</BalloonStyle>
		<ListStyle>
		</ListStyle>
	</Style>
	<Style id="sh_track">
		<IconStyle>
			<scale>1.3</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
		<BalloonStyle>
			<text><![CDATA[<h3>$[name]</h3>
$[description]]]></text>
		</BalloonStyle>
		<ListStyle>
		</ListStyle>
	</Style>
	<Placemark id="hodaka">
		<name>穂高岳</name>
		<visibility>0</visibility>
		<description><![CDATA[<a href="#tsurugi">剱岳にGo!</a>]]></description>
		<LookAt>
			<longitude>137.6534067547421</longitude>
			<latitude>36.28608603502574</latitude>
			<altitude>0</altitude>
			<heading>11.49156950225207</heading>
			<tilt>64.59160323302423</tilt>
			<range>8107.54193495845</range>
			<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
		</LookAt>
		<styleUrl>#msn_track</styleUrl>
		<Point>
			<coordinates>137.6480560177238,36.289167005804,0</coordinates>
		</Point>
	</Placemark>
</Document>
</kml>

tsurugi.kml

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
	<name>tsurugi.kml</name>
	<StyleMap id="msn_track">
		<Pair>
			<key>normal</key>
			<styleUrl>#sn_track</styleUrl>
		</Pair>
		<Pair>
			<key>highlight</key>
			<styleUrl>#sh_track</styleUrl>
		</Pair>
	</StyleMap>
	<Style id="sn_track">
		<IconStyle>
			<scale>1.1</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
		<BalloonStyle>
			<text><![CDATA[<h3>$[name]</h3>
$[description]]]></text>
		</BalloonStyle>
		<ListStyle>
		</ListStyle>
	</Style>
	<Style id="sh_track">
		<IconStyle>
			<scale>1.3</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
		<BalloonStyle>
			<text><![CDATA[<h3>$[name]</h3>
$[description]]]></text>
		</BalloonStyle>
		<ListStyle>
		</ListStyle>
	</Style>
	<Placemark id="tsurugi">
		<name>剣岳</name>
		<description><![CDATA[<a href="#tanigawa">谷川岳にGo!</a>]]></description>
		<LookAt>
			<longitude>137.6137058223657</longitude>
			<latitude>36.61131307739188</latitude>
			<altitude>0</altitude>
			<heading>11.93472255443647</heading>
			<tilt>65.31669940396245</tilt>
			<range>4418.920346075673</range>
			<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
		</LookAt>
		<styleUrl>#msn_track</styleUrl>
		<Point>
			<coordinates>137.617072998593,36.62331099878913,0</coordinates>
		</Point>
	</Placemark>
</Document>
</kml>

tanigawa.kml

<?xml version="1.0" encoding="UTF-8"?>
<kml xmlns="http://www.opengis.net/kml/2.2" xmlns:gx="http://www.google.com/kml/ext/2.2" xmlns:kml="http://www.opengis.net/kml/2.2" xmlns:atom="http://www.w3.org/2005/Atom">
<Document>
	<name>tanigawa.kml</name>
	<StyleMap id="msn_track">
		<Pair>
			<key>normal</key>
			<styleUrl>#sn_track</styleUrl>
		</Pair>
		<Pair>
			<key>highlight</key>
			<styleUrl>#sh_track</styleUrl>
		</Pair>
	</StyleMap>
	<Style id="sn_track">
		<IconStyle>
			<scale>1.1</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
		<BalloonStyle>
			<text><![CDATA[<h3>$[name]</h3>
$[description]]]></text>
		</BalloonStyle>
		<ListStyle>
		</ListStyle>
	</Style>
	<Style id="sh_track">
		<IconStyle>
			<scale>1.3</scale>
			<Icon>
				<href>http://maps.google.com/mapfiles/kml/pushpin/ylw-pushpin.png</href>
			</Icon>
			<hotSpot x="20" y="2" xunits="pixels" yunits="pixels"/>
		</IconStyle>
		<BalloonStyle>
			<text><![CDATA[<h3>$[name]</h3>
$[description]]]></text>
		</BalloonStyle>
		<ListStyle>
		</ListStyle>
	</Style>
	<Placemark id="tanigawa">
		<name>谷川岳</name>
		<visibility>0</visibility>
		<description><![CDATA[<a href="#hodaka">穂高岳にGo!</a>]]></description>
		<LookAt>
			<longitude>138.9350227376156</longitude>
			<latitude>36.83205127562792</latitude>
			<altitude>0</altitude>
			<heading>-94.05479804179602</heading>
			<tilt>35.23905537428566</tilt>
			<range>2293.433224821648</range>
			<gx:altitudeMode>relativeToSeaFloor</gx:altitudeMode>
		</LookAt>
		<styleUrl>#msn_track</styleUrl>
		<Point>
			<coordinates>138.931310825322,36.83312412925407,0</coordinates>
		</Point>
	</Placemark>
</Document>
</kml>


「Google Earthコンテンツの作り方」いかがでしたでしょうか？
ネタが尽きましたので、また見つけましたら追加記事を書きたいと思います。ありがとうございました。