app_main()とonloadの組み合わせ (canvas draw)
説明
電子国土のAPIでは地図を利用する準備が完了するとapp_main()が呼び出されますが、この時点ではページ上の全てのDOM（ドキュメントオブジェクト）が構築されておらず、DOM操作を行うとエラーになることがあります。また、canvasタグなどと組み合わせて処理を行う場合には注意が必要です。特にcanvasをサポートしていないIEではexcanvas.jsやuupaa-excavnas.jsなどを使ってcanvas処理をエミュレートしますが、書き方によってはいつまでたってもloadイベントが発生せず、ユーザーからのイベント(clickなど)による処理が行えなくなることがあります。
特に地図の表示はapp_main()内で行わないとIEでは延々と待たされる場合があります。
サンプル１ではIEでも他のブラウザでも正しく処理されキャンバスに四角が描画されます。これをloadイベントが発生してから地図とキャンバスの処理を行うようにした
サンプル２では、IE以外のブラウザではほぼ正しく処理されるのに対し、IEでは読み込み中のままになってしまうことがあります。SafariでもIE同様の現象が起こることもありますが、しばらく待てば処理は行ってくれます。
サンプルプログラム
●サンプル１（正しく動作する）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>電子国土（国土地理院）</title>
<!--[if IE]><script type="text/javascript" src="./excanvas.js"></script><![endif]-->
<script type="text/javascript"><!--
function app_main(){
document.getElementById("result").innerHTML += "<br>app_main()が呼び出されました。";
top.map.openMap("http://cyberjapan.jp/japan0.htm");
top.map.setMapCenter(137.95340448617935, 36.114983812119554, 20000);
top.map.openMap();
}
window.onload = function(){
document.getElementById("result").innerHTML += "<br>Load Event発生";
var canvasObj = document.getElementById("mycanvas");
var conObj = canvasObj.getContext("2d");
conObj.fillStyle = "rgba(255,0,60,1)";
conObj.fillRect(20,40,200,150);
document.getElementById("result").innerHTML += "<br>キャンバスに描画しました。";
}
// --></script>
</head>
<body>
<h1>キャンバスとの組み合わせテスト</h1>
<div id="result"></div>
<iframe name="map" src="./map.html" width="640" height="480"></iframe>
<canvas id="mycanvas" width="640" height="200"></canvas>
</body>
</html>
●サンプル２（IEで動作しない）
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=shift_jis">
<title>電子国土（国土地理院）</title>
<!--[if IE]><script type="text/javascript" src="./excanvas.js"></script><![endif]-->
<script type="text/javascript"><!--
function app_main(){
document.getElementById("result").innerHTML += "<br>app_main()が呼び出されました。";
}
window.onload = function(){
document.getElementById("result").innerHTML += "<br>Load Event発生";
top.map.openMap("http://cyberjapan.jp/japan0.htm");
top.map.setMapCenter(137.95340448617935, 36.114983812119554, 20000);
top.map.openMap();
document.getElementById("result").innerHTML += "<br>マップを表示しました。";
var canvasObj = document.getElementById("mycanvas");
var conObj = canvasObj.getContext("2d");
conObj.fillStyle = "rgba(255,0,60,1)";
conObj.fillRect(20,40,200,150);
document.getElementById("result").innerHTML += "<br>キャンバスに描画しました。";
}
// --></script>
</head>
<body>
<h1>キャンバスとの組み合わせテスト</h1>
<div id="result"></div>
<iframe name="map" src="./map.html" width="640" height="480"></iframe>
<canvas id="mycanvas" width="640" height="200"></canvas>
</body>
</html>