Question

I am trying to implement some kind of Zoom/Pan features to maps generated with the google geochart API. There are some scripts online to zoom/pan svg images, but I am not succeeding in implementing them to the SVGs that the geochart api generates.

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

The code I’m using to append the script to the SVG is:

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 can see the script is beeing place on the svg, but nothing happens, it doesn’t implement the features in the svg, as expected.

I am not sure if this line is correct, since I didn’t find any example online:

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

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

Thanks for you help!
Cheers
Carlos

Answer 1

After some experiments, I was able to find a simple solution and since there were not any valuable answers so far, I decided to share what I have so far.

I decided to do it with CSS, redrawing the map with different values on zoom in/out and hide the overflow with CSS.

Here’s 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 poor zoom/pan feature for the google geochart API, but it’s something, right?

Any improvements to this simple aproach would be welcomed.
Thanks!