Category Archives: mobile

GeoExt mobileをちょこっと試してみた。

Posted by on 05/21/2013 コメントは受け付けていません。

GeoExtをMobile環境で使う

ネットでいろいろと探していると、本当にいろんなものがあります。
こんなことできたら良いなぁ？とか、こんなアイディアはどうだろう？なんて事を　googleで調べてみると、
サービスとして提供されていたり、開発中だったりというのが、ほとんどです。

このGeoExtもmobileでは動かせるのかな？と調べたところ、ありましたね。

  1. GeoExt mobile (GXM)
  2. GeoExt Mobile GXM

などに詳しくGXMもことが書かれています。
先人に感謝します。
jQuery使わなくても、ExtJSとGXMでmobile application開発できます。

ま、Openlayers-2.12のexamplesにもjquery mobileのexampleも出ているくらいですからね。

GXMってどんなもの？

開発環境をセットアップしただけなので、使いこなしていないので、さわりだけをちょこっと。

GXMは、

  • Sencha Touch
  • OpenLayers 2.11以上

で書かれたmobileで動く GeoExt JavaScript libraryです。

GeoExtと同様の使い方ができるようですが、まだversion 0.1で0.2開発中とのことで、これから本腰を入れて開発が進んでいくのでしょう。

サンプルですが、firefoxではうまく表示されないようですね。
サンプルみるときは、Google chromeを使ってくださいね。

  • A component that wraps an OpenLayers Map and acts as a Map component.

Online example

  • A button component that can be used to control OpenLayers controls.

Online example

  • A list component that can be used to show a list of OpenLayers Layer objects.

Online example

  • A list component that can be used to show a list of OpenLayers features objects.

Online example

  • A popup component that can be used to show details about an OpenLayers features.

Online example

  • A renderer that can be used to generated embedable components of the visual appearance of OpenLayers Features.

Online example

  • A layerstore that wraps around instances of OpenLayers layers
  • A model that maps OpenLayers layer instances to be used inside of stores

などなど、examplesがあります。

ちょこっと中身を見てみる

使い方は、GeoExt2と同じように使えるみたいですので、ちょいとサンプルをみてみましょう。
GeoExt1.1とは、使い方が大きく変わります。

では、exampleのmap.htmlを

<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
 
        <title>GXM: Examples of the GXM.Map-class</title>
 
        <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
        <meta name="apple-mobile-web-app-capable" content="yes">
 
        <!-- The CSS of Sencha Touch and GXM -->
        <link rel="stylesheet" href="http://cdn.sencha.io/touch/sencha-touch-2.0.1/resources/css/sencha-touch.css" type="text/css">
        <link rel="stylesheet" href="http://openlayers.org/api/2.11/theme/default/style.tidy.css" type="text/css">
        <link rel="stylesheet" href="../resources/css/gxm.css" type="text/css">
        <link rel="stylesheet" href="./examples.css" type="text/css">
 
        <!-- Load Sencha Touch -->
        <script type="text/javascript" src="http://cdn.sencha.io/touch/sencha-touch-2.0.1/sencha-touch-all.js"></script>
        <!-- Load OpenLayers -->
        <!-- You should definitely consider using a custom single-file version of OpenLayers -->
        <script type="text/javascript" src="http://openlayers.org/api/2.11/OpenLayers.js"></script>
 
        <!-- This file loads all relevant files -->
        <script type="text/javascript" src="../src/GXM.loader.js"></script>
        <script type="text/javascript" src="./example-utility.js"></script>
        <script type="text/javascript" src="./map.js"></script>
    </head>
    <body>
    </body>
</html>

な感じで、senchaとOpenLayersとGXMを読み込みます。
sourceはGXM・GitHubから入手してくださいね。

次に、map.jsを見てみましょう。

Ext.require([
    'GXM.Map'
]);
 
