Add Zoom / Pan Script to SVG from Google Geochart

Question

I am trying to implement some Zoom / Pan functions for maps created using the google geotext API. There are several online scripts for enlarging / panning svg images, but I do not succeed in implementing them for SVG created by geochart api.

I am trying to use the SVGPan library http://code.google.com/p/svgpan/

The code I use to add a script to SVG:

google.visualization.events.addListener(chart, 'ready', function () { var script = document.createElementNS('http://www.w3.org/2000/svg', 'script'); script.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://www.cyberz.org/projects/SVGPan/SVGPan.js'); var svg = document.getElementsByTagName('svg')[0]; svg.appendChild(script); }); 

Here's the jsfiddle:

http://jsfiddle.net/cmoreira/CetaA/

With Firebug, I see that the script is on svg, but nothing happens, it does not implement functions in svg, as expected.

I am not sure if this line is correct, since I did not find any examples on the Internet:

  var script = document.createElementNS('http://www.w3.org/2000/svg', 'script'); 

Am I doing something wrong, or what am I trying to do will be impossible?

Thank you for helping! cheers Carlos

Answer 1

After some experiments, I was able to find a simple solution, and since there were still no valuable answers, I decided to share what I have.

I decided to do this with CSS, redrawing the map with different zoom in / out and hiding the overflow with CSS.

Here is a working example:

http://jsfiddle.net/cmoreira/CCUpf/

CSS

 #canvas { width:400px; height:300px; overflow:hidden; } #visualization { top:0px; left:0px; } 

Zoom / Pan Javascript

 function zoomin() { mw = mw+50; mh = mh+50; x = x-25; y = y-25; document.getElementById('visualization').style.top = y +'px'; document.getElementById('visualization').style.left = x +'px'; drawVisualization(mw,mh); } function zoomout() { if(mw > 600) { mw = mw-50; mh = mh-50; x = x+25; y = y+25; document.getElementById('visualization').style.top = y +'px'; document.getElementById('visualization').style.left = x +'px'; drawVisualization(mw,mh); } } function left() { x = x-50; document.getElementById('visualization').style.left = x +'px'; } function right() { x = x+50; document.getElementById('visualization').style.left = x +'px'; } function up() { y = y-50; document.getElementById('visualization').style.top = y +'px'; } function down() { y = y+50; document.getElementById('visualization').style.top = y +'px'; } 

I know this is a very bad zoom / pan function for gooch geochart API, but it is something, right?

Any improvements in this simple aproach would be welcome. Thank you

Answer 2

I would recommend you instead of jVectorMap . It supports scaling / panning with the mouse or touch events.