Enhancing the sencha touch example, p=mjansen,bartvde,fredj,pgiraud, (Closes #3101)
git-svn-id: http://svn.openlayers.org/trunk/openlayers@11483 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
pgiraud
@@ -12,6 +12,9 @@ OpenLayers/Layer/Bing.js
|
||||
OpenLayers/Control/TouchNavigation.js
|
||||
OpenLayers/Control/Geolocate.js
|
||||
OpenLayers/Control/ZoomPanel.js
|
||||
OpenLayers/Control/Attribution.js
|
||||
OpenLayers/Layer/Vector.js
|
||||
OpenLayers/Renderer/SVG.js
|
||||
|
||||
[exclude]
|
||||
|
||||
|
||||
BIN
examples/img/check-round-green.png
Normal file
BIN
examples/img/check-round-green.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 895 B |
BIN
examples/img/check-round-grey.png
Normal file
BIN
examples/img/check-round-grey.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 1.0 KiB |
BIN
examples/img/list.png
Normal file
BIN
examples/img/list.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 995 B |
BIN
examples/img/minus1.png
Normal file
BIN
examples/img/minus1.png
Normal file
Binary file not shown.
|
After Width: | Height: | Size: 261 B |
@@ -5,12 +5,30 @@
|
||||
<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"></script>
|
||||
<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.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%;
|
||||
@@ -25,45 +43,13 @@
|
||||
}
|
||||
</style>
|
||||
<script>
|
||||
|
||||
new Ext.Application({
|
||||
|
||||
var app = new Ext.Application({
|
||||
name: "ol",
|
||||
launch: function() {
|
||||
this.viewport = new Ext.Panel({
|
||||
fullscreen: true,
|
||||
dockedItems: [{
|
||||
dock: "top",
|
||||
xtype: "toolbar",
|
||||
ui: "light",
|
||||
layout: {
|
||||
pack: "center"
|
||||
},
|
||||
defaults: {
|
||||
ui: "plain",
|
||||
iconMask: true
|
||||
},
|
||||
items: [{
|
||||
iconCls: "arrow_left",
|
||||
handler: function() {
|
||||
pan(-0.25, 0);
|
||||
}
|
||||
}, {
|
||||
iconCls: "arrow_up",
|
||||
handler: function() {
|
||||
pan(0, -0.25);
|
||||
}
|
||||
}, {
|
||||
iconCls: "arrow_down",
|
||||
handler: function() {
|
||||
pan(0, 0.25);
|
||||
}
|
||||
}, {
|
||||
iconCls: "arrow_right",
|
||||
handler: function() {
|
||||
pan(0.25, 0);
|
||||
}
|
||||
}]
|
||||
}, {
|
||||
dock: "bottom",
|
||||
xtype: "toolbar",
|
||||
ui: "light",
|
||||
@@ -71,54 +57,82 @@
|
||||
pack: "center"
|
||||
},
|
||||
items: [{
|
||||
xtype: "segmentedbutton",
|
||||
items: [{
|
||||
text: "navigate",
|
||||
pressed: true
|
||||
}, {
|
||||
text: "point",
|
||||
id: "point"
|
||||
}, {
|
||||
text: "line",
|
||||
id: "line"
|
||||
}, {
|
||||
text: "poly",
|
||||
id: "poly"
|
||||
}, {
|
||||
text: "modify",
|
||||
id: "mod"
|
||||
}],
|
||||
listeners: {
|
||||
toggle: function(container, button, pressed) {
|
||||
Ext.each(map.getControlsByClass(/DrawFeature/), function(control) {
|
||||
control.deactivate();
|
||||
iconCls: "search",
|
||||
iconMask: true,
|
||||
handler: function(){
|
||||
// this is the app
|
||||
if (!app.searchFormPopupPanel) {
|
||||
app.searchFormPopupPanel = new App.SearchFormPopupPanel({
|
||||
map: map
|
||||
});
|
||||
map.getControlsBy("id", "mod-control")[0].deactivate();
|
||||
if (pressed) {
|
||||
var id = button.id + "-control";
|
||||
var control = map.getControlsBy("id", id)[0];
|
||||
if (control) {
|
||||
control.activate();
|
||||
}
|
||||
}
|
||||
}
|
||||
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: init,
|
||||
resize: function() {
|
||||
if (window.map) {
|
||||
map.updateSize();
|
||||
items: [
|
||||
{
|
||||
xtype: "component",
|
||||
scroll: false,
|
||||
monitorResize: true,
|
||||
id: "map",
|
||||
listeners: {
|
||||
render: init,
|
||||
resize: function() {
|
||||
if (window.map) {
|
||||
map.updateSize();
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
}]
|
||||
]
|
||||
});
|
||||
}
|
||||
});
|
||||
|
||||
198
examples/mobile-sencha.js
Normal file
198
examples/mobile-sencha.js
Normal file
@@ -0,0 +1,198 @@
|
||||
Ext.ns('App');
|
||||
|
||||
/**
|
||||
* The model for the geonames records used in the search
|
||||
*/
|
||||
Ext.regModel('Geonames', {
|
||||
fields: ['countryName', 'toponymName', 'name', 'lat', 'lng']
|
||||
});
|
||||
|
||||
/**
|
||||
* Custom class for the Search
|
||||
*/
|
||||
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);
|
||||
}
|
||||
});
|
||||
|
||||
App.LayerList = Ext.extend(Ext.List, {
|
||||
|
||||
map: null,
|
||||
|
||||
createStore: function(){
|
||||
Ext.regModel('Layer', {
|
||||
fields: ['id', 'name', 'visibility', 'zindex']
|
||||
});
|
||||
var data = [];
|
||||
Ext.each(this.map.layers, function(layer){
|
||||
if (layer.displayInLayerSwitcher === true) {
|
||||
var visibility = layer.isBaseLayer ? (this.map.baseLayer == layer) : layer.getVisibility();
|
||||
data.push({
|
||||
id: layer.id,
|
||||
name: layer.name,
|
||||
visibility: visibility,
|
||||
zindex: layer.getZIndex()
|
||||
});
|
||||
}
|
||||
});
|
||||
return new Ext.data.Store({
|
||||
model: 'Layer',
|
||||
sorters: 'zindex',
|
||||
data: data
|
||||
});
|
||||
},
|
||||
|
||||
initComponent: function(){
|
||||
this.store = this.createStore();
|
||||
this.itemTpl = new Ext.XTemplate(
|
||||
'<tpl if="visibility == true">',
|
||||
'<img width="20" src="img/check-round-green.png">',
|
||||
'</tpl>',
|
||||
'<tpl if="visibility == false">',
|
||||
'<img width="20" src="img/check-round-grey.png">',
|
||||
'</tpl>',
|
||||
'<span class="gx-layer-item">{name}</span>'
|
||||
);
|
||||
this.listeners = {
|
||||
itemtap: function(dataview, index, item, e){
|
||||
var record = dataview.getStore().getAt(index);
|
||||
var layer = this.map.getLayersBy("id", record.get("id"))[0];
|
||||
if (layer.isBaseLayer) {
|
||||
this.map.setBaseLayer(layer);
|
||||
}
|
||||
else {
|
||||
layer.setVisibility(!layer.getVisibility());
|
||||
}
|
||||
record.set("visibility", layer.getVisibility());
|
||||
}
|
||||
};
|
||||
this.map.events.on({
|
||||
"changelayer": this.onChangeLayer,
|
||||
scope: this
|
||||
});
|
||||
App.LayerList.superclass.initComponent.call(this);
|
||||
},
|
||||
|
||||
findLayerRecord: function(layer){
|
||||
var found;
|
||||
this.store.each(function(record){
|
||||
if (record.get("id") === layer.id) {
|
||||
found = record;
|
||||
}
|
||||
}, this);
|
||||
return found;
|
||||
},
|
||||
|
||||
onChangeLayer: function(evt){
|
||||
if (evt.property == "visibility") {
|
||||
var record = this.findLayerRecord(evt.layer);
|
||||
record.set("visibility", evt.layer.getVisibility());
|
||||
}
|
||||
}
|
||||
|
||||
});
|
||||
Ext.reg('app_layerlist', App.LayerList);
|
||||
@@ -1,16 +1,27 @@
|
||||
// API key for http://openlayers.org. Please get your own at
|
||||
// http://bingmapsportal.com/ and use that instead.
|
||||
var apiKey = "AqTGBsziZHIJYYxgivLBf0hVdrAk9mWO5cQcb8Yux8sW5M8c8opEC2lZqKR1ZZXf";
|
||||
|
||||
// initialize map when page ready
|
||||
var map;
|
||||
var gg = new OpenLayers.Projection("EPSG:4326");
|
||||
var sm = new OpenLayers.Projection("EPSG:900913");
|
||||
function init() {
|
||||
|
||||
// layer for drawn features
|
||||
var vector = new OpenLayers.Layer.Vector();
|
||||
var init = function () {
|
||||
|
||||
var vector = new OpenLayers.Layer.Vector("Vector Layer", {});
|
||||
|
||||
var geolocate = new OpenLayers.Control.Geolocate({
|
||||
id: 'locate-control',
|
||||
geolocationOptions: {
|
||||
enableHighAccuracy: false,
|
||||
maximumAge: 0,
|
||||
timeout: 7000
|
||||
}
|
||||
});
|
||||
// create map
|
||||
map = new OpenLayers.Map({
|
||||
div: "map",
|
||||
theme: null,
|
||||
projection: sm,
|
||||
units: "m",
|
||||
numZoomLevels: 18,
|
||||
@@ -19,59 +30,78 @@ function init() {
|
||||
-20037508.34, -20037508.34, 20037508.34, 20037508.34
|
||||
),
|
||||
controls: [
|
||||
new OpenLayers.Control.Attribution(),
|
||||
new OpenLayers.Control.TouchNavigation({
|
||||
dragPanOptions: {
|
||||
interval: 0, // non-zero kills performance on some mobile phones
|
||||
enableKinetic: true
|
||||
}
|
||||
}),
|
||||
new OpenLayers.Control.Attribution(),
|
||||
new OpenLayers.Control.DrawFeature(
|
||||
vector, OpenLayers.Handler.Point, {id: "point-control"}
|
||||
),
|
||||
new OpenLayers.Control.DrawFeature(
|
||||
vector, OpenLayers.Handler.Path, {id: "line-control"}
|
||||
),
|
||||
new OpenLayers.Control.DrawFeature(
|
||||
vector, OpenLayers.Handler.Polygon, {id: "poly-control"}
|
||||
),
|
||||
new OpenLayers.Control.ModifyFeature(vector, {id: "mod-control"}),
|
||||
new OpenLayers.Control.ZoomPanel()
|
||||
geolocate
|
||||
],
|
||||
layers: [new OpenLayers.Layer.OSM(), vector],
|
||||
center: new OpenLayers.LonLat(0, 0),
|
||||
zoom: 1
|
||||
layers: [
|
||||
new OpenLayers.Layer.OSM("OpenStreetMap", null, {
|
||||
transitionEffect: 'resize'
|
||||
}),
|
||||
new OpenLayers.Layer.Bing({
|
||||
key: apiKey,
|
||||
type: "Road",
|
||||
// custom metadata parameter to request the new map style - only useful
|
||||
// before May 1st, 2011
|
||||
metadataParams: {
|
||||
mapVersion: "v1"
|
||||
},
|
||||
name: "Bing Road",
|
||||
transitionEffect: 'resize'
|
||||
}),
|
||||
new OpenLayers.Layer.Bing({
|
||||
key: apiKey,
|
||||
type: "Aerial",
|
||||
name: "Bing Aerial",
|
||||
transitionEffect: 'resize'
|
||||
}),
|
||||
new OpenLayers.Layer.Bing({
|
||||
key: apiKey,
|
||||
type: "AerialWithLabels",
|
||||
name: "Bing Aerial + Labels",
|
||||
transitionEffect: 'resize'
|
||||
}),
|
||||
vector
|
||||
]
|
||||
});
|
||||
map.zoomToMaxExtent();
|
||||
|
||||
// attempt to get position
|
||||
if (window.navigator && navigator.geolocation) {
|
||||
navigator.geolocation.getCurrentPosition(
|
||||
updatePosition,
|
||||
function failure(error) {
|
||||
OpenLayers.Console.log(error.message);
|
||||
},
|
||||
{
|
||||
enableHighAccuracy: true
|
||||
}
|
||||
);
|
||||
}
|
||||
|
||||
var style = {
|
||||
fillOpacity: 0.1,
|
||||
fillColor: '#000',
|
||||
strokeColor: '#f00',
|
||||
strokeOpacity: 0.6
|
||||
};
|
||||
geolocate.events.register("locationupdated",this,function(e) {
|
||||
vector.removeAllFeatures();
|
||||
vector.addFeatures([
|
||||
new OpenLayers.Feature.Vector(
|
||||
e.point,
|
||||
{},
|
||||
{
|
||||
graphicName: 'cross',
|
||||
strokeColor: '#f00',
|
||||
strokeWidth: 2,
|
||||
fillOpacity: 0,
|
||||
pointRadius: 10
|
||||
}
|
||||
),
|
||||
new OpenLayers.Feature.Vector(
|
||||
OpenLayers.Geometry.Polygon.createRegularPolygon(
|
||||
new OpenLayers.Geometry.Point(e.point.x, e.point.y),
|
||||
e.position.coords.accuracy/2,
|
||||
50,
|
||||
0
|
||||
),
|
||||
{},
|
||||
style
|
||||
)
|
||||
]);
|
||||
map.zoomToExtent(vector.getDataExtent());
|
||||
});
|
||||
};
|
||||
|
||||
// get position if possible
|
||||
var position;
|
||||
function updatePosition(pos) {
|
||||
position = pos;
|
||||
var lon = position.coords.longitude;
|
||||
var lat = position.coords.latitude;
|
||||
OpenLayers.Console.log("position: lon " + lon + ", lat " + lat);
|
||||
map.setCenter(
|
||||
new OpenLayers.LonLat(lon, lat).transform(gg, sm)
|
||||
);
|
||||
}
|
||||
|
||||
function pan(fx, fy) {
|
||||
var size = map.getSize();
|
||||
map.pan(size.w * fx, size.h * fy);
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user