「Mobile Sencha（mobile-sencha.html）」を参考に、 Sencha Touch を使用して地図を表示します。
Sencha Touch は、HTML5 の仕様でモバイルアプリケーションを開発するための JavaScript のフレームワークです。
同じように「mobile_base.js」と「mobile_sencha.js」を開きます。
f 「mobile-sencha.html」の内容をコピーして「ol019e-nippon_bmi_takata_pgis.html」に貼り付け、修正します。
g 同じように、新規に「mobile-base_takata.js」と「mobile-sencha_takata.js」ファイルを作成し、「File Template」ウィンドウで「JavaScript Template」をクリックして選択し、「完了」ボタンをクリックして、「mobile-base.js」と「mobile-sencha.js」の内容をコピーして貼り付け、修正します。
次のアイコンは、OpenLayers ホームページの 「Release Examples (2.13.1)」からダウンロードしました。
mobile-loc.png
minus1.png
list.png
「ol019e-nippon_bmi_takata_pgis.html」でボタンの表示、「mobile-sencha_takata.js」でボタンが押されたときの動作、「mobile-base_takata.js」で地図の表示が設定されています。
「ol019e-nippon_bmi_takata_pgis.html」
<!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(R.Takata)</title>
<!-- 追加 --> <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js.js"></script> <script src="OpenLayers-2.13.1/lib/proj4js/lib/proj4js-combined.js"></script> <script src="OpenLayers-2.13.1/lib/proj4js/lib/defs/EPSG2452.js"></script> <!-- 追加ここまで -->
<!-- 修正 --> <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.css" type="text/css"> <link rel="stylesheet" href="OpenLayers-2.13.1/theme/default/style.mobile.css" type="text/css" /> <script type="text/javascript" src="OpenLayers-2.13.1/lib/OpenLayers.js?mobile"></script> <!-- 修正ここまで -->
<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_takata.js"></script> <script src="mobile-base_takata.js"></script> <!-- 修正ここまで -->
<style>
/* 「http://ws.geonames.org/searchJSON?'」 がサービス停止のため
.searchList {
min-height: 150px;
}
.close-btn {
position: absolute;
right: 10px;
top: 10px;
}
*/
img.minus {
-webkit-mask-image: url(OpenLayers-2.13.1/img/minus1.png); /* 修正 */
}
img.layers {
-webkit-mask-image: url(OpenLayers-2.13.1/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: [
/* 「http://ws.geonames.org/searchJSON?'」 がサービス停止のため検索できません
{
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();
}
}
}, {
---「mobile-base_takata.js」
---
/**
* Custom class for the Search
*/
/* 「http://ws.geonames.org/searchJSON?'」 がサービス停止のため検索できません
App.SearchFormPopupPanel = Ext.extend(Ext.Panel, {
map: null,
floating: true,
modal: true,
centered: true,
hideOnMaskTap: true,
width: Ext.is.Phone ? undefined : 400,
height: Ext.is.Phone ? undefined : 400,
scroll: false,
layout: 'fit',
fullscreen: Ext.is.Phone ? true : undefined,
url: 'http://ws.geonames.org/searchJSON?',
errorText: 'Sorry, we had problems communicating with geonames.org. Please try again.',
errorTitle: 'Communication error',
maxResults: 6,
featureClass: "P",
createStore: function(){
this.store = new Ext.data.Store({
model: 'Geonames',
proxy: {
type: 'scripttag',
timeout: 5000,
listeners: {
exception: function(){
this.hide();
Ext.Msg.alert(this.errorTitle, this.errorText, Ext.emptyFn);
},
scope: this
},
url: this.url,
reader: {
type: 'json',
root: 'geonames'
}
}
});
},
doSearch: function(searchfield, evt){
var q = searchfield.getValue();
this.store.load({
params: {
featureClass: this.featureClass,
maxRows: this.maxResults,
name_startsWith: encodeURIComponent(q)
}
});
},
//
onItemTap: function(dataView, index, item, event){
var record = this.store.getAt(index);
var lon = record.get('lng');
var lat = record.get('lat');
var lonlat = new OpenLayers.LonLat(lon, lat);
map.setCenter(lonlat.transform(gg, sm), 12);
this.hide("pop");
},
//
initComponent: function(){
this.createStore();
this.resultList = new Ext.List({
scroll: 'vertical',
cls: 'searchList',
loadingText: "Searching ...",
store: this.store,
itemTpl: '<div>{name} ({countryName})</div>',
listeners: {
itemtap: this.onItemTap,
scope: this
}
});
this.formContainer = new Ext.form.FormPanel({
scroll: false,
items: [{
xtype: 'button',
cls: 'close-btn',
ui: 'decline-small',
text: 'Close',
handler: function(){
this.hide();
},
scope: this
}, {
xtype: 'fieldset',
scroll: false,
title: 'Search for a place',
items: [{
xtype: 'searchfield',
label: 'Search',
placeHolder: 'placename',
listeners: {
action: this.doSearch,
scope: this
}
},
this.resultList
]
}]
});
this.items = [{
xtype: 'panel',
layout: 'fit',
items: [this.formContainer]
}];
App.SearchFormPopupPanel.superclass.initComponent.call(this);
}
});
*/
---
0 件のコメント:
コメントを投稿