From 5084ea6a915cd81c38455c502104f5782fd93b85 Mon Sep 17 00:00:00 2001 From: euzuro Date: Thu, 4 Sep 2008 19:21:59 +0000 Subject: [PATCH] Add new ZoomPanel and PanPanel, a step towards a more easily customizable look for OpenLayers. Work on this ticket was done by a slew of contributors, and reviews as well. Thanks especially to tschaub for the ie6 trick and concomittant non-alpha images. (Closes #1400). git-svn-id: http://svn.openlayers.org/trunk/openlayers@7950 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf --- examples/pan-zoom-panels.html | 49 ++++++++++++++ lib/OpenLayers.js | 5 ++ lib/OpenLayers/Control/Pan.js | 76 ++++++++++++++++++++++ lib/OpenLayers/Control/PanPanel.js | 30 +++++++++ lib/OpenLayers/Control/ZoomIn.js | 26 ++++++++ lib/OpenLayers/Control/ZoomOut.js | 26 ++++++++ lib/OpenLayers/Control/ZoomPanel.js | 31 +++++++++ lib/OpenLayers/Control/ZoomToMaxExtent.js | 5 +- theme/default/ie6-style.css | 7 ++ theme/default/img/pan-panel-NOALPHA.png | Bin 0 -> 566 bytes theme/default/img/pan-panel.png | Bin 0 -> 1287 bytes theme/default/img/zoom-panel-NOALPHA.png | Bin 0 -> 1173 bytes theme/default/img/zoom-panel.png | Bin 0 -> 1624 bytes theme/default/style.css | 70 ++++++++++++++++++-- 14 files changed, 320 insertions(+), 5 deletions(-) create mode 100644 examples/pan-zoom-panels.html create mode 100644 lib/OpenLayers/Control/Pan.js create mode 100644 lib/OpenLayers/Control/PanPanel.js create mode 100644 lib/OpenLayers/Control/ZoomIn.js create mode 100644 lib/OpenLayers/Control/ZoomOut.js create mode 100644 lib/OpenLayers/Control/ZoomPanel.js create mode 100755 theme/default/ie6-style.css create mode 100755 theme/default/img/pan-panel-NOALPHA.png create mode 100755 theme/default/img/pan-panel.png create mode 100755 theme/default/img/zoom-panel-NOALPHA.png create mode 100755 theme/default/img/zoom-panel.png diff --git a/examples/pan-zoom-panels.html b/examples/pan-zoom-panels.html new file mode 100644 index 0000000000..8c1ec0d479 --- /dev/null +++ b/examples/pan-zoom-panels.html @@ -0,0 +1,49 @@ + + + Pan and Zoom Panels + + + + + + + + + +

Pan and Zoom Panels

+
+

Customizable pan and zoom panels

+

+
+

+ The pan and zoom panels allow you to use CSS styling to change the + look and feel of the panels, including changing their position + and their icons without needing to change any code. +

+ + diff --git a/lib/OpenLayers.js b/lib/OpenLayers.js index bb367488f9..d52ce17f7b 100644 --- a/lib/OpenLayers.js +++ b/lib/OpenLayers.js @@ -221,6 +221,11 @@ "OpenLayers/Layer/WFS.js", "OpenLayers/Control/MouseToolbar.js", "OpenLayers/Control/NavToolbar.js", + "OpenLayers/Control/PanPanel.js", + "OpenLayers/Control/Pan.js", + "OpenLayers/Control/ZoomIn.js", + "OpenLayers/Control/ZoomOut.js", + "OpenLayers/Control/ZoomPanel.js", "OpenLayers/Control/EditingToolbar.js", "OpenLayers/Lang.js", "OpenLayers/Lang/en.js" diff --git a/lib/OpenLayers/Control/Pan.js b/lib/OpenLayers/Control/Pan.js new file mode 100644 index 0000000000..f9dfdc06ef --- /dev/null +++ b/lib/OpenLayers/Control/Pan.js @@ -0,0 +1,76 @@ +/** + * @requires OpenLayers/Control.js + */ + +/** + * Class: OpenLayers.Control.Pan + */ +OpenLayers.Control.Pan = OpenLayers.Class(OpenLayers.Control, { + + /** + * APIProperty: slideFactor + * {Integer} Number of pixels by which we'll pan the map in any direction + * on clicking the arrow buttons. + */ + slideFactor: 50, + + /** + * Property: direction + * {String} in {'North', 'South', 'East', 'West'} + */ + direction: null, + + /** + * Property: type + * {String} The type of -- When added to a + * , 'type' is used by the panel to determine how to + * handle our events. + */ + type: OpenLayers.Control.TYPE_BUTTON, + + /** + * Constructor: OpenLayers.Control.Pan + * Control which handles the panning (in any of the cardinal directions) + * of the map by a set px distance. + * + * Parameters: + * direction - {String} The direction this button should pan. + * options - {Object} An optional object whose properties will be used + * to extend the control. + */ + initialize: function(direction, options) { + + this.direction = direction; + this.CLASS_NAME += this.direction; + + OpenLayers.Control.prototype.initialize.apply(this, [options]); + }, + + /** + * Method: trigger + */ + trigger: function(){ + + switch (this.direction) { + case OpenLayers.Control.Pan.NORTH: + this.map.pan(0, -this.slideFactor); + break; + case OpenLayers.Control.Pan.SOUTH: + this.map.pan(0, this.slideFactor); + break; + case OpenLayers.Control.Pan.WEST: + this.map.pan(-this.slideFactor, 0); + break; + case OpenLayers.Control.Pan.EAST: + this.map.pan(this.slideFactor, 0); + break; + } + }, + + CLASS_NAME: "OpenLayers.Control.Pan" +}); + +OpenLayers.Control.Pan.NORTH = "North"; +OpenLayers.Control.Pan.SOUTH = "South"; +OpenLayers.Control.Pan.EAST = "East"; +OpenLayers.Control.Pan.WEST = "West"; \ No newline at end of file diff --git a/lib/OpenLayers/Control/PanPanel.js b/lib/OpenLayers/Control/PanPanel.js new file mode 100644 index 0000000000..4a094d1cac --- /dev/null +++ b/lib/OpenLayers/Control/PanPanel.js @@ -0,0 +1,30 @@ +/** + * @requires OpenLayers/Control/Panel.js + * @requires OpenLayers/Control/Pan.js + */ + +/** + * Class: OpenLayers.Control.PanPanel + */ +OpenLayers.Control.PanPanel = OpenLayers.Class(OpenLayers.Control.Panel, { + + /** + * Constructor: OpenLayers.Control.PanPanel + * Add the four directional pan buttons. + * + * Parameters: + * options - {Object} An optional object whose properties will be used + * to extend the control. + */ + initialize: function(options) { + OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]); + this.addControls([ + new OpenLayers.Control.Pan(OpenLayers.Control.Pan.NORTH), + new OpenLayers.Control.Pan(OpenLayers.Control.Pan.SOUTH), + new OpenLayers.Control.Pan(OpenLayers.Control.Pan.EAST), + new OpenLayers.Control.Pan(OpenLayers.Control.Pan.WEST) + ]); + }, + + CLASS_NAME: "OpenLayers.Control.PanPanel" +}); diff --git a/lib/OpenLayers/Control/ZoomIn.js b/lib/OpenLayers/Control/ZoomIn.js new file mode 100644 index 0000000000..375e0d53c5 --- /dev/null +++ b/lib/OpenLayers/Control/ZoomIn.js @@ -0,0 +1,26 @@ +/** + * @requires OpenLayers/Control.js + */ + +/** + * Class: OpenLayers.Control.ZoomIn + */ +OpenLayers.Control.ZoomIn = OpenLayers.Class(OpenLayers.Control, { + + /** + * Property: type + * {String} The type of -- When added to a + * , 'type' is used by the panel to determine how to + * handle our events. + */ + type: OpenLayers.Control.TYPE_BUTTON, + + /** + * Method: trigger + */ + trigger: function(){ + this.map.zoomIn(); + }, + + CLASS_NAME: "OpenLayers.Control.ZoomIn" +}); \ No newline at end of file diff --git a/lib/OpenLayers/Control/ZoomOut.js b/lib/OpenLayers/Control/ZoomOut.js new file mode 100644 index 0000000000..16bf7c9c82 --- /dev/null +++ b/lib/OpenLayers/Control/ZoomOut.js @@ -0,0 +1,26 @@ +/** + * @requires OpenLayers/Control.js + */ + +/** + * Class: OpenLayers.Control.ZoomOut + */ +OpenLayers.Control.ZoomOut = OpenLayers.Class(OpenLayers.Control, { + + /** + * Property: type + * {String} The type of -- When added to a + * , 'type' is used by the panel to determine how to + * handle our events. + */ + type: OpenLayers.Control.TYPE_BUTTON, + + /** + * Method: trigger + */ + trigger: function(){ + this.map.zoomOut(); + }, + + CLASS_NAME: "OpenLayers.Control.ZoomOut" +}); \ No newline at end of file diff --git a/lib/OpenLayers/Control/ZoomPanel.js b/lib/OpenLayers/Control/ZoomPanel.js new file mode 100644 index 0000000000..27efa9d736 --- /dev/null +++ b/lib/OpenLayers/Control/ZoomPanel.js @@ -0,0 +1,31 @@ +/** + * @requires OpenLayers/Control/Panel.js + * @requires OpenLayers/Control/ZoomIn.js + * @requires OpenLayers/Control/ZoomOut.js + * @requires OpenLayers/Control/ZoomToMaxExtent.js + */ + +/** + * Class: OpenLayers.Control.ZoomPanel + */ +OpenLayers.Control.ZoomPanel = OpenLayers.Class(OpenLayers.Control.Panel, { + + /** + * Constructor: OpenLayers.Control.ZoomPanel + * Add the three zooming controls. + * + * Parameters: + * options - {Object} An optional object whose properties will be used + * to extend the control. + */ + initialize: function(options) { + OpenLayers.Control.Panel.prototype.initialize.apply(this, [options]); + this.addControls([ + new OpenLayers.Control.ZoomIn(), + new OpenLayers.Control.ZoomToMaxExtent(), + new OpenLayers.Control.ZoomOut() + ]); + }, + + CLASS_NAME: "OpenLayers.Control.ZoomPanel" +}); diff --git a/lib/OpenLayers/Control/ZoomToMaxExtent.js b/lib/OpenLayers/Control/ZoomToMaxExtent.js index ca3261e5e7..a91fa91ea4 100644 --- a/lib/OpenLayers/Control/ZoomToMaxExtent.js +++ b/lib/OpenLayers/Control/ZoomToMaxExtent.js @@ -15,9 +15,12 @@ * - */ OpenLayers.Control.ZoomToMaxExtent = OpenLayers.Class(OpenLayers.Control, { + /** * Property: type - * TYPE_BUTTON. + * {String} The type of -- When added to a + * , 'type' is used by the panel to determine how to + * handle our events. */ type: OpenLayers.Control.TYPE_BUTTON, diff --git a/theme/default/ie6-style.css b/theme/default/ie6-style.css new file mode 100755 index 0000000000..65f6b192cd --- /dev/null +++ b/theme/default/ie6-style.css @@ -0,0 +1,7 @@ +.olControlZoomPanel div { + background-image: url(img/zoom-panel-NOALPHA.png); +} +.olControlPanPanel div { + background-image: url(img/pan-panel-NOALPHA.png); +} + diff --git a/theme/default/img/pan-panel-NOALPHA.png b/theme/default/img/pan-panel-NOALPHA.png new file mode 100755 index 0000000000000000000000000000000000000000..2740d8baf22ea989d109a60cc0d6c21aeab27e41 GIT binary patch literal 566 zcmV-60?GY}P)Px#U{Fj{MT-{*004^y28{>^juR7;7Z;Tq8~oGvb(FE5}tIHXHUtx-|0R8+B9 zS+izlxpZ{De0;-*h{%_h&zqakq@>lix8A?M;o92n;NbA_@%Z%g`TYF-{r&#_{{H{} z|2@NR(EtDd0d!JMQvg8b*k%9#00Cl4M??UK1szBL000SaNLh0L01FcU01FcV0GgZ_ z00007bV*G`2iOM!5()vh+K+nx000?uMObu0Z*6U5Zgc=ca%Ew3Wn>_CX>@2HM@dak zSAh-}0003UNkl<|CWUkFi>ctT8d=8o+6B&=kY?clvXbz zc0Wl&K-kfnDnCWuPL^?NiPx#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iOM! z1|1C8$9((%000?uMObu0Z*6U5Zgc=ca%Ew3Wn>_CX>@2HM@dakSAh-}000DHNklJ{-dUD?Gg|jv6C&%QE-+qH``JRg}NH(OIyLvKIoG^ zv`rvwUrMo4D6OTdRT!0)F_&!ADpiEKy4hGd6?BLdiAxlH7aEt-Hd`OStEr z-?`u4{hj+epIKfCg~*)fOZ~ zCHxo|Qy_*&%vfZMswPCenLB_nJ|HbkkI9rOHP*N`#%WMfP*UXAEhPq^wY7}gTmzMr z_vA#mfx2j?-EJm7UzyIQPv^OPdpuf@vs7-G%;ufc*PGF51*)p@>Fs?fvwY6BXvh5g z3fHdfPbelF4zq7xr)bG46{25y9+N!$U<>+*RTxd*=o}L$Yz0(N=b$0&2;NV{( zK_ybbH8mz|w(Pgp1qG>`I#nc>Ta@F>84sb5{D-%^9OUfTUnPsWINqt(YjL?g6$Ljp zmy(gOT`GUERBg1k|0XNw{P`!$%=|4WC@bFC*jPeNj<_gOQnu0BS|*i03z&^}HZ?tB zY3Yq9cxuXz%QYmGXI4}cM&l07o%=|3W_5KRVzH!4-5QQ}%+0OP(jwl}8ykNi5LlJW zArf@q!Y3pr>*O~sLBpj>FZ?C=HX}Y?6a_NU+1X-<_)YiVA@awSI zvZ=1#74PnoiVX%sG&FbsSX~Wq`t;8mrS40LzRJrpaPi_3MH^ardVFy^2Ef@NwWsy= zzU1MwzokK!RUm+ZfTUXsE@S&0QHn%L}C5u;ir zB2P^mG2W5mqAj%bqV88jjPX`oy$ieDobV|}juc|GW-1XBL!Lq+Vq7^f*^=lJA{|#26#{`(T3ZL%y}O-Tw|*xa zem6MqdZ#HWx$sfi!)#Hi>my)2ak%qAkne*gkeZePx%5Kv51MF0Q*004^t0gD0xivt6U1O$u)1&sy#)E^#g@wn4hR246$cTu@ zh=|FGiph(M$&HQ6j*iNXj?0ga%#e`Gk&(=jlFX8l&6JeRm6gtxmd=)z&zG0anwrp? zo6(${(Vm{upP$pErPZdU)~Bb|sj1hhs@SWm*sQGBtgP9st=X=w+OV+Ov9a2*vD>w^ z-L|&fx3}K8x!=9L;J&`$zrW$Yz~REes#^uP!<;ltB%*^M_&FIh1>Cn*W z($ebF)9TdJ>($lk*4FIT*X-HZ?c3Y#-QDlr-tXbz@#W?7=H~P3>-F#N_wexe^78rf z^ZE4j`S$ku`1t$#`~Cd<{Y�a{vGU0d!JMQvg8b*k%9#00Cl4M??UK1szBL000Sa zNLh0L01FcU01FcV0GgZ_00007bV*G`2iOM!5(+95W_CLO000?uMObu0Z*6U5Zgc=c za%Ew3Wn>_CX>@2HM@dakSAh-}0005ZNkliz`RUC*NR1}GbSRZP=+y%aT+HBjXxSYASj%|Z${aiZ00000NkvXXu0mjf$)YM? literal 0 HcmV?d00001 diff --git a/theme/default/img/zoom-panel.png b/theme/default/img/zoom-panel.png new file mode 100755 index 0000000000000000000000000000000000000000..f2c7c518d592b2142c2e94bef00e985c6884de69 GIT binary patch literal 1624 zcmV-e2B-OnP)Px#24YJ`L;(K){{a7>y{D4^000SaNLh0L01FcU01FcV0GgZ_00007bV*G`2iOM! z1|kHG!rt-#000?uMObu0Z*6U5Zgc=ca%Ew3Wn>_CX>@2HM@dakSAh-}000HENklF7{`CTz4QeuZ3#$)%1}|98iPPp)GE#eO%s(w;!AW+iA$zN6OG*>CWXz)o{z;SDr}zAN zpXZ$OocmYMt8!C;nScdI2?Q&EUw|`U|M}GsidO)7AP-nU-`WqX2YX8|pxi0IVIYS7 zsSa2O_RHNsxq6`L4ItfNW5C`b1Oj<)0U*~INLO5^Q(-Wu z0q}Tyw6%3~AC{tk+^)Y23sd26e2ORvU3YYJNXRmTg!GI>M}LFMPNrRDPxN@cb z-9Y`-zh5IkfRq#yvu6(_B0@_^$wSVatHtM&`Rs1ZrlNEw(r@r=^}3TOENN!@c#SxR8%xj zTs)VYoXNd|va=_WnK_bKvx;##-5fqVhlB(pzy8`pY-|{2vyP4qiSy@csi|pU-n@AB z?fbANC?-b7nlTr* z($a=7dUW{THM(+T2{kp%h@!yKrN{Aje2f@jz-l#Z57w9JtZzqPksFhva-fvwVKiERU{`zF?g_!<;%x1e7GK^ zQbB90m%V#$V6m9|>uAA(QOGh(of<=FX&q{{l9MMNaq{FNva=_0@ZcQ)d_IY=FcsUj z`48DGTT)Rd;N?pnX=$+tt*ss^DxP9C59G@)t%Qeby3%QF^&&|!PG=j>pL=>tcX+sl zJ$q(SUEPdcuR=I+;y03$qbMr6%g&uwiHRA=_U%(hPk)cd$WUA^KR^@}Xtg3)S!3C; zV=A$+VXR$yhJ=K0PMvy$c;iMRXk?W?(R=X>a%Wr#~a(M=TZ-F4s$T?V85KiGx|TYzzej zw*mhNVloZD;dp^YqvWfvti;3&#AX}H;>Ab*-u+EYZ5%pumszvoNKO5Y`SVAxaN#Hn z1~nd!kHo}5G&H!`x-}J}QN#7?jU**SQBv}dt5=`)Y$KaDmr`HFIG~W{#w##mm{Vk0~pwdu=`acYF5#ptm^JqN4{87N+iV zkjv%4;dl`oWHhR&srdx2SLzd_QVEz$U(?*|=^dn03MiEVlGOK`hf*o@cs=X{Ie=&Y zr?ZV2GY%6Gq3sjY)a1tLZ0jC!hym9#w=+^&TK6`!t`Gv&>0R}U;P+qetTRHu#O;3v z$bPW@+*$hd0n7BJstb(mT-o*(zlnPzSf}x8d1Z^(FZ)egztY?vFnpJTc-pr&$A1Cq W+8RZ(A4&570000