Permalink
Browse files

fixes #11 Map should be zoomed in and out on mouse wheel scroll event

  • Loading branch information...
1 parent aaa9a28 commit f02492fc74acfccc5649f21a9aa3cfaddf758a51 @bjornd committed Jun 2, 2012
Showing with 107 additions and 14 deletions.
  1. +1 −0 jquery-jvectormap.js
  2. +84 −0 jquery-mousewheel.js
  3. +20 −14 lib/world-map.js
  4. +1 −0 tests/index.html
  5. +1 −0 tests/markers.html
@@ -40,6 +40,7 @@
backgroundColor: '#505050',
scaleColors: ['#b6d6ff', '#005ace'],
normalizeFunction: 'linear',
+ mouseWheelZoom: true,
regionsSelectable: false,
markersSelectable: false,
regionStyle: {
View
@@ -0,0 +1,84 @@
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
+ * Licensed under the MIT License (LICENSE.txt).
+ *
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
+ *
+ * Version: 3.0.6
+ *
+ * Requires: 1.2.2+
+ */
+
+(function($) {
+
+var types = ['DOMMouseScroll', 'mousewheel'];
+
+if ($.event.fixHooks) {
+ for ( var i=types.length; i; ) {
+ $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
+ }
+}
+
+$.event.special.mousewheel = {
+ setup: function() {
+ if ( this.addEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.addEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = handler;
+ }
+ },
+
+ teardown: function() {
+ if ( this.removeEventListener ) {
+ for ( var i=types.length; i; ) {
+ this.removeEventListener( types[--i], handler, false );
+ }
+ } else {
+ this.onmousewheel = null;
+ }
+ }
+};
+
+$.fn.extend({
+ mousewheel: function(fn) {
+ return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
+ },
+
+ unmousewheel: function(fn) {
+ return this.unbind("mousewheel", fn);
+ }
+});
+
+
+function handler(event) {
+ var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
+ event = $.event.fix(orgEvent);
+ event.type = "mousewheel";
+
+ // Old school scrollwheel delta
+ if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
+ if ( orgEvent.detail ) { delta = -orgEvent.detail/3; }
+
+ // New school multidimensional scroll (touchpads) deltas
+ deltaY = delta;
+
+ // Gecko
+ if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
+ deltaY = 0;
+ deltaX = -1*delta;
+ }
+
+ // Webkit
+ if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
+ if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
+
+ // Add event and delta to the front of the arguments
+ args.unshift(event, delta, deltaX, deltaY);
+
+ return ($.event.dispatch || $.event.handle).apply(this, args);
+}
+
+})(jQuery);
View
@@ -197,14 +197,14 @@ jvm.WorldMap.prototype = {
var mouseDown = false,
oldPageX,
oldPageY,
- self = this;
+ map = this;
this.container.mousemove(function(e){
if (mouseDown) {
- self.transX -= (oldPageX - e.pageX) / self.scale;
- self.transY -= (oldPageY - e.pageY) / self.scale;
+ map.transX -= (oldPageX - e.pageX) / map.scale;
+ map.transY -= (oldPageY - e.pageY) / map.scale;
- self.applyTransform();
+ map.applyTransform();
oldPageX = e.pageX;
oldPageY = e.pageY;
@@ -219,6 +219,21 @@ jvm.WorldMap.prototype = {
mouseDown = false;
return false;
});
+
+ if (this.params.mouseWheelZoom) {
+ this.container.mousewheel(function(event, delta, deltaX, deltaY) {
+ var centerX = event.pageX - $(map.container).position().left,
+ centerY = event.pageY - $(map.container).position().top,
+ zoomStep = Math.pow(1.3, deltaY);
+
+ map.label.hide();
+
+ map.transX -= (zoomStep - 1) / (map.scale * zoomStep) * centerX;
+ map.transY -= (zoomStep - 1) / (map.scale * zoomStep) * centerY;
+ map.setScale(map.scale * zoomStep);
+ event.preventDefault();
+ });
+ }
},
bindContainerTouchEvents: function(){
@@ -354,34 +369,25 @@ jvm.WorldMap.prototype = {
},
bindZoomButtons: function() {
- var map = this,
- sliderDelta = ($('#zoom').innerHeight() - 6*2 - 15*2 - 3*2 - 7 - 6) / (this.zoomMaxStep - this.zoomCurStep);
+ var map = this;
$('<div/>').addClass('jvectormap-zoomin').text('+').appendTo(this.container);
$('<div/>').addClass('jvectormap-zoomout').html('&#x2212;').appendTo(this.container);
this.container.find('.jvectormap-zoomin').click(function(){
if (map.zoomCurStep < map.zoomMaxStep) {
- var curTransX = map.transX;
- var curTransY = map.transY;
- var curScale = map.scale;
map.transX -= (map.width / map.scale - map.width / (map.scale * map.zoomStep)) / 2;
map.transY -= (map.height / map.scale - map.height / (map.scale * map.zoomStep)) / 2;
map.setScale(map.scale * map.zoomStep);
map.zoomCurStep++;
- $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) - sliderDelta);
}
});
this.container.find('.jvectormap-zoomout').click(function(){
if (map.zoomCurStep > 1) {
- var curTransX = map.transX;
- var curTransY = map.transY;
- var curScale = map.scale;
map.transX += (map.width / (map.scale / map.zoomStep) - map.width / map.scale) / 2;
map.transY += (map.height / (map.scale / map.zoomStep) - map.height / map.scale) / 2;
map.setScale(map.scale / map.zoomStep);
map.zoomCurStep--;
- $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) + sliderDelta);
}
});
},
View
@@ -5,6 +5,7 @@
<link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
<script src="assets/jquery-1.7.2.min.js"></script>
<script src="../jquery-jvectormap.js"></script>
+ <script src="../jquery-mousewheel.js"></script>
<script src="../lib/jvectormap.js"></script>
View
@@ -6,6 +6,7 @@
<link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
<script src="assets/jquery-1.7.2.min.js"></script>
<script src="../jquery-jvectormap.js"></script>
+ <script src="../jquery-mousewheel.js"></script>
<script src="../lib/jvectormap.js"></script>

0 comments on commit f02492f

Please sign in to comment.