Bubbles don't work on US map

nicedog8002 commented 9 years ago

When I try to put bubbles on an US map instead of World Map. It didn't work. Could you help?

Here is my code:

<!DOCTYPE html>

markmarkoh commented 9 years ago

Repost markup since Github eats it:

<!DOCTYPE html>
<html>
<meta charset="utf-8">

</div>
    <div id="map" style="position: relative; width: 1800px; height: 1000px;"></div>
</html>
<script src="//cdnjs.cloudflare.com/ajax/libs/d3/3.5.3/d3.min.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/topojson/1.6.9/topojson.min.js"></script>
<script src="datamaps.all.min.js"></script>
<script>
    var bubble_map = new Datamap({
        element: document.getElementById("map"),
        scope: 'usa',
        geographyConfig: {
            popupOnHover: false,
            highlightOnHover: false
        },
        fills: {
            'MA': 'blue',
            'GA': 'red',
            defaultFill: '#ABDDA4'
        }, 
        data: {
            'MA': {fillKey : 'MA'},
            'GA': {fillKey : 'GA'}
        }
    });
    data = [{
        name: 'GA',
        radius: 70,
        latitude: 73.482,
        longitude: 54.5854
    }];
    console.log(bubble_map)
    bubble_map.labels();
    bubble_map.bubbles(data);
</script>
</html>

markmarkoh commented 9 years ago

@senlin13gt Those GPS coordinates aren't within the USA region. longitude would be a negative number for USA's hemisphere.

Swap it with: latitude: 30.0, longitude: -97 and you should see a bubble in the USA.

nicedog8002 commented 9 years ago

Thanks.

On Mar 13, 2015, at 11:00 AM, Mark DiMarco notifications@github.com wrote:

-97

markmarkoh / datamaps

Bubbles don't work on US map #172