From 99f0376c8ff153b2e698443ddd2edae20afed053 Mon Sep 17 00:00:00 2001
From: pgiraud <pierre.giraud@camptocamp.com>
Date: Fri, 25 Feb 2011 12:12:20 +0000
Subject: [PATCH] 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
---
 build/mobile.cfg                   |   3 +
 examples/img/check-round-green.png | Bin 0 -> 895 bytes
 examples/img/check-round-grey.png  | Bin 0 -> 1057 bytes
 examples/img/list.png              | Bin 0 -> 995 bytes
 examples/img/minus1.png            | Bin 0 -> 261 bytes
 examples/mobile-sencha.html        | 146 +++++++++++----------
 examples/mobile-sencha.js          | 198 +++++++++++++++++++++++++++++
 examples/mobile.js                 | 130 +++++++++++--------
 8 files changed, 361 insertions(+), 116 deletions(-)
 create mode 100644 examples/img/check-round-green.png
 create mode 100644 examples/img/check-round-grey.png
 create mode 100644 examples/img/list.png
 create mode 100644 examples/img/minus1.png
 create mode 100644 examples/mobile-sencha.js

diff --git a/build/mobile.cfg b/build/mobile.cfg
index 67b2ad2f84..546becd809 100644
--- a/build/mobile.cfg
+++ b/build/mobile.cfg
@@ -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]
 
