ExtJSを使ってGoogle Mapを表示してみる。
GeoExtのVersionが2に上がったと思って、exampleをポチポチと修正していたら、 なんとα版でしたとさ。
なんてこったい!!
と言うわけで、GeoExt1.1に戻っています。
GeoExtを動かすには、Javascript libraryのExtJSが必要になります。そうゆう仕様です。
ExtJSとは、ExtJSの開発元をみたり、ネットで調べください。ExtJSすばらしいですよね。これ一本あれば、何にもいらない。jQueryは軽い分、いろいろと拡張するにはpluginが必要ですけど。
ExtJSのexampleのwindowにgmapのサンプルがあるのですが、これGooglmaps API V2なので、ちょっとAPIをV3にして、それからちょこっと手を加えてみました。
元ネタは、Ext JSでGoogleマップを表示するチュートリアルで公開されている内容です。
開発環境は、Windows 7 32bit,Aptana Studio 3.4
Firefox 20.0とGoogle Chromeで確認しました。
必要なJavaScript
GeoExt1.1でも使うため、ExtJS3からversion3.4.1.1をdownloadして、適当なunzipします。 とりあえずDesktopでも大丈夫です。
くれぐれもExtJS4をdownloadしないように。
また、ExtJSの使い方は、
などなどを参考にしてくださいね。
な感じです。
Google Mapを表示してみる。
3パターンほど作成しみました。
ボタンをクリックしたらWindow表示
ボタンを押したら、Googlemapがmodal Windowが開くようにしてみます。
HTML5として宣言してます。
codeは、
必要なjsとcssを読み込んで、mapwin,gmapのオブジェクトを作成して、showするというごく簡単なものです。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Google map Sample</title> <link rel="stylesheet" href="ext-3.4.1/resources/css/ext-all.css" type="text/css" media="all"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&sensor=false"></script> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <script type="text/javascript"> Ext.BLANK_IMAGE_URL = "ext-3.4.1/resources/images/default/s.gif"; Ext.onReady(function(){ var gmap; var mapwin; var button = Ext.get('show-btn'); button.on('click', function(){ if(mapwin){ mapwin.show(); } else { mapwin = new Ext.Window({ title: 'Googleマップ ver 3の表示サンプル', closeAction: 'hide', width: 520, height: 480, layout: 'fit', items: { html : '<div id="map_canvas" style="width:100%;height:100%"></div>' } }); mapwin.show(); // Googleマップ ver 3の表示 var myPos = new google.maps.LatLng(35.4, 139.4); // 地図の中央座標 var opts = { zoom : 9, // ズームレベル center : myPos, // 地図の中央座標 mapTypeId : google.maps.MapTypeId.ROADMAP, // 地図の種類(通常の地図) mapTypeControl : true, // コントローラーは表示する scaleControl: true }; gmap = new google.maps.Map(Ext.getDom('map_canvas'), opts); } mapwin.show(); }) }) </script> </head> <body> <h1>Ext JS 3.4でGoogle Map</h1> <p>ボタンをクリックするとWindowが開いて、Google Mapを表示します。</p> <input type="button" id="show-btn" value="Google Map表示" /> </body> </html>
codeの中で、
Ext.BLANK_IMAGE_URL = "ext-3.4.1/resources/images/default/s.gif"
は、引用「Ext JSには1つ約束事があります。Ext JSでは、レイアウト位置を調整するために透明のGIFファイル(ブランク画像)を利用しています。デフォルトの状態ではこのGIF画像をExt JSのサーバーから読み込むため、表示速度が遅くなる場合があります。
そこで、Ext JS本体と同じサーバーから画像を読み込むように設定しましょう。画像ファイルのURLは、以下のように Ext.BLANK_IMAGE_URL で指定します。」だそうです。
な感じで、Google mapが表示されます。Good Job!!ですね。
windowのタイトルをドラッグすると、windowの位置を変えることができます。
いや~~、やっぱExtJSはええよ。
Firefoxで実行後に自動的にWindow表示(1)
実行後に自動的にGooglemapがmodal Windowが開くようにしてみます。
HTML5として宣言してます。
codeは、
必要なjsとcssを読み込んで、mapwin,gmapのオブジェクトを作成して、showするというごく簡単なものです。
おまけに、toolbarを定義して、Google Mapの表示方法を変えています。
toolbarの定義は、tbar : []の部分です。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="ext-3.4.1/resources/css/ext-all.css" type="text/css" media="all"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&sensor=false"></script> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <script type="text/javascript"> Ext.BLANK_IMAGE_URL = "ext-3.4.1/resources/images/default/s.gif"; var gmap; Ext.onReady(function(){ var mapwin = new Ext.Window({ title: 'Googleマップ ver 3の表示サンプル', width: 520, height: 480, layout: 'fit', items: { html : '<div id="map_canvas" style="width:100%;height:100%"></div>' }, tbar : [ { xtype : 'splitbutton', text : '地図の種類', menu : [ { text : '通常の地図', mapType : google.maps.MapTypeId.ROADMAP, handler : menuProc }, { text : '航空写真', mapType : google.maps.MapTypeId.SATELLITE, handler : menuProc }, { text : '通常+航空写真', mapType : google.maps.MapTypeId.HYBRID, handler : menuProc }, { text : '地形', mapType : google.maps.MapTypeId.TERRAIN, handler : menuProc } ] } ] }); mapwin.show(); // Googleマップ ver 3の表示 var myPos = new google.maps.LatLng(35.4, 139.4); // 地図の中央座標 var opts = { zoom : 9, // ズームレベル center : myPos, // 地図の中央座標 mapTypeId : google.maps.MapTypeId.ROADMAP, // 地図の種類(通常の地図) mapTypeControl : false, // コントローラーは表示しない scaleControl: true }; gmap = new google.maps.Map(Ext.getDom('map_canvas'), opts); }); function menuProc(obj){ //Ext.Msg.alert('形式', obj.mapType); gmap.setMapTypeId(obj.mapType); } </script> </head> <body> <h1>Google Map Window</h1> <p> ページが読み込まれるとウィンドウ内にメニューが表示されます。 </p> <br /> </body> </html>
な感じで、Google mapが表示されます。Good Job!!ですね。
windowのタイトルをドラッグすると、windowの位置を変えることができます。
codeを眺めていると何となく理解できるかと思います。
json形式で、パラメータを指定するので、私にとっては何となく理解できます。
Firefoxで実行後に自動的にWindow表示(2)
実行後に自動的にGooglemapがmodal Windowが開くようにしてみます。(1)ではtoolbarをtopにしましたが、bottomにも同じように設定義できます。
HTML5として宣言してます。
codeは、
必要なjsとcssを読み込んで、mapwin,gmapのオブジェクトを作成して、showするというごく簡単なものです。
おまけに、toolbarを定義して、Google Mapの表示方法を変えています。
toolbarのtopの定義は、tbar : []の部分です。
toolbarのbottomの定義は、bbar : []の部分です。
<!DOCTYPE HTML> <html lang="ja"> <head> <meta http-equiv="content-type" content="text/html;charset=utf-8"> <title>Sample</title> <link rel="stylesheet" href="ext-3.4.1/resources/css/ext-all.css" type="text/css" media="all"> <script type="text/javascript" src="http://maps.google.com/maps/api/js?v=3.9&sensor=false"></script> <script type="text/javascript" src="ext-3.4.1/adapter/ext/ext-base.js"></script> <script type="text/javascript" src="ext-3.4.1/ext-all.js"></script> <script type="text/javascript"> Ext.BLANK_IMAGE_URL = "ext-3.4.1/resources/images/default/s.gif"; Ext.onReady(function(){ var gmap; var mapwin; var button = Ext.get('show-btn'); button.on('click', function(){ if(mapwin){ mapwin.show(); } else { mapwin = new Ext.Window({ title: 'Googleマップ ver 3の表示サンプル', closeAction: 'hide', width: 520, height: 480, layout: 'fit', items: { html : '<div id="map_canvas" style="width:100%;height:100%"></div>' }, tbar : [ { xtype : 'splitbutton', text : '地図の種類', menu : [ { text : '通常の地図', mapType : google.maps.MapTypeId.ROADMAP, handler : menuProc }, { text : '航空写真', mapType : google.maps.MapTypeId.SATELLITE, handler : menuProc }, { text : '通常+航空写真', mapType : google.maps.MapTypeId.HYBRID, handler : menuProc }, { text : '地形', mapType : google.maps.MapTypeId.TERRAIN, handler : menuProc } ] } ], bbar : [ { xtype : 'tbbutton', text : 'ビューアーについて...', handler : aboutGMapViewer }, '-', { xtype : 'tbbutton', text : '地図の種類', menu : [ { text : '通常の地図', mapType : google.maps.MapTypeId.ROADMAP, handler : menuProc }, { text : '航空写真', mapType : google.maps.MapTypeId.SATELLITE, handler : menuProc }, { text : '通常+航空写真', mapType : google.maps.MapTypeId.HYBRID, handler : menuProc }, { text : '地形', mapType : google.maps.MapTypeId.TERRAIN, handler : menuProc } ] } ] }); mapwin.show(); // Googleマップ ver 3の表示 var myPos = new google.maps.LatLng(35.4, 139.4); // 地図の中央座標 var opts = { zoom : 9, // ズームレベル center : myPos, // 地図の中央座標 mapTypeId : google.maps.MapTypeId.ROADMAP, // 地図の種類(通常の地図) mapTypeControl : false, // コントローラーは表示しない scaleControl: true }; gmap = new google.maps.Map(Ext.getDom('map_canvas'), opts); } mapwin.show(); }); function menuProc(obj){ //Ext.Msg.alert('形式', obj.mapType); gmap.setMapTypeId(obj.mapType); } function aboutGMapViewer(){ Ext.Msg.alert('このソフトについて', 'Google Map API Version3を使ったMapViewです。<br>©2013 TYS.'); } }) </script> </head> <body> <h1>Ext JSウィンドウ</h1> <p>ボタンをクリックするとWindowが開いて、Google Mapを表示します。</p> <input type="button" id="show-btn" value="Google Map表示" /> </body> </html>
保存後、FireFoxで実行させて、ボタンをクリックすると、
な感じで、Google mapが表示されます。Good Job!!ですね。
windowのタイトルをドラッグすると、windowの位置を変えることができます。おまけにtoolbarも表示されています。
いや~~、やっぱExtJSはええよ。
ExtJSのサンプルは、解凍したfolderのexample内に入っていますので、いろいろと触ってみると良いですね。
次回はGeoExt
次回は、GeoExtのサンプルを使いながら、実際にWeb Mappingで使えるようなtutorialを始めます。
たぶん、10回くらいを予定しております。(may be…)
Web Mappingでハザードマップ、土石流氾濫計算のanime、震災や災害時の避難場所は避難経路などいろいろな情報を地図にOverlayしてWEBで公開できます。
Open Source 万歳!!
Comments are closed.