[OpenLayers-Commits] r11483 - in trunk/openlayers: build examples
examples/img
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Fri Feb 25 07:12:22 EST 2011
Author: pgiraud
Date: 2011-02-25 04:12:20 -0800 (Fri, 25 Feb 2011)
New Revision: 11483
Added:
trunk/openlayers/examples/img/check-round-green.png
trunk/openlayers/examples/img/check-round-grey.png
trunk/openlayers/examples/img/list.png
trunk/openlayers/examples/img/minus1.png
trunk/openlayers/examples/mobile-sencha.js
Modified:
trunk/openlayers/build/mobile.cfg
trunk/openlayers/examples/mobile-sencha.html
trunk/openlayers/examples/mobile.js
Log:
Enhancing the sencha touch example, p=mjansen,bartvde,fredj,pgiraud, (Closes #3101)
Modified: trunk/openlayers/build/mobile.cfg
===================================================================
--- trunk/openlayers/build/mobile.cfg 2011-02-25 12:02:29 UTC (rev 11482)
+++ trunk/openlayers/build/mobile.cfg 2011-02-25 12:12:20 UTC (rev 11483)
@@ -12,6 +12,9 @@
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]
Added: trunk/openlayers/examples/img/check-round-green.png
===================================================================
(Binary files differ)
Property changes on: trunk/openlayers/examples/img/check-round-green.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: trunk/openlayers/examples/img/check-round-grey.png
===================================================================
(Binary files differ)
Property changes on: trunk/openlayers/examples/img/check-round-grey.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: trunk/openlayers/examples/img/list.png
===================================================================
(Binary files differ)
Property changes on: trunk/openlayers/examples/img/list.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: trunk/openlayers/examples/img/minus1.png
===================================================================
(Binary files differ)
Property changes on: trunk/openlayers/examples/img/minus1.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Modified: trunk/openlayers/examples/mobile-sencha.html
===================================================================
--- trunk/openlayers/examples/mobile-sencha.html 2011-02-25 12:02:29 UTC (rev 11482)
+++ trunk/openlayers/examples/mobile-sencha.html 2011-02-25 12:12:20 UTC (rev 11483)
@@ -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,100 +43,96 @@
}
</style>
<script>
-
- new Ext.Application({
+
+ var app = new Ext.Application({
name: "ol",
launch: function() {
this.viewport = new Ext.Panel({
fullscreen: true,
dockedItems: [{
- dock: "top",
+ dock: "bottom",
xtype: "toolbar",
ui: "light",
layout: {
pack: "center"
},
- defaults: {
- ui: "plain",
- iconMask: true
- },
items: [{
- iconCls: "arrow_left",
+ 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() {
- pan(-0.25, 0);
+ var geolocate = map.getControlsBy("id", "locate-control")[0];
+ if (geolocate.active) {
+ geolocate.getCurrentLocation();
+ } else {
+ geolocate.activate();
+ }
}
}, {
- iconCls: "arrow_up",
+ xtype: "spacer"
+ }, {
+ iconMask: true,
+ iconCls: "add",
handler: function() {
- pan(0, -0.25);
+ map.zoomIn();
}
}, {
- iconCls: "arrow_down",
+ iconMask: true,
+ iconCls: "minus",
handler: function() {
- pan(0, 0.25);
+ map.zoomOut();
}
}, {
- iconCls: "arrow_right",
+ xtype: "spacer"
+ }, {
+ iconMask: true,
+ iconCls: "layers",
handler: function() {
- pan(0.25, 0);
- }
- }]
- }, {
- dock: "bottom",
- xtype: "toolbar",
- ui: "light",
- layout: {
- 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();
+ 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'
});
- 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.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();
+ }
}
}
}
- }]
+ ]
});
}
});
Added: trunk/openlayers/examples/mobile-sencha.js
===================================================================
--- trunk/openlayers/examples/mobile-sencha.js (rev 0)
+++ trunk/openlayers/examples/mobile-sencha.js 2011-02-25 12:12:20 UTC (rev 11483)
@@ -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);
Modified: trunk/openlayers/examples/mobile.js
===================================================================
--- trunk/openlayers/examples/mobile.js 2011-02-25 12:02:29 UTC (rev 11482)
+++ trunk/openlayers/examples/mobile.js 2011-02-25 12:12:20 UTC (rev 11483)
@@ -1,3 +1,6 @@
+// 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;
@@ -3,12 +6,20 @@
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",
@@ -19,59 +30,78 @@
-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);
-}
-
More information about the Commits
mailing list