1

On my current geochart map i am trying to replace the basic color with a background image. I have got the image to appear finally but now no matter what i try i can not get it to stop repeating.

can anyone help.

google.load('visualization', '1', {'packages': ['geochart']});
google.setOnLoadCallback(drawVisualization);

  function drawVisualization() {var data = new google.visualization.DataTable();

 data.addColumn('string', 'Country');
 data.addColumn('number', 'Value'); 
 data.addColumn({type:'string', role:'tooltip'});


 data.addRows([[{v:'Los Angeles',f:'Los Angeles'},0,'tooltip']]);
 data.addRows([[{v:'Chicago',f:'Chicago'},0,'tooltip']]);
 data.addRows([[{v:'New York',f:'New York'},0,'tooltip']]);

 var options = {
 colorAxis:  {minValue: 0, maxValue: 0,  colors: ['#6699CC']},
 legend: 'none',    
 backgroundColor: {fill:'transparent',stroke:'#FFF' ,strokeWidth:0 },    
 datalessRegionColor: '#f0f0f0',
 displayMode: 'markers', 
 enableRegionInteractivity: 'true', 
 resolution: 'provinces',
 sizeAxis: {minValue: 1, maxValue:1,minSize:10,  maxSize: 10},
 region:'US',
 keepAspectRatio: true,
 width:400,
 height:300,
 tooltip: {textStyle: {color: '#444444'}}    
 };
  var chart = new   google.visualization.GeoChart(document.getElementById('visualization')); 

   //CUSTOM CODE STARTS HERE                             

 google.visualization.events.addListener(chart, 'ready', function () {


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

    patt.setAttribute('id', 'img1');
    patt.setAttribute('patternUnits', 'userSpaceOnUse');
    patt.setAttribute('width', '20');
    patt.setAttribute('height', '20');
    patt.setAttribute('x', '0');
    patt.setAttribute('y', '0');



    var image = document.createElementNS('http://www.w3.org/2000/svg', 'image');
    image.setAttributeNS('http://www.w3.org/1999/xlink', 'xlink:href', 'http://img32.imageshack.us/img32/4886/spink.png');
    image.setAttribute('x', '0');
    image.setAttribute('y', '0');
    image.setAttribute('width', '20');
    image.setAttribute('height', '20');

    var defs = document.getElementsByTagName('defs')[0];

    patt.appendChild(image);
    defs.appendChild(patt);

    //This would have to be a loop

    document.getElementsByTagName('circle')[0].setAttribute("fill", "url(#img1)");
     document.getElementsByTagName('circle')[1].setAttribute("fill", "url(#img1)");
     document.getElementsByTagName('circle')[2].setAttribute("fill", "url(#img1)");

 });

//CUSTOM CODE FINISHES HERE

 chart.draw(data, options);


 }

Here is a fiddle on the subject.

http://jsfiddle.net/madsynn/rWXDj/4/

Any help would be greatly appreciated

Phillip Madsen
  • 7
  • 4
  • This looks related to [this answer](http://stackoverflow.com/questions/11496734/add-a-background-image-png-to-a-svg-circle-shape) which I assume you saw, but that answer seems to have the same problem with tiling. It looks as if SVG tiles the image as the background to all the circle elements, hence the odd behavior. You may want to try creating a different image element for each circle, and using the X/Y positioning to calculate appropriate x/y start values to make the tiling look correct instead. – jmac May 13 '13 at 00:32
  • I have figured this out if anyone would like to know email or contact me and i will post it. – Phillip Madsen Jul 12 '13 at 16:47
  • Please share in the answers below! No harm in answering your own question! – jmac Jul 17 '13 at 04:03

0 Answers0