ashatora/openlayers
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity

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).

Browse Source 
git-svn-id: http://svn.openlayers.org/trunk/openlayers@7950 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
euzuro
2008-09-04 19:21:59 +00:00
parent d2ac6cacfd
commit 5084ea6a91
14 changed files with 320 additions and 5 deletions
Download Patch File Download Diff File Expand all files Collapse all files

49
examples/pan-zoom-panels.html Normal file
View File

@@ -0,0 +1,49 @@
<html>
<head>
<title>Pan and Zoom Panels</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<!--[if IE]>
<link rel="stylesheet" href="../theme/default/ie6-style.css" type="text/css" />
<![endif]-->
<link rel="stylesheet" href="style.css" type="text/css" />
<script type="text/javascript" src="../lib/OpenLayers.js"></script>
<script>
var map;
var lon = 5;
var lat = 40;
var zoom = 5;
function init(){
map = new OpenLayers.Map("map", {
controls: [
new OpenLayers.Control.Navigation(),
new OpenLayers.Control.PanPanel(),
new OpenLayers.Control.ZoomPanel()
]
});
var wms = new OpenLayers.Layer.WMS(
"OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'}
);
map.addLayers([wms]);
map.setCenter(new OpenLayers.LonLat(lon, lat), zoom);
}
</script>
</head>
<body onload='init();'>
<h1 id="title">Pan and Zoom Panels</h1>
<div id="tags"></div>
<p id="shortdesc">Customizable pan and zoom panels</p>
</p>
<div id="map" class="smallmap"></div>
<p id="docs">
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.
</p>
</body>
</html>

5
lib/OpenLayers.js
View File

@@ -221,6 +221,11 @@
"OpenLayers/Layer/WFS.js", "OpenLayers/Layer/WFS.js",
"OpenLayers/Control/MouseToolbar.js", "OpenLayers/Control/MouseToolbar.js",
"OpenLayers/Control/NavToolbar.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/Control/EditingToolbar.js",
"OpenLayers/Lang.js", "OpenLayers/Lang.js",
"OpenLayers/Lang/en.js" "OpenLayers/Lang/en.js"

76
lib/OpenLayers/Control/Pan.js Normal file
View File

@@ -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 <OpenLayers.Control> -- When added to a
* <Control.Panel>, '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";

30
lib/OpenLayers/Control/PanPanel.js Normal file
View File

@@ -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"
});

26
lib/OpenLayers/Control/ZoomIn.js Normal file
View File

@@ -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 <OpenLayers.Control> -- When added to a
* <Control.Panel>, '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"
});

26
lib/OpenLayers/Control/ZoomOut.js Normal file
View File

@@ -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 <OpenLayers.Control> -- When added to a
* <Control.Panel>, '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"
});

31
lib/OpenLayers/Control/ZoomPanel.js Normal file
View File

@@ -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"
});

5
lib/OpenLayers/Control/ZoomToMaxExtent.js
View File

@@ -15,9 +15,12 @@
* - <OpenLayers.Control> * - <OpenLayers.Control>
*/ */
OpenLayers.Control.ZoomToMaxExtent = OpenLayers.Class(OpenLayers.Control, { OpenLayers.Control.ZoomToMaxExtent = OpenLayers.Class(OpenLayers.Control, {
/** /**
* Property: type * Property: type
* TYPE_BUTTON. * {String} The type of <OpenLayers.Control> -- When added to a
* <Control.Panel>, 'type' is used by the panel to determine how to
* handle our events.
*/ */
type: OpenLayers.Control.TYPE_BUTTON, type: OpenLayers.Control.TYPE_BUTTON,

7
theme/default/ie6-style.css Executable file
View File

@@ -0,0 +1,7 @@
.olControlZoomPanel div {
background-image: url(img/zoom-panel-NOALPHA.png);
}
.olControlPanPanel div {
background-image: url(img/pan-panel-NOALPHA.png);
}

BIN
theme/default/img/pan-panel-NOALPHA.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 566 B

BIN
theme/default/img/pan-panel.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.3 KiB

BIN
theme/default/img/zoom-panel-NOALPHA.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.1 KiB

BIN
theme/default/img/zoom-panel.png Executable file
View File

Binary file not shown.
Side by Side

After

Width:  |  Height:  |  Size: 1.6 KiB

70
theme/default/style.css
View File

@@ -241,10 +241,72 @@ div.olControlMousePosition {
filter: alpha(opacity=50); filter: alpha(opacity=50);
} }
/* .olControlPanPanel {
* Due to current limitations in the OpenLayers code, you can only top: 10px;
* replace this image with another image which is 17px x 17px. left: 5px;
*/ }
.olControlPanPanel div {
background-image: url(img/pan-panel.png);
height: 18px;
width: 18px;
cursor: pointer;
position: absolute;
}
.olControlPanPanel .olControlPanNorthItemInactive {
top: 0px;
left: 9px;
background-position: 0px 0px;
}
.olControlPanPanel .olControlPanSouthItemInactive {
top: 36px;
left: 9px;
background-position: 18px 0px;
}
.olControlPanPanel .olControlPanWestItemInactive {
position: absolute;
top: 18px;
left: 0px;
background-position: 0px 18px;
}
.olControlPanPanel .olControlPanEastItemInactive {
top: 18px;
left: 18px;
background-position: 18px 18px;
}
.olControlZoomPanel {
top: 71px;
left: 14px;
}
.olControlZoomPanel div {
background-image: url(img/zoom-panel.png);
position: absolute;
height: 18px;
width: 18px;
cursor: pointer;
}
.olControlZoomPanel .olControlZoomInItemInactive {
top: 0px;
left: 0px;
background-position: 0px 0px;
}
.olControlZoomPanel .olControlZoomToMaxExtentItemInactive {
top: 18px;
left: 0px;
background-position: 0px -18px;
}
.olControlZoomPanel .olControlZoomOutItemInactive {
top: 36px;
left: 0px;
background-position: 0px 18px;
}
.olPopupCloseBox { .olPopupCloseBox {
background: url("img/close.gif") no-repeat; background: url("img/close.gif") no-repeat;
cursor: pointer; cursor: pointer;