e8960054a9
git-svn-id: http://svn.openlayers.org/trunk/openlayers@12082 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
185 lines
7.2 KiB
HTML
185 lines
7.2 KiB
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</title>
|
|
<script src="../lib/OpenLayers.js?mobile"></script>
|
|
<link rel="stylesheet" href="style.mobile.css" type="text/css">
|
|
<link rel="stylesheet" href="http://dev.sencha.com/deploy/touch/resources/css/sencha-touch.css">
|
|
<script src="http://dev.sencha.com/deploy/touch/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>
|