Skip to content
This repository
Browse code

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

  • Loading branch information...
commit f02492fc74acfccc5649f21a9aa3cfaddf758a51 1 parent aaa9a28
Kirill Lebedev authored June 02, 2012
1  jquery-jvectormap.js
@@ -40,6 +40,7 @@
40 40
           backgroundColor: '#505050',
41 41
           scaleColors: ['#b6d6ff', '#005ace'],
42 42
           normalizeFunction: 'linear',
  43
+          mouseWheelZoom: true,
43 44
           regionsSelectable: false,
44 45
           markersSelectable: false,
45 46
           regionStyle: {
84  jquery-mousewheel.js
... ...
@@ -0,0 +1,84 @@
  1
+/*! Copyright (c) 2011 Brandon Aaron (http://brandonaaron.net)
  2
+ * Licensed under the MIT License (LICENSE.txt).
  3
+ *
  4
+ * Thanks to: http://adomas.org/javascript-mouse-wheel/ for some pointers.
  5
+ * Thanks to: Mathias Bank(http://www.mathias-bank.de) for a scope bug fix.
  6
+ * Thanks to: Seamus Leahy for adding deltaX and deltaY
  7
+ *
  8
+ * Version: 3.0.6
  9
+ *
  10
+ * Requires: 1.2.2+
  11
+ */
  12
+
  13
+(function($) {
  14
+
  15
+var types = ['DOMMouseScroll', 'mousewheel'];
  16
+
  17
+if ($.event.fixHooks) {
  18
+    for ( var i=types.length; i; ) {
  19
+        $.event.fixHooks[ types[--i] ] = $.event.mouseHooks;
  20
+    }
  21
+}
  22
+
  23
+$.event.special.mousewheel = {
  24
+    setup: function() {
  25
+        if ( this.addEventListener ) {
  26
+            for ( var i=types.length; i; ) {
  27
+                this.addEventListener( types[--i], handler, false );
  28
+            }
  29
+        } else {
  30
+            this.onmousewheel = handler;
  31
+        }
  32
+    },
  33
+
  34
+    teardown: function() {
  35
+        if ( this.removeEventListener ) {
  36
+            for ( var i=types.length; i; ) {
  37
+                this.removeEventListener( types[--i], handler, false );
  38
+            }
  39
+        } else {
  40
+            this.onmousewheel = null;
  41
+        }
  42
+    }
  43
+};
  44
+
  45
+$.fn.extend({
  46
+    mousewheel: function(fn) {
  47
+        return fn ? this.bind("mousewheel", fn) : this.trigger("mousewheel");
  48
+    },
  49
+
  50
+    unmousewheel: function(fn) {
  51
+        return this.unbind("mousewheel", fn);
  52
+    }
  53
+});
  54
+
  55
+
  56
+function handler(event) {
  57
+    var orgEvent = event || window.event, args = [].slice.call( arguments, 1 ), delta = 0, returnValue = true, deltaX = 0, deltaY = 0;
  58
+    event = $.event.fix(orgEvent);
  59
+    event.type = "mousewheel";
  60
+
  61
+    // Old school scrollwheel delta
  62
+    if ( orgEvent.wheelDelta ) { delta = orgEvent.wheelDelta/120; }
  63
+    if ( orgEvent.detail     ) { delta = -orgEvent.detail/3; }
  64
+
  65
+    // New school multidimensional scroll (touchpads) deltas
  66
+    deltaY = delta;
  67
+
  68
+    // Gecko
  69
+    if ( orgEvent.axis !== undefined && orgEvent.axis === orgEvent.HORIZONTAL_AXIS ) {
  70
+        deltaY = 0;
  71
+        deltaX = -1*delta;
  72
+    }
  73
+
  74
+    // Webkit
  75
+    if ( orgEvent.wheelDeltaY !== undefined ) { deltaY = orgEvent.wheelDeltaY/120; }
  76
+    if ( orgEvent.wheelDeltaX !== undefined ) { deltaX = -1*orgEvent.wheelDeltaX/120; }
  77
+
  78
+    // Add event and delta to the front of the arguments
  79
+    args.unshift(event, delta, deltaX, deltaY);
  80
+
  81
+    return ($.event.dispatch || $.event.handle).apply(this, args);
  82
+}
  83
+
  84
+})(jQuery);
34  lib/world-map.js
@@ -197,14 +197,14 @@ jvm.WorldMap.prototype = {
197 197
     var mouseDown = false,
198 198
         oldPageX,
199 199
         oldPageY,
200  
-        self = this;
  200
+        map = this;
201 201
 
202 202
     this.container.mousemove(function(e){
203 203
       if (mouseDown) {
204  
-        self.transX -= (oldPageX - e.pageX) / self.scale;
205  
-        self.transY -= (oldPageY - e.pageY) / self.scale;
  204
+        map.transX -= (oldPageX - e.pageX) / map.scale;
  205
+        map.transY -= (oldPageY - e.pageY) / map.scale;
206 206
 
207  
-        self.applyTransform();
  207
+        map.applyTransform();
208 208
 
209 209
         oldPageX = e.pageX;
210 210
         oldPageY = e.pageY;
@@ -219,6 +219,21 @@ jvm.WorldMap.prototype = {
219 219
       mouseDown = false;
220 220
       return false;
221 221
     });
  222
+
  223
+    if (this.params.mouseWheelZoom) {
  224
+      this.container.mousewheel(function(event, delta, deltaX, deltaY) {
  225
+        var centerX = event.pageX - $(map.container).position().left,
  226
+            centerY = event.pageY - $(map.container).position().top,
  227
+            zoomStep = Math.pow(1.3, deltaY);
  228
+
  229
+        map.label.hide();
  230
+
  231
+        map.transX -= (zoomStep - 1) / (map.scale * zoomStep) * centerX;
  232
+        map.transY -= (zoomStep - 1) / (map.scale * zoomStep) * centerY;
  233
+        map.setScale(map.scale * zoomStep);
  234
+        event.preventDefault();
  235
+      });
  236
+    }
222 237
   },
223 238
 
224 239
   bindContainerTouchEvents: function(){
@@ -354,34 +369,25 @@ jvm.WorldMap.prototype = {
354 369
   },
355 370
 
356 371
   bindZoomButtons: function() {
357  
-    var map = this,
358  
-        sliderDelta = ($('#zoom').innerHeight() - 6*2 - 15*2 - 3*2 - 7 - 6) / (this.zoomMaxStep - this.zoomCurStep);
  372
+    var map = this;
359 373
 
360 374
     $('<div/>').addClass('jvectormap-zoomin').text('+').appendTo(this.container);
361 375
     $('<div/>').addClass('jvectormap-zoomout').html('&#x2212;').appendTo(this.container);
362 376
 
363 377
     this.container.find('.jvectormap-zoomin').click(function(){
364 378
       if (map.zoomCurStep < map.zoomMaxStep) {
365  
-        var curTransX = map.transX;
366  
-        var curTransY = map.transY;
367  
-        var curScale = map.scale;
368 379
         map.transX -= (map.width / map.scale - map.width / (map.scale * map.zoomStep)) / 2;
369 380
         map.transY -= (map.height / map.scale - map.height / (map.scale * map.zoomStep)) / 2;
370 381
         map.setScale(map.scale * map.zoomStep);
371 382
         map.zoomCurStep++;
372  
-        $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) - sliderDelta);
373 383
       }
374 384
     });
375 385
     this.container.find('.jvectormap-zoomout').click(function(){
376 386
       if (map.zoomCurStep > 1) {
377  
-        var curTransX = map.transX;
378  
-        var curTransY = map.transY;
379  
-        var curScale = map.scale;
380 387
         map.transX += (map.width / (map.scale / map.zoomStep) - map.width / map.scale) / 2;
381 388
         map.transY += (map.height / (map.scale / map.zoomStep) - map.height / map.scale) / 2;
382 389
         map.setScale(map.scale / map.zoomStep);
383 390
         map.zoomCurStep--;
384  
-        $('#zoomSlider').css('top', parseInt($('#zoomSlider').css('top')) + sliderDelta);
385 391
       }
386 392
     });
387 393
   },
1  tests/index.html
@@ -5,6 +5,7 @@
5 5
   <link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
6 6
   <script src="assets/jquery-1.7.2.min.js"></script>
7 7
   <script src="../jquery-jvectormap.js"></script>
  8
+  <script src="../jquery-mousewheel.js"></script>
8 9
 
9 10
   <script src="../lib/jvectormap.js"></script>
10 11
 
1  tests/markers.html
@@ -6,6 +6,7 @@
6 6
   <link rel="stylesheet" media="all" href="../jquery-jvectormap.css"/>
7 7
   <script src="assets/jquery-1.7.2.min.js"></script>
8 8
   <script src="../jquery-jvectormap.js"></script>
  9
+  <script src="../jquery-mousewheel.js"></script>
9 10
 
10 11
   <script src="../lib/jvectormap.js"></script>
11 12
 

0 notes on commit f02492f

Please sign in to comment.
Something went wrong with that request. Please try again.