markmarkoh / datamaps

Customizable SVG map visualizations for the web in a single Javascript file using D3.js
http://datamaps.github.io
MIT License
3.78k stars 1.01k forks source link

Most of bubblesConfig doesn't work. #135

Closed fogleman closed 10 years ago

fogleman commented 10 years ago

I'm specifying my own bubblesConfig but most of them don't have any effect. The only one working for me is popupOnHover.

markmarkoh commented 10 years ago

Can you include the code you are using? A running example on JSBin or JSFiddle would be great as well.

fogleman commented 10 years ago

I can demonstrate it by just updating your JSBin starting point:

http://jsbin.com/uPOyuJU/1783/edit?html,css,output

fogleman commented 10 years ago

I added this but it doesn't do anything:

    bubblesConfig: {
      borderWidth: 1,
      borderColor: '#000',
      fillOpacity: 0.2
    },
fogleman commented 10 years ago

I think popupOnHover only worked because I also had it disabled in the geographyConfig and there's this line of code:

https://github.com/markmarkoh/datamaps/blob/master/src/js/datamaps.js#L566

markmarkoh commented 10 years ago

Try sending the bubbleConfig block in with the bubbles call, like:

     map.bubbles([
       {name: 'Hot', latitude: 21.32, longitude: 5.32, radius: 10, fillKey: 'gt50'},
       {name: 'Chilly', latitude: -25.32, longitude: 120.32, radius: 18, fillKey: 'lt50'},
       {name: 'Hot again', latitude: 21.32, longitude: -84.32, radius: 8, fillKey: 'gt50'},

     ],
     {
       popupTemplate: function(geo, data) {
         return "<div class='hoverinfo'>It is " + data.name + "</div>";
       },
       borderWidth: 1,
       borderColor: '#000',
       fillOpacity: 0.2
     });
fogleman commented 10 years ago

Well I'm not looking for a workaround, I just think it should be fixed.

fogleman commented 10 years ago

(I already worked around it.)