6
27
2011
電子国土上で画像をポップアップ表示させる
電子国土WEBマップ上で画像のポップアップを実現する方法
電子国土WEBマップシステムではJSGIXML形式のXMLデータをユーザ側で用意することで、マーカーアイコン上にマウスを重ね合わせるとテキストやHTMLアンカータグをポップアップウインドウに表示させることができる．
Google Mapsや Yahoo Map 上ではユーザ側でHTMLコンテンツを用意すれば、ポップアップウインドウ上にHTMLコンテンツを表示させることができるが、残念ながら電子国土WEBマップシステムではユーザがHTMLコンテンツをポップアップウインドウ上に表示させることができなかった．
電子国土WEBマップシステム上で何とかHTMLコンテンツをポップアップ表示できないものかと試行錯誤を行った結果、JSGIXML形式のXMLデータを小細工することで、無理矢理HTMLコンテンツをポップアップ表示させることに成功した．
ただし、XMLデータの中に小細工を施した任意のHTMLコンテンツを埋め込み、それをWEBブラウザで表示させることになるので、セキュリティー的にはちょっと問題がありそうだ．
XMLデータの小細工の方法は単純で、マーカーオブジェクトの “attribute” 要素の中身に HTMLタグの < , > などを < のようにHTMLエンティティとして記述するだけである．
【問題点】
・JSGIXMLのデータに小細工を施しても、Firefox、Opera では ポップアップウインドウ
にコンテンツがまともに表示されない．
Safari, Chrome, Internet Explorer は問題なし
[gpsmap src=”https://y2lab.org/blog/wp-content/uploads/GPS/GotenbaTrail2.gpx” provider=”CJ2old” delta=50 chart=”none” ngg_gallery=8 ]
Zoom Level: Bearing(Heading): Pitch: Grid Interval:
画像をポップアップ表示させるJSGIXMLデータの例
見やすくするために <attributes> の中身は改行を入れてあります
[sourcecode language=”xml”] <?xml version="1.0" encoding="UTF-8"?> <GI version="1.0" timeStamp="2011-06-27T18:06:14"> <dataset> <layer> <name>Waypoint Layer</name> <description>https://y2lab.org/blog/wp-content/uploads/GPS/GotenbaTrail2.gpx</description> <style> <name>Waypoint Symbol</name> <type>symbol</type> <display>on</display> <transparent>off</transparent> <selection>on</selection> <displaylevel>all</displaylevel> <symbol> <uri>https://y2lab.org/blog/wp-content/plugins/gpsmap/icons/cj_pin_green.png</uri> <size>36,static</size> </symbol> </style> <point id="Waypoint-1"> <point> <CRS uuidref="JGD2000 / (L, B)"/> <position> <coordinate>138.731186 35.35942799999999</coordinate> </position> </point> <name></name> <description>御殿場口頂上</description> <attribute>=<div style="width:220px;height:100px;font-size:0.6em;text-align:left;color:#555;"><h5>御殿場口頂上</h5><span>DateTime: Jul 19 2010 07:40:06 (JST)</span><br/><span>Latitude: 35.359428</span><br/><span>Longitude: 138.731186</span><br/><span>Altitude: 3710.6m</span><br/></div> </attribute> </point> <point id="Waypoint-2"> <point> <CRS uuidref="JGD2000 / (L, B)"/> <position> <coordinate>138.738617 35.354652</coordinate> </position> </point> <name></name> <description>赤岩八号館</description> <attribute>=<div style="width:220px;height:100px;font-size:0.6em;text-align:left;color:#555;"><h5>赤岩八号館</h5><span>DateTime: Jul 19 2010 08:28:17 (JST)</span><br/><span>Latitude: 35.354652</span><br/><span>Longitude: 138.738617</span><br/><span>Altitude: 3298.8m</span><br/></div> </attribute> </point> … 省略 … </layer> <layer> <name>Photo Layer</name> <description>NextGen Gallery ID : 8</description> <style> <name>Photo Marker Symbol</name> <type>symbol</type> <display>on</display> <transparent>off</transparent> <selection>on</selection> <displaylevel>all</displaylevel> <symbol> <uri>https://y2lab.org/blog/wp-content/plugins/gpsmap/icons/dcam_black.png</uri> <size>16,static</size> </symbol> </style> <point id="Photo-1"> <point> <CRS uuidref="JGD2000 / (L, B)"/> <position> <coordinate>138.731476 35.359661</coordinate> </position> </point> <name></name> <description>g0013862.jpg</description> <attribute>=<div style="width: 180px: height: 200px; text-align: center; font-size: x-small;font-family: serif;"> <h5 style="display: block; width: 180px; text-align: center; font-size: small; font-weight: bold; line-height: 1.2em;">g0013862 頂上</h5> <div style="width: 140px: height: 140px; margin: 0 auto;"> <a href="/blog/wp-content/gallery/gotenbatrail/g0013862.jpg" target="_blank" > <img src="/blog/wp-content/gallery/gotenbatrail/thumbs/thumbs_g0013862.jpg" style="margin: 2px auto;" width="120" height="80" /> </a> </div> <div style="width: 180px: height: 120px; margin: 0 auto; text-align: center; font-size: x-small; font-family: serif;"> <span style="text-align: center;font-size: x-small;font-family: serif;">DateTime: 2010:07:19 07:43:44</span><br /> <span style="text-align: center;font-size: x-small;font-family: serif;">Latitude: 35.359661</span><br /> <span style="text-align: center;font-size: x-small;font-family: serif;">Longitude: 138.731476</span><br /> <span style="text-align: center;font-size: x-small;font-family: serif;">Altitude: 3717.0m</span><br /> </div> </div> </attribute> </point> <point id="Photo-2"> <point> <CRS uuidref="JGD2000 / (L, B)"/> <position> <coordinate>138.734329 35.357491</coordinate> </position> </point> <name></name> <description>g0013867.jpg</description> … 省略 … </layer> </dataset> </GI> [/sourcecode]
Firefox, Opera でポップアップが上手く表示されない原因
電子国土WEBシステム側のJavascriptソースコード “webtis_limited.js” を覗いてみたところ、JSGIXMLデータの “attribute” 要素の中身を処理してポップアップウインドウのHTMLコンテンツを吐き出している部分 “LT_P.OpenJSGIPopUp” （2770行目あたり）があった．
この部分を”attribute” 要素のデータに対して余計な処理をさせないようにすることで、FirefoxやOperaでもポップアップウインドウ上でコンテンツがきちんと表示させるようにすることができた．
ガチガチにインラインスタイル化されている部分は外部CSSで制御できるようにして、ポップアップウインドウのデザインを自由に変更できるように書き換えた方が良いのだが、コンテンツを包含する”div” 要素に対して
[sourcecode language=”html”]
<div style="margin-top: 0px; margin-right: 0px; margin-bottom: 0px; margin-left: 0px; padding-top: 0px; padding-right: 0px; padding-bottom: 0px; padding-left: 0px; position: absolute; left: 14px; top: 14px; color: rgb(0, 0, 0); overflow-x: hidden; overflow-y: hidden; width: 207px; height: 226px; ">
</div>
[/sourcecode]
のように指定されてしまっているので、”div” 要素を外部CSSで制御するのができない．仕方がないので個々の要素毎に細かに指定するしか方法がなさそうだ．
この部分のソースコードにはサムネイル画像を埋め込むことができそうな記述が見られたが、指定の仕方が今イチ分かり難かったので、やはり自分で直接HTMLコードを埋め込んだ方が便利だろう．
[sourcecode language=”javascript”]
switch ( theKey )
{
case ‘thumbnailofimage’:
theThumbnail = theValue;
continue;
break;
case ‘urlofimage’:
theImageURL = theValue;
continue;
break;
}
theAttrList.push( [ theKey, theValue ] );
．．．途中省略
if ( ( x == 0 ) && ( theThumbnail != ” ) )
{
theAttr += ‘ \<tr\>\n’
+ ‘ \<td rowspan=\"’ + theMax + ‘\" ‘
+ ‘width=\"’ + theThumbnailSize + ‘\" align=\"left\" valign=\"top\" ‘
+ ‘style=\"width:’ + theThumbnailSize + ‘px;\"\>\n’;
if ( theImageURL != ” )
{
theHTML += ‘ \<a href=\"’ + theImageURL + ‘\" target=\"_blank\"\>’
+ ‘\<img src=\"’ + theThumbnail + ‘\" align=\"left\" ‘
+ ‘style=\"margin-right:’ + theThumbnailMargin + ‘px;\" ‘
+ ‘border=\"1\"\>\<\/a\>\n’;
}
else
{
theHTML += ‘ \<img src=\"’ + theThumbnail + ‘\" align=\"left\"’
+ ‘ style=\"margin-right:’ + theThumbnailMargin + ‘px;\"\>\n’;
}
theAttr += ‘ \</td\>\n’;
}
[/sourcecode]