diff --git a/examples/img/check-round-green.png b/examples/img/check-round-green.png
new file mode 100644
index 0000000000000000000000000000000000000000..176fed1161ae7b26e949b86375fb5ab1a45f0857
GIT binary patch
literal 895
zcmV-_1AzRAP)<h;3K|Lk000e1NJLTq000>P000>X1^@s6#OZ}&00004b3#c}2nYxW
zd<bNS00009a7bBm0005I0005I0XppC;s5{u8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H10{lrtK~zYIwboCFR%H~&@z1$4qJp>>3mHhNMX4JX4uja*0wEBg
zT?-8(Y7rEu2{LniXAFc1gd`FnL}(RlENG!Z3k$QsS-44C<YEMw(iT=UlH+Od+?lT9
zyyF|xSv~hY=ly-3^FHU#jm*@|q7$pI1G}&lgII?<xP>X4#f7YMwyRDzNQ}jc(kIx^
z^%Vcuw6HHn^L$T`=)@XK;LQaAF5!xBMY=9*l!h>b?X82H#DT2y_pXrW#8!NcXK^3L
z3>wQf@~>_o#Hm=}mQfr+KW^ZataIuSNE5-;2JnN*o*c=^ZsL!?#$(t6XRx^eZJCd#
zYWYnp0M;7%Hvq_yoV3;ut~ELn4@J^k@;TgBd7)Q8bfRC_DZPp{!fD~A2fjt0@KTQE
z`EbN4{HR>s(X4Z%N5C^Uhv%ACGx`nZ;hc_69K(A`(mY=&b+7@`295OuI2s#qu?3h_
z*_DTL8Vsm0)9CJ~ltP0`%Vkk3f-UA;#8b_y#GV|<%kw_@cHUFc9(GkqCBu~-00Z~}
zPqto<W}Tlc;XZ$_TPvki5RXEl6ARfFB5(#zw_HBWI*%@Wq6NrcrSu}w^@aW8u{t_&
z8oxv*_JT17@p4P%8v|Zn5&(U!HLG>~O0ydjHsU7u%{$oJI88(+ZsYxy#824W{P#=S
zoK4N@PNj5HO)t`{|7f{CfiKb5Jm16atn+qPK+za(R<|mpU84o5TweT}mL1GGuPzHH
zHV>Jqlz9N#<5a8wBfeJ(X|a8kb$<9b^*9kLmF^5@D_m#<H#FT;%EV%^8NAj*1pKOl
z^^NX@D(jpT_BGpwVmwNiYkh>TmBjc?WoOp;^JAkJk8Rjr9_-6HXWOm*V`Wg4F8pr(
z+0&`pfa9^+T~pYElUe6mJlyIJD05)5yQZ2G^$r-1Z7sl!Mz8EGGa2XbfdTb$^$;gw
zWpfAnl{D`@8C#&mGk!*Cc9X)SKG)3I)YQSSl11wq-^b7Rhc^Dtua!kn{U_gDe*=`!
VG<;8mX5Rn+002ovPDHLkV1iVLq0;~W

literal 0
HcmV?d00001

diff --git a/examples/img/check-round-grey.png b/examples/img/check-round-grey.png
new file mode 100644
index 0000000000000000000000000000000000000000..dc90efb998a828f50e19b2a404d5eb22b768854a
GIT binary patch
literal 1057
zcmV++1m63JP)<h;3K|Lk000e1NJLTq000>P000>X1^@s6#OZ}&00004b3#c}2nYxW
zd<bNS00009a7bBm0005I0005I0XppC;s5{u8FWQhbW?9;ba!ELWdL_~cP?peYja~^
zaAhuUa%Y?FJQ@H11D;7lK~zYIwU$3<8)p>2f8Tc(;)7^uT8f~i^-$t08GJRyoiw-w
zi<5+*qC<zIxI?>jXhNn0hZX|KR4C07LZDOC!Pe;yZVVNq#dVA{WT>5`9vm=klSwM4
zAnAJ@^eH(UOLm}r(|7OQz2AH9zVE$Hi3r1_R;!IQo6R|;R1TN|lE7);DX<4LL}VqA
zNUWt&srE2GY8a$gEPkN1z732IjpBvu8e<l-+3dYzK?;S!DbMq60G|&WD5cg#qz=>_
z$9dH2_09mkQpy*R*;pXAqA0qU&*xi1A*E7j3it__0J^~SWHNcp_x;YW6zcW*iM_qO
zE5K#I1$Kasf*@$T1hE-Bw16!UIiJa7Hb)jICSe#(E2ZuNXMvq4ip~u((gPz~q6uIt
ziX#72005axW;2Q+AJ_&atiKnT*q{6}&=ryQj|-^PYHq95ng>1sPKn4J$8jDTV}1i1
zW6X!yZ1$e6)oNpQ7Xe&9E?{|i`JGm)^#@P{J_g=1#ym);(;Fgk6F_TyyH=}>>1MMz
zM}K$hCX>l)#{m?J#WSw!-Ur^bs<zfTm&@gL0bJL;3hV>p&1Q2>+k=KuYJJo$iUH1P
zt?vVGS(S*$`E)wHF|e7RpMM6dTfaF?|0HA2!AMzMU42b!T?F2Usjp-*nI8|@Dy0Tx
zpVIVO1;9&?rKKeudsLlH=PvN}Kp`SO1VQliVFC4ey#XYt>GvWW$9Xg`C=?1_xm>>E
z`~Kfy7+wG<m&=!cAm-;+*L6QT3}6G;w#(Bl{brZ6t>Q6&=Xqa>$OW7BjW7(KD5buM
z`S=r9u(dx_lv0y+`Bc;IrT~7-=AYR5b){4YIQIFOF=inMf+xcO0FL8K+vT1H8kYPV
zqP5;Q>_aP;vf1pzQ2+oD89*9ZL{_YFwqCEF07$3P4}jf6zO4j7@a<86YPEV2n6-Xa
zbRv;hvku2?H?{BNptJo>r}ODi0Dx|{y9B%m>?RV4HJwVO+Qyhg`~GqmhSLD;cKbWv
z7y29HcVo=_!otE|M*%98%8XL#D*$86Vk(ttKX3J=Qt5m8gK8^^B0rzcN5_deE`>tD
z^E|HsOaixpAov1etv-sPi}VN1S<mwtl}csiRREPrWhMsLvHpP3ld&fvH(l4gI_f-B
ztJRa;Zg<I+$YIoEjHP^V#_t2`N~z6WueT{8+e)cP$8o0ZHl3yali@fsJ}&?3Z6z-M
b)xGOqMH9g)z-X;(00000NkvXXu0mjfXiMd4

literal 0
HcmV?d00001

diff --git a/examples/img/list.png b/examples/img/list.png
new file mode 100644
index 0000000000000000000000000000000000000000..f2142068299edb08ea36445dfd77794ea738f70f
GIT binary patch
literal 995
zcmV<9104K`P)<h;3K|Lk000e1NJLTq002Ay002A)1^@s6I{evk000B3Nkl<ZXa((>
zOK8+k6oxys4_{R)B0d&^F9a2f)RjwJDr$A%qacDPB6TB37X^``3qcTED7bSYu0#<n
zf(jy{i0HyDd=)H$P!KFytF(3e{?I#&Y3@vL3eCynz(+Fo+?$?1C%HMfX)d47*Hn|$
zR+Ct1%><`C<8>04!`L*ybZ}W8V}BS%xz8hSbcShs6IijKnsF`7M0^B3fyDiR*RTs3
z)h7yktuP20V}Ul}3^H`t6Yw|M4?}HQ1nctM14kjs=F)f;)<-!lwn^}5&^_$4g*e)M
zPHXKFyevl0Yhv^<(M5tsV?-LKPmIG%eHRISQYH+|zK_cEG2@ot3-A>rENsebFWd?{
ztp2X!adU?P;uHe9U;#9Op2NT34Rk_3_)G=L2t=JQ-<YXt&j*zjfBhOLliOhf48c?A
z;e@<n>oXM{4`2>Rc#=(5^FU4og)=g(>=rVNujFJ!|7rA}<;EM>4*w(AK)@A;s5DoV
zWrEY5?kvMuhEsM1s_v3@m6q1E>PhB&m;tIrzQZ8Jhqr=ajMl*xft3?C5C|r4m4=&O
zD=Y!k#&6*vzFtJDu8y*$G^!4t397%7Y+B^FqyY88a2~#ZGFyyZ9*#qUO3*O0w}Pcb
zyxqDK55OVNr5U!hG@O8SVTaM*c?muS%CgT^<JjqQT5Ff!RWX9rD`P55g1xhFk;30a
z`=)m#_*o1EFJkmD(M5tU!ut}@KF4>vgx{1)&*2`>41Eyvn9)g)>Dl`ju0W|}9^7Uu
z7p!<tTxeNmC2WMnpdz9VUczTzwZ%B~-3O|;EZEJ$5)Z+v64B>US6co=XvxWnAzIT?
zm8Ppg1xwQHM?rAXBb}`H-2FOP$4mTiGQo*YQH23!8LsdICVqI9;l!t?!T^IM9(N21
ziP`MCtdCH5=>N35HePs``j{37CUC7uZGm=}2dbL-Xupc+SM2+2IgWE+<#TDb%1PD1
zC!qtHLFJ-M3wa-*6Ye2=Lg~l}(aXkt(3LU4Pg~M#uL9Z+zJ)k_AN~L>(i?_$Ym0bo
zx?h!DU6N6zY_EVFQBI3(65J9aaJ@FB!rY8pPK<^7vz&&&FTtf|VRw)?eO%u}ZzcFl
znFzJsb-hd<Gj0jiW2GCSRyX=-?*h%#>9Fy~tE#1Ka2F(8|Cx6KHbZ^*apZpEGxu0>
zi+CzPRCQ@FPoGUSNvZIV_%Q@VPFfTm8q)+;Y$#jPvXZL*jZ>3WRaw;u{tJ~z`A2p%
RK`8(L002ovPDHLkV1iOY%xeGu

literal 0
HcmV?d00001

diff --git a/examples/img/minus1.png b/examples/img/minus1.png
new file mode 100644
index 0000000000000000000000000000000000000000..df446c7932baac60c5c362dda5a184a163fc2cfb
GIT binary patch
literal 261
zcmeAS@N?(olHy`uVBq!ia0vp^HXzKw1|+Ti+$;i8XFOdTLo!(3-ZJECF%WPLY}!$O
zxO0bStio2+?`8j{%{x`s!Sr@Uv7Ghab8}CvTPKny?k@3g6Klni(+*4d4jFkyHWWy%
zxZ)V0rpYa!$2`@F<FraD<Dt|ALFs=^>Sh*h;M#xm?~+?ud#;v8#YKJMnZn93z0pgy
zC3Vs!hKEK0E1Ng?1c@ocuxXVFO!GX|^!okhDW#iA+3KS={eB`}nfX-u7aPa#+E42_
eo)cu<=B#I($+`Q9ovuI7UkskEelF{r5}E*`higv&

