I am trying to incorporate jquery.zoomPanTouchSVG and hammer.js to create a svg zoom+pinch to zoom gestures. The problem is that I unable to understand the code structure of jquery.zoompantouchSVG library javascript. I found that the function "zoom(direction)" works for zooming and i am able to bind it with a button click.
$('#' + zoomInBtnID).click(function() {
zoom('in');
});
$('#' + zoomOutBtnID).click(function() {
zoom('out');
The problem arises when I try to bind this function with the "pinchin" and "pinchout" touch gestures of Hammer.js library. I cannot call the "zoom" function through a javascript code in my custom.js file.
var element = document.getElementById("mySVG");
var hammertime = Hammer(element).on("pinchin", function(event) {
console.log("pinch in event");
zoom('out');
});
var hammertime = Hammer(element).on("pinchout", function(event) {
console.log("pinch out event");
zoom('in');
});
I am getting the console messages in the above code but "zoom" is being shown as undefined in the logs when i place the above code out of the zoompantouchSVG library JS.
Please suggest how to call the "zoom" function outside the library JS so that I can implement zoom by hammer.js touch gestures.