[OpenLayers-Commits] r11339 - in
sandbox/bartvde/sencha/openlayers/examples: . img
commits-20090109 at openlayers.org
commits-20090109 at openlayers.org
Wed Feb 23 10:53:53 EST 2011
Author: bartvde
Date: 2011-02-23 07:53:52 -0800 (Wed, 23 Feb 2011)
New Revision: 11339
Added:
sandbox/bartvde/sencha/openlayers/examples/img/check-round-green.png
sandbox/bartvde/sencha/openlayers/examples/img/check-round-grey.png
sandbox/bartvde/sencha/openlayers/examples/img/check-square-green.png
sandbox/bartvde/sencha/openlayers/examples/img/check-square-grey.png
sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.js
Modified:
sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.html
sandbox/bartvde/sencha/openlayers/examples/mobile.js
Log:
more work on Sencha example, now has layer switcher
Added: sandbox/bartvde/sencha/openlayers/examples/img/check-round-green.png
===================================================================
(Binary files differ)
Property changes on: sandbox/bartvde/sencha/openlayers/examples/img/check-round-green.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: sandbox/bartvde/sencha/openlayers/examples/img/check-round-grey.png
===================================================================
(Binary files differ)
Property changes on: sandbox/bartvde/sencha/openlayers/examples/img/check-round-grey.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: sandbox/bartvde/sencha/openlayers/examples/img/check-square-green.png
===================================================================
(Binary files differ)
Property changes on: sandbox/bartvde/sencha/openlayers/examples/img/check-square-green.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Added: sandbox/bartvde/sencha/openlayers/examples/img/check-square-grey.png
===================================================================
(Binary files differ)
Property changes on: sandbox/bartvde/sencha/openlayers/examples/img/check-square-grey.png
___________________________________________________________________
Added: svn:mime-type
+ application/octet-stream
Modified: sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.html
===================================================================
--- sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.html 2011-02-23 15:50:48 UTC (rev 11338)
+++ sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.html 2011-02-23 15:53:52 UTC (rev 11339)
@@ -6,9 +6,12 @@
<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="http://maps.google.com/maps/api/js?v=3.3&sensor=false"></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">
+ <link rel="stylesheet" href="../theme/default/google.css" type="text/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>
#map {
@@ -26,99 +29,123 @@
</style>
<script>
- new Ext.Application({
+ var app = new Ext.Application({
name: "ol",
+ getStore: function() {
+ Ext.regModel('Layer', {
+ fields: ['id', 'name', 'visibility', 'zindex', 'cls']
+ });
+
+ var data = [];
+ Ext.each(map.layers, function(layer) {
+ if (layer.displayInLayerSwitcher === true) {
+ var visibility, cls;
+ if (layer.isBaseLayer === true) {
+ cls = 'baselayer';
+ visibility = (map.baseLayer == layer) && layer.getVisibility();
+ } else {
+ cls = 'overlay';
+ visibility = layer.getVisibility();
+ }
+ data.push({id: layer.id, name: layer.name, cls: cls, visibility: visibility, zindex: layer.getZIndex()});
+ }
+ });
+ return new Ext.data.Store({
+ model: 'Layer',
+ sorters: 'zindex',
+ data: data
+ });
+ },
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",
- handler: function() {
- pan(-0.25, 0);
- }
+ xtype: "segmentedbutton",
+ items: [{
+ iconCls: "search",
+ iconMask: true,
+ id: "search"
+ }, {
+ iconCls: "locate",
+ iconMask: true,
+ id: "locate",
+ handler: function() {
+ var geolocate = map.getControlsByClass('OpenLayers.Control.Geolocate')[0];
+ if (geolocate.active) {
+ geolocate.getCurrentLocation();
+ } else {
+ geolocate.activate();
+ }
+ },
+ scope: app
+ }]
}, {
- iconCls: "arrow_up",
- handler: function() {
- pan(0, -0.25);
- }
+ xtype: "spacer"
}, {
- iconCls: "arrow_down",
- handler: function() {
- pan(0, 0.25);
- }
- }, {
- iconCls: "arrow_right",
- handler: function() {
- pan(0.25, 0);
- }
- }]
- }, {
- dock: "bottom",
- xtype: "toolbar",
- ui: "light",
- layout: {
- pack: "center"
- },
- items: [{
xtype: "segmentedbutton",
items: [{
- text: "navigate",
- pressed: true
+ iconMask: true,
+ iconCls: "add",
+ id: 'zoomin',
+ handler: function() {
+ map.zoomIn();
+ }
}, {
- 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();
+ iconMask: true,
+ iconCls: "add",
+ id: 'zoomout',
+ handler: function() {
+ map.zoomOut();
+ }
+ }]
+ }, {
+ xtype: "spacer"
+ }, {
+ text: "Layers",
+ handler: function() {
+ var store = this.getStore();
+ if (!this.popup) {
+ this.popup = new Ext.Panel({
+ floating: true,
+ modal: true,
+ centered: true,
+ hideOnMaskTap: true,
+ width: 200,
+ items: [{
+ xtype: 'gx_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();
- }
- }
}
- }
+ this.popup.show('pop');
+ },
+ scope: app
}]
}],
- 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: sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.js
===================================================================
--- sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.js (rev 0)
+++ sandbox/bartvde/sencha/openlayers/examples/mobile-sencha.js 2011-02-23 15:53:52 UTC (rev 11339)
@@ -0,0 +1,80 @@
+Ext.ns('GeoExt');
+
+GeoExt.LayerList = Ext.extend(Ext.List, {
+
+ map: null,
+
+ createStore: function() {
+ Ext.regModel('Layer', {
+ fields: ['id', 'name', 'visibility', 'zindex', 'cls']
+ });
+ var data = [];
+ Ext.each(this.map.layers, function(layer) {
+ if (layer.displayInLayerSwitcher === true) {
+ var visibility, cls;
+ if (layer.isBaseLayer === true) {
+ cls = 'baselayer';
+ visibility = (map.baseLayer == layer) && layer.getVisibility();
+ } else {
+ cls = 'overlay';
+ visibility = layer.getVisibility();
+ }
+ data.push({id: layer.id, name: layer.name, cls: cls, 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('<span class="{cls}">',
+ '<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>',
+ '{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
+ });
+ GeoExt.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('gx_layerlist', GeoExt.LayerList);
Modified: sandbox/bartvde/sencha/openlayers/examples/mobile.js
===================================================================
--- sandbox/bartvde/sencha/openlayers/examples/mobile.js 2011-02-23 15:50:48 UTC (rev 11338)
+++ sandbox/bartvde/sencha/openlayers/examples/mobile.js 2011-02-23 15:53:52 UTC (rev 11339)
@@ -6,11 +6,23 @@
function init() {
// layer for drawn features
- var vector = new OpenLayers.Layer.Vector();
+ var styleMap = new OpenLayers.StyleMap({
+ graphicName: "star",
+ fillColor: "yellow",
+ strokeColor: "orange",
+ pointRadius: 10
+ });
+ var vector = new OpenLayers.Layer.Vector("Features", {styleMap: styleMap});
+ var point = new OpenLayers.Geometry.Point(6.6667, 46.6333);
+ point.transform(new OpenLayers.Projection("EPSG:4326"), new OpenLayers.Projection("EPSG:900913"));
+ var pointFeature = new OpenLayers.Feature.Vector(point,null);
+ vector.addFeatures([pointFeature]);
+
// create map
map = new OpenLayers.Map({
div: "map",
+ theme: null,
projection: sm,
units: "m",
numZoomLevels: 18,
@@ -19,28 +31,42 @@
-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.Geolocate({
+ geolocationOptions: {
+ enableHighAccuracy: false,
+ maximumAge: 0,
+ timeout: 7000
+ }
+ })
+ ],
+ layers: [new OpenLayers.Layer.OSM(),
+ new OpenLayers.Layer.Google(
+ "Google Physical",
+ {type: google.maps.MapTypeId.TERRAIN}
),
- new OpenLayers.Control.DrawFeature(
- vector, OpenLayers.Handler.Path, {id: "line-control"}
+ new OpenLayers.Layer.Google(
+ "Google Streets", // the default
+ {numZoomLevels: 20}
),
- new OpenLayers.Control.DrawFeature(
- vector, OpenLayers.Handler.Polygon, {id: "poly-control"}
+ new OpenLayers.Layer.Google(
+ "Google Hybrid",
+ {type: google.maps.MapTypeId.HYBRID, numZoomLevels: 20}
),
- new OpenLayers.Control.ModifyFeature(vector, {id: "mod-control"}),
- new OpenLayers.Control.ZoomPanel()
+ new OpenLayers.Layer.Google(
+ "Google Satellite",
+ {type: google.maps.MapTypeId.SATELLITE, numZoomLevels: 22}
+ ),
+ vector
],
- layers: [new OpenLayers.Layer.OSM(), vector],
center: new OpenLayers.LonLat(0, 0),
- zoom: 1
+ zoom: 5
});
// attempt to get position
More information about the Commits
mailing list