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

Add improved navigation control support for disabling zooming with the

Browse Source 
mousewheel. Original from sbenthall (yay), example and more code from me, tests
from elem. r=elemoine.  (Closes #1339)


git-svn-id: http://svn.openlayers.org/trunk/openlayers@6462 dc9f47b5-9b13-0410-9fdd-eb0c1a62fdaf
This commit is contained in:
crschmidt
2008-03-07 23:04:32 +00:00
parent 6ee694fc2b
commit d0b4a17116
3 changed files with 96 additions and 2 deletions
Download Patch File Download Diff File Expand all files Collapse all files

40
examples/navigation-control.html Normal file
View File

@@ -0,0 +1,40 @@
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>OpenLayers Navigation Control</title>
<link rel="stylesheet" href="../theme/default/style.css" type="text/css" />
<style type="text/css">
#map {
width: 512px;
height: 512px;
border: 1px solid black;
}
</style>
<script src="../lib/OpenLayers.js"></script>
<script type="text/javascript">
var map, layer;
function init(){
map = new OpenLayers.Map( 'map', { controls: [] });
layer = new OpenLayers.Layer.WMS( "OpenLayers WMS",
"http://labs.metacarta.com/wms/vmap0",
{layers: 'basic'} );
map.addLayer(layer);
nav = new OpenLayers.Control.Navigation({'zoomWheelEnabled': false});
map.addControl(nav);
map.zoomToMaxExtent();
}
</script>
</head>
<body onload="init()">
<h1 id="title">Navigation Control</h1>
<div id="tags"></div>
<div id="shortdesc">Demonstrate Navigation Control features</div>
<div id="map"></div>
<a href="#" onclick="nav.enableZoomWheel();return false">Turn on Wheel Zoom</a> | <a href="#" onclick="nav.disableZoomWheel(); return false;">Turn off Wheel Zoom</a>
<div id="docs">
This example demonstrates a couple features of the Navigation control. The Navigation control controls most map dragging, movement, zooming, etc. In this case, we have a demonstration of how to create a navigation control with no zoom wheel action, which can then be enabled or disabled by the user.
</div>
</body>
</html>

30
lib/OpenLayers/Control/Navigation.js
View File

@@ -36,6 +36,12 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
*/
zoomBox: null,
/**
* APIProperty: zoomWheelEnabled
* {Boolean} Whether the mousewheel should zoom the map
*/
zoomWheelEnabled: true,
/**
* Constructor: OpenLayers.Control.Navigation
* Create a new navigation control
@@ -75,7 +81,9 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
*/
activate: function() {
this.dragPan.activate();
this.handlers.wheel.activate();
if (this.zoomWheelEnabled) {
this.handlers.wheel.activate();
}
this.handlers.click.activate();
this.zoomBox.activate();
return OpenLayers.Control.prototype.activate.apply(this,arguments);
@@ -168,6 +176,26 @@ OpenLayers.Control.Navigation = OpenLayers.Class(OpenLayers.Control, {
wheelDown: function(evt) {
this.wheelChange(evt, -1);
},
/**
* Method: disableZoomWheel
*/
disableZoomWheel : function() {
this.zoomWheelEnabled = false;
this.handlers.wheel.deactivate();
},
/**
* Method: enableZoomWheel
*/
enableZoomWheel : function() {
this.zoomWheelEnabled = true;
if (this.active) {
this.handlers.wheel.activate();
}
},
CLASS_NAME: "OpenLayers.Control.Navigation"
});

28
tests/Control/test_Navigation.html
View File

@@ -69,8 +69,34 @@
OpenLayers.Control.prototype.destroy = temp;
}
function test_Control_Navigation_disableZoomWheel(t) {
t.plan(2);
var nav = new OpenLayers.Control.Navigation();
var wheel = new OpenLayers.Handler.MouseWheel(nav, {});
nav.handlers.wheel = wheel;
wheel.register = function() {};
wheel.unregister = function() {};
wheel.activate();
nav.disableZoomWheel();
t.eq(nav.zoomWheelEnabled, false, "mouse wheel deactivated");
t.eq(wheel.active, false, "mouse wheel handler deactivated");
}
function test_Control_Navigation_enableZoomWheel(t) {
t.plan(2);
var nav = new OpenLayers.Control.Navigation({zoomWheelEnabled: false});
nav.active = true;
var wheel = new OpenLayers.Handler.MouseWheel(nav, {});
wheel.register = function() {};
wheel.unregister = function() {};
nav.handlers.wheel = wheel;
nav.enableZoomWheel();
t.eq(nav.zoomWheelEnabled, true, "mouse wheel activated");
t.eq(wheel.active, true, "mouse wheel handler activated");
}
</script>
</head>
<body>
</body>
</html>
</html>