misc/openlayers/examples/mobile-sencha.html


1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184

<!DOCTYPE html>
<html>
    <head>
        <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0"/>
        <meta name="apple-mobile-web-app-capable" content="yes"/>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8">
        <title>OpenLayers with Sencha Touch</title>
        <script src="../lib/OpenLayers.js?mobile"></script>
        <link rel="stylesheet" href="../theme/default/style.mobile.css" type="text/css">
        <link rel="stylesheet" href="http://cdn.sencha.io/touch/1.1.0/resources/css/sencha-touch.css">
        <script src="http://cdn.sencha.io/touch/1.1.0/sencha-touch.js"></script>
        <script src="mobile-sencha.js"></script>
        <script src="mobile-base.js"></script>
        <style>
            .searchList {
                min-height: 150px;
            }

            .close-btn {
                position: absolute;
                right: 10px;
                top: 10px;
            }

            img.minus {
                -webkit-mask-image: url(img/minus1.png);
            }

            img.layers {
                -webkit-mask-image: url(img/list.png);
            }

            .gx-layer-item {
                margin-left: 10px;
            }

            #map {
                width: 100%;
                height: 100%;
            }

            .olControlAttribution {
                font-size: 10px;
                bottom: 5px;
                right: 5px;
            }

            #title, #tags, #shortdesc {
                display: none;
            }
        </style>
        <script>

        var app = new Ext.Application({
            name: "ol",
            launch: function() {
                this.viewport = new Ext.Panel({
                    fullscreen: true,
                    dockedItems: [{
                        dock: "bottom",
                        xtype: "toolbar",
                        ui: "light",
                        layout: {
                            pack: "center"
                        },
                        items: [{
                            iconCls: "search",
                            iconMask: true,
                            handler: function() {
                                // this is the app
                                if (!app.searchFormPopupPanel) {
                                    app.searchFormPopupPanel = new App.SearchFormPopupPanel({
                                        map: map
                                    });
                                }
                                app.searchFormPopupPanel.show('pop');
                            }
                        }, {
                            iconCls: "locate",
                            iconMask: true,
                            handler: function() {
                                var geolocate = map.getControlsBy("id", "locate-control")[0];
                                if (geolocate.active) {
                                    geolocate.getCurrentLocation();
                                } else {
                                    geolocate.activate();
                                }
                            }
                        }, {
                            xtype: "spacer"
                        }, {
                            iconMask: true,
                            iconCls: "add",
                            handler: function() {
                                map.zoomIn();
                            }
                        }, {
                            iconMask: true,
                            iconCls: "minus",
                            handler: function() {
                                map.zoomOut();
                            }
                        }, {
                            xtype: "spacer"
                        }, {
                            iconMask: true,
                            iconCls: "layers",
                            handler: function() {
                                if (!app.popup) {
                                    app.popup = new Ext.Panel({
                                        floating: true,
                                        modal: true,
                                        centered: true,
                                        hideOnMaskTap: true,
                                        width: 240,
                                        items: [{
                                            xtype: 'app_layerlist',
                                            map: map
                                        }],
                                        scroll: 'vertical'
                                    });
                                }
                                app.popup.show('pop');
                            }
                        }]
                    }],
                    items: [
                        {
                            xtype: "component",
                            scroll: false,
                            monitorResize: true,
                            id: "map",
                            listeners: {
                                render: function() {
                                    var self = this;
                                    init(function(feature) {
                                        var htmlContent = "";
                                        for (var property in feature.data) {
                                            if (feature.data[property] != 'undefined') {
                                                htmlContent = htmlContent + feature.data[property] + "<br>";
                                            }
                                        }
                                        if (self.featurePopup) {
                                            self.featurePopup.destroy();
                                        }
                                        self.featurePopup = new Ext.Panel({
                                            floating: true,
                                            modal: true,
                                            centered: true,
                                            hideOnMaskTap: true,
                                            width: 240,
                                            html: htmlContent,
                                            scroll: 'vertical'
                                        });
                                        self.featurePopup.show();
                                    })
                                },
                                resize: function() {
                                    if (window.map) {
                                        map.updateSize();
                                    }
                                },
                                scope: {
                                    featurePopup: null
                                }
                            }
                        }
                    ]
                });
            }
        });
        </script>
    </head>
    <body>
        <h1 id="title">OpenLayers with Sencha Touch</h1>

        <div id="tags">
            mobile, sencha touch
        </div>
        <p id="shortdesc">
            Using Sencha Touch to display an OpenLayers map.
        </p>
    </body>
</html>