literal 0
HcmV?d00001

diff --git a/examples/mobile-sencha.html b/examples/mobile-sencha.html
index 179af581f5..5d30383dd2 100644
--- a/examples/mobile-sencha.html
+++ b/examples/mobile-sencha.html
@@ -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",
-                            handler: function() {
-                                pan(-0.25, 0);
+                            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: "arrow_up",
+                            iconCls: "locate",
+                            iconMask: true,
                             handler: function() {
-                                pan(0, -0.25);
+                                var geolocate = map.getControlsBy("id", "locate-control")[0];
+                                if (geolocate.active) {
+                                    geolocate.getCurrentLocation();
+                                } else {
+                                    geolocate.activate();
+                                }
                             }
                         }, {
-                            iconCls: "arrow_down",
+                            xtype: "spacer"
+                        }, {
+                            iconMask: true,
+                            iconCls: "add",
                             handler: function() {
-                                pan(0, 0.25);
+                                map.zoomIn();
                             }
                         }, {
-                            iconCls: "arrow_right",
+                            iconMask: true,
+                            iconCls: "minus",
                             handler: function() {
-                                pan(0.25, 0);
+                                map.zoomOut();
                             }
-                        }]
-                    }, {
-                        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();
+                        }, {
+                            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'
                                     });
-                                    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();
+                                    }
                                 }
                             }
                         }
-                    }]
+                    ]
                 });
             }
         });
diff --git a/examples/mobile-sencha.js b/examples/mobile-sencha.js
new file mode 100644
index 0000000000..1b794559b5
--- /dev/null
+++ b/examples/mobile-sencha.js
@@ -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);
diff --git a/examples/mobile.js b/examples/mobile.js
index 243b5337a5..a21823e83c 100644
--- a/examples/mobile.js
+++ b/examples/mobile.js
@@ -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);
-}
-