kartograph / kartograph.js

UNMAINTAINED Open source JavaScript renderer for Kartograph SVG maps
http://kartograph.org
GNU Lesser General Public License v3.0
1.51k stars 227 forks source link

Unable to position symbols on world map #35

Closed pirhoo closed 11 years ago

pirhoo commented 11 years ago

Hi,

I have a very simple world map with symbols but the geolocation setting won't work. The problem is that every bubbles are located at the same place, under the Gulf of Guinea. I checked the data in the location function, coordinates are OK.

var map = $K.map('#map');            
map.loadMap('./asset/world.svg', function(m) {

    map.addLayer('layer_0', {
        id: 'bg',
        styles: {
            stroke: '#dadada',
            'stroke-width': 10,
            'stroke-linejoin': 'round'
        }
    });

    map.addLayer('layer_0', {
        id: 'countries',
        styles: {
            stroke: '#aaa',
            fill: '#fff',
            'stroke-width': 1
        }
    });

    $.getJSON("asset/world_data.json", function(d) {

        var scale = $K.scale.sqrt(d, 'count').range([0, 40]);

        map.addSymbols({
            type: $K.Bubble,
            data: d,
            location: function(place) {
                return [place.lng, place.lat];
            },
            radius: function(place) {
                return scale(place.count);
            },
            sortBy: 'radius desc',
            style: 'fill:#028; stroke: #fff; fill-opacity: 0.5;',
        });

    });

Here is a sample of the JSON with the data:

[{"count": "165729", "lat": "48.85341", "lng": "2.3488", "location": "PARIS"}, ...]

Anybody else met this problem?

Cheers!

pirhoo commented 11 years ago

It works now: I just added a projection and bounds to the svg using karthograph.py:

{
    "proj": {
        "id": "mercator",
        "lon0": 0,
        "lat0": 0
    },
    "bounds": {
        "mode": "bbox",
        "data": [-190,-90,190,90]
    }
}