Ext.setup({
    viewport : {
        autoMaximize : true
    },
    onReady : function() {
        // OpenLayers specific setup
        var map = new OpenLayers.Map({
            controls : [
                new OpenLayers.Control.TouchNavigation({
                    dragPanOptions : {
                        interval : 100,
                        enableKinetic : true
                    }
                }),
                new OpenLayers.Control.Attribution(),
                new OpenLayers.Control.Navigation()
            ]
        });
 
        var layerOwsOsmTerrestris = new OpenLayers.Layer.WMS('terrestris', 'http://ows.terrestris.de/osm-basemap/service', {
            layers : 'OSM-WMS-Deutschland'
        }, {
            singleTile : false,
            attribution : '&copy; terrestris GmbH &amp; Co. KG<br>Data &copy; OpenStreetMap contributors, CC-BY-SA'
        });
 
        map.addLayers([layerOwsOsmTerrestris]);
 
        // Helper method to get a tab card by index
        var getCard = function(idx) {
            var card;
            // Case GXM.Map with OpenLayers.Map
            if(idx === 0) {
                card = {
                    xtype : 'gxm_map',
                    // A reference to an OpenLayers.Map
                    map : map,
                    mapCenter : [10.15,51.34],
                    mapZoom: 6,
                    title : 'Map',
                    sourceCode: example.utility.getExampleCode('mappanel-simple')
                };
            // Case GXM.Map with OpenLayers.Layer
            } else if(idx === 1) {
                card = {
                    xtype : 'gxm_map',
                    // A reference to an OpenLayers.Layer
                    layers : [layerOwsOsmTerrestris.clone()],
                    mapCenter : [10.15,51.34],
                    mapZoom: 6,
                    controls: [
                        new OpenLayers.Control.TouchNavigation({
                            dragPanOptions : {
                                interval : 100,
                                enableKinetic : true
                            }
                        }),
                        new OpenLayers.Control.Attribution(),
                        new OpenLayers.Control.Navigation()
                    ],
                    title : '&hellip; layers',
                    sourceCode: example.utility.getExampleCode('mappanel-layers')
                };
            // Case GXM.Map with OpenLayers.Map and mapCenter and mapZoom
            } else if(idx === 2) {
                card = {
                    xtype: 'gxm_map',
                    layers : [layerOwsOsmTerrestris.clone()],
                    // Pass as array, as string or OpenLayers.LonLat-instance
                    mapCenter : [7.1, 50.74],
                    // Pass as an integer
                    mapZoom: 12,
                    controls: [
                        new OpenLayers.Control.TouchNavigation({
                            dragPanOptions : {
                                interval : 100,
                                enableKinetic : true
                            }
                        }),
                        new OpenLayers.Control.Attribution(),
                        new OpenLayers.Control.Navigation()
                    ],
                    title : '&hellip; center',
                    sourceCode: example.utility.getExampleCode('mappanel-center')
                };
            // Case GXM.Map with OpenLayers.Map and mapExtent
            } else if(idx === 3) {
                card = {
                    xtype : 'gxm_map',
                    layers : [layerOwsOsmTerrestris.clone()],
                    // Pass as array, as string or OpenLayers.Bounds-instance
                    mapExtent : '7,51,8,52',
                    controls: [
                        new OpenLayers.Control.TouchNavigation({
                            dragPanOptions : {
                                interval : 100,
                                enableKinetic : true
                            }
                        }),
                        new OpenLayers.Control.Attribution(),
                        new OpenLayers.Control.Navigation()
                    ],
                    title : '&hellip; extent',
                    sourceCode: example.utility.getExampleCode('mappanel-extent')
                };
            }
            return card;
        };
 
        // Create viewport and also add a button showing a snipped of sourcecode in a
        // floating Ext.Panel. See example-utility.js for the shown code.
        var viewport = Ext.create('Ext.TabPanel', {
            fullscreen : true,
            ui : 'dark',
            tabBar : {
                docked : 'top',
                layout : {
                    pack : 'center'
                }
            },
            items : [getCard(0), getCard(1), getCard(2), getCard(3), {
                xtype : 'toolbar',
                ui : 'dark',
                items : [
                    {xtype : 'spacer'},
                    {
                        xtype : 'button',
                        text : 'Source',
                        handler : function() {
                            Ext.create('Ext.Panel', {
                                fullscreen: false,
                                draggable : false,
                                modal : true,
                                height: '40%',
                                width: '40%',
                                centered : false,
                                styleHtmlContent : true,
                                scrollable : true,
                                hideOnMaskTap: true,
                                html : viewport.getActiveItem().config.sourceCode
                            }).showBy(this);
                        }
                }],
                docked : 'bottom'
            }]
        });
    }
});

まずは、

Ext.require([
    'GXM.Map'
]);

で、GXMのcoreのであるGXM.Mapを読み込みます。

次に、

Ext.setup({
    viewport : {
        autoMaximize : true
    },
    onReady : function() {....
     ....
     ....
}

な感じで、viewportを設定して、onReadt : function()….でpanelに描画します。
xtype : 'gxm_map'がGXMで定義されているmapのtypeになるようです。

なんとなく、読み込むべきscriptなどは違いますが、GeoExt1.1と使用方法は違わないようですね。

tabやpanelやtoolbarについては、sourceを見て検討してください。

chromeで実行してみると。
gxmを使ったmapのexample
な感じで表示されます。

mapのwmsの部分を電子国土やOpenStreetMapに置き換えれば、なんとなくアプリを作れそうですね。

でどうよ？

GeoExt2をそのまま使えそうなので、良いのではないでしょうか？
GeoExt2のコードを若干修正すれば、十分mobile環境で活用できますよね。HTML5+JavaScriptでnative applicationの開発もだきるか、今後検証してみます。

いや～～、似たようなこと考えた人いるんですよね。

OpenLayer 3も出たしなぁ～。　α版なので、まだまだですが、興味を引く機能が追加されているんですよね。
Openlayer 3 examplesを見てくださいね。

いろいろなものがあって悩みますな。

1 / 11

Social Widgets powered by AB-WebLog.com.