kartograph / kartograph.js Goto Github PK

I've tried to reproduce the choropleth map example on my desktop (http://kartograph.org/showcase/choropleth/). it works but the tooltips don't. Do you have any idea why ?

Here is my gist : https://gist.github.com/blaquans/5849140

Using a test data set of four points - three overlapping, and one not overlapping - only the non-overlapping point renders when using noverlap and the default clusteringOpts.

I must confess to not examining the flow too closely, however when following line in symbolgroup.coffee:

for p in [0..l-3] 

is changed to the following:

for p in [0..l]

my map renders correctly, with a single aggregate value for the overlapping points, and the non-overlapping point. That being said, I fully suspect this 'fix' may well be a hack, particularly given the reference to p+1 a bit later on.

In some situations it is not possible to put the svg map files on the same origin on which the map is embedded. By default, xhr loading of resources from other domains is not possible, which is why the w3c introduced the CORS protocol.

Kartograph.js should be able to load maps from CORS enabled origins. jQuery already supports CORS.

I think there are different ways of handling this problem.

(1) Completely ignore the problem of loading svg assets and add a map.setMap( svgAsDomOrString ) interface. This way, users are forced to find a proper way of getting to their svgs. Of course, this complicates the setup significantly for some users.

(2) Try to wrap the CORS logic of jquery:

map.loadMap({
    url: "http://anotherdomain.org/map.svg",
    origin: "http://mydomain.org",
    success: function() {
        // proceed
    }
});

(3) Of course, we can also allow both (1) and (2).

(4) Idea for situations where CORS is no option at all (say for IE7): Since SVG is a simple plain/text resource it could easily be loaded through a JSONP api. Kartograph would for instance expect that the result of the request is a single string representing the svg file.

map.loadMap({
    url: "http://anotherdomain.org/svgapi/?load=map.svg",
    format: "jsonp",
    success: function() {
        // proceed
    }
});

1.We need to know the center point lon&lat of blow area .

<path data-id="11" d="M985.2,391L985,390L985,389L986,388L986,388L987,386L983,381L984,379L990,378L991,377L991,377L993,376L99
4,375L994,373L994,373L992,372L990,369L990,366L991,364L992,364L994,362L991,362L985,362L981,359L977,354L97
6,356L974,356L973,358L971,358L973,361L971,362L968,364L967,366L965,368L963,368L961,369L961,370L965,374L96
6,376L964,378L964,379L958,381L956,383L958,386L957,390L958,393L960,394L962,394L964,396L969,393L974,394L97
6,396L978,396L977,394L981,391L984,391L985,391.1Z "/>

Then we get the center point is (xMax + xMin)/2.0 = 975.0 &(yMax + yMin)/2.0 = 375.0 by calculating , but how to convert the point to the lon&lat? ( i can use map.viewBC.project(x,y) to get new path point which on the page ,but it' s not lon&lat )

And we have lots of path to compute the center point‘s lon&lat.

2.We already known the mouse position on the page, and we found the API lonlat2xy, it's very very nice and easy to use, is there a way to help us to do xy2lonlat?

Please guide a great way for help us to finsh them . We holp receive your reply.

Thank you so much .

http://trac.osgeo.org/proj4js/

Kartograph breaks when entering lat/lon pairs with commas instead of points as decimal separators.

I have a csv file generated by Tableau which have commas in lat/lon pairs, so it maybe something happening quite often.

I'd gladly make a PR but I don't know Coffee :/

Simple fix in js :
function LonLat(lon, lat, alt) {
if (alt == null) {
alt = 0;
}
if (lon.replace !== undefined) lon = lon.replace(',','.');
if (lat.replace !== undefined) lat = lat.replace(',','.');
if (alt.replace !== undefined) alt = alt.replace(',','.');

When adding an empty HTML div overlay on top of a SVG layer, the SVG layer stops to receive any mouse events. One solution could be to not add full-width container divs over SVG layers. Instead one could add small divs (for instance for tooltips) directly on top of SVG.

This layout is useful if you don't necessarily need to display all symbols (for instance if you display cities). Instead you would display only the most important symbols.

API proposal

new SymbolGroup({
    layout: "priority",
    priority: function (d) {
         // returns the priority for this symbol (Number)
    }
})

For getting IE support (#6) it is required to parse CSS in JavaScript. The following styles will be parsed and applied via Raphael's attr() method:

• fill
• fill-opacity
• stroke
• stroke-width
• stroke-opacity
• stroke-linejoin

(more to come eventually)

To achieve styling, the Kartograph.Map constructor accepts an additional parameter which is the stylesheet for the map.

map = new kartograph.Map('#map');
map.loadStyles('mapstyles.css', callback);

For non-IE browsers, the styles are simply included via <link .. /> tag. On IE, the styles will be parsed by Kartograph and then stored for later use.

Internally, Kartograph.Map gets a new method that applies all styles:

map.applyStyles(raphaelNode)

The CSS parser comes from http://bililite.com/blog/2009/01/16/jquery-css-parser/

Three new use scenarios:

No data injection

If no data is specified at all, the raw shape data will be passed to all callback functions.

var stats = {
  "AL": 8.9,
  "CA": 9.6,
  ...
};

map.choropleth({
   colors: function(d) { return colorscale.getColor(stats[d.code]) };
});

Data injection through callback function

You can simplify your callbacks by setting a data callback function which processes the raw shape data before it will be passed to other callback functions. The raw shape data will be optionally passed as second argument.

map.choropleth({
   data: function(d) { return stats[d.code] },
   colors: function(value) { return colorscale.getColor(value) }
})

Old-school data injection

However, the old-school way of data injection will work, too.

map.choropleth({
   data: stats,
   colors: function(value) { return colorscale.getColor(value) }
})

I tried the latest kartograph.min.js from repo and I hit some issues, where as the one available for download in kartograph.org works fine. How are the releases managed? is there any plan to version releases?

The included demo is not working, because it references kartograph.js where it is not, and because it has been done with a probably old version.
It should be updated... or deleted.

We are using kartograph.js for displaying live malware information.
We used noverlap at the clustering example: http://kartograph.org/showcase/clustering/ But unfortunately we couldn't figured it out how will the circles' radius will increase when the new data is arrived. It seems there is no easy way for doing that.

I wasn't able to create a svg graphic with Inkscape version 0.48.3.1 r9886.
The xml seems not be parsed correctly, but I have no clue.

I'm using

• jquery 1.8.2
• Raphael 2.1.0
• Kartograph.js from master

Here is the file which produced the error (like any other Inkscape svg).

The error occurs in this method

View.fromXML = function(xml) {
    /*
        constructs a view from XML
    */

    var bbox, bbox_xml, h, pad, w;
    w = Number(xml.getAttribute('w')); // Uncaught TypeError: Cannot call method 'getAttribute' of undefined

    h = Number(xml.getAttribute('h'));
    pad = Number(xml.getAttribute('padding'));
    bbox_xml = xml.getElementsByTagName('bbox')[0];
    bbox = BBox.fromXML(bbox_xml);
    return new kartograph.View(bbox, w, h, pad);
  };

I opened a PR at CDNJS (cdnjs/cdnjs#1609) to add Kartograph.js 0.6.1. However, I got told that a tag is needed for them to accept the library in. Could you please add a tag to the repository targeting the 0.6.1 release?

For each lat/lon coordinate the renderer need to find out the appropriate view.

Since RaphaelJS has support for IE, Kartograph can support it as well, at least to some degree.

I have a map with multiple layers, where the some layers should be displayed on top of others. This works well. My problem is that the first layer is big, and it would be nice to be able to use the chunks option to render it a bit at a time. However, when using chunks, all paths are put at the bottom of the svg, making them cover things added later:

map.addLayer('hugelayer', {
    chunks: 50
});
map.addLayer('anotherlayer');

For integration with node and NPM..

Hi,
I use kartograph.py to generate maps I then load through kartograph.js.
I have been trying to include the data attributes using the key property of the options argument passed to map.addLayer like this:

map.loadMap('world.svg', function() {
    map.addLayer('countries', { key: 'admin' });
});

According to the API doc, either of the following should work:

map.addLayer("countries");
// or
map.addLayer({ id: "countries" })

However, the second way leads to a jQuery error.
The API doc suggests to include data-attributes in the following way:

map.addLayer({
    id: "countries",
    key: "iso3"
})

This obviously leads to the same jQuery error (Unrecognized expression, because the first argument is passed to a jQuery selector as is).
I tried to figure out where paths are actually drawn in the kartograph.js code, but had no success.
Any hint? This has been driving me crazy for 3 hours.
Cheers, Christian

Is it possible to get the lat/lng of the mouse position?

Kind of a reverse of the GeoPath?

I wanna drag and drop Symbols into the map.

I know, I know: It's a pain in the ass. But please hear me out.

I wanted to make a tweak to kartograph.choropleth() last night, and I didn't have the CoffeScript compiler installed. So I went to edit the JavaScript directly, but it's littered with all of these cryptically named _refN variables, so it took me way longer to figure out what I needed to change than it should've. Eventually I got it working, and decided that the change, though simple, was a good enough excuse to fork the project, apply the patch and submit a pull request.

So I installed CoffeeScript and edited the relevant bits. First I ran into this issue, but fixed that by just touching a blank src/core.coffee. Then build.sh completed successfully, so I did a diff to see what had changed in the output. And that's where things got really shitty: a one-line change in the CoffeeScript source resulted in a 911-line diff. Merging your latest helped, and now I can build without any changes, but it's really time-consuming to tell what changed in the generated source (mostly because of all the cryptically named variables, which appear to get new names any time you add a variable somewhere else in the code).

CoffeeScript introduces at least four totally unnecessary hurdles to contribution:

1. It's generally difficult to debug (or even read, in some cases) generated code, so people are more likely to just give up right away.
2. Contributing to the code requires people who don't know CoffeeScript to learn a new language and install a new piece of software on their systems, whereas if it were in JavaScript all it would require is a text editor.
3. Testing changes requires modifying CoffeeScript and building the JavaScript before you can test again, or modifying the JavaScript then having to transcribe your changes back to CoffeeScript, build and test again. That extra build step and the translation between two languages adds time and cognitive load to the entire process.
4. Diffs against the generated code are essentially useless because the entire file can be rewritten by single-line changes, which makes it hard to tell what really changed unless you understand CoffeeScript and, more importantly, how it transcribes to JavaScript.

I see all of these hurdles as potentially insurmountable barriers to entry for exactly the kinds of people you might wish to contribute: people with broad and deep knowledge of both the actual language in which Kartograph is executed, or of the technologies it depends on—all of which are written in native JavaScript, not CoffeeScript.

I'm more than happy to aid in porting the whole thing over to JavaScript if it's something you're interested in.

Great work, but unfortunately some old android browsers has no support svg and map not displayed.

In python:

    x = 1000 * self._poly(self.X, i, phi) * self.FXC * lplam
    y = 1000 * self._poly(self.Y, i, phi) * self.FYC

in coffee script:

    x = s._poly(s.X, i, phi) * s.FXC * lplam;
    y = s._poly(s.Y, i, phi) * s.FYC;

I multiplied by 1000 to make the projection work. I have committed the change.

build.sh complains during the first call to cat because there's no file at src/core.coffee.

Hi,

I am trying to use ne_50 shape files from Natural Earth (v1.4.0). I am having a problem adding ne_50m_populated_places.shp layer to my map. When I define it in the config.json file I get the following error:

kartograph config.json --output out.svg
[MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts), MultiLineFeature(720 pts)]
  cli.py, in render_map()
  66: K.generate(cfg, args.output, preview=args.preview, format=format, stylesheet=css)  kartograph.py, in generate()
  46: _map = Map(opts, self.layerCache, format=format)  map.py, in __init__()
  62: layer.get_features()  maplayer.py, in get_features()
  81: charset=layer.options['charset']  layersource/shplayer.py, in get_features()
  122: geom = shape2geometry(shp, ignore_holes=ignore_holes, min_area=min_area, bbox=bbox, proj=self.proj)  layersource/shplayer.py, in shape2geometry()
  147: left, top, right, btm = shp.bbox
_Shape instance has no attribute 'bbox'

My config file is below:

{
    "layers": {
        "earth": {
            "src": "ne_50m_admin_0_countries.shp",
            "attributes": "all"
        },
        "mygraticule": {
            "special": "graticule",
            "latitudes": 12,
            "longitudes": 12
        },

        "background": {
            "special": "sea"
        },
        "places": {
            "src": "ne_50m_populated_places.shp",
            "charset": "latin-1"
        },
        "geolines": {
            "src": "ne_50m_geographic_lines.shp",
            "charset": "latin-1",
            "attributes": "all"
        }
    }
}

I have tried a number of configurations, it seems like adding populated places causes the error.

This layout is useful for merging overlapping data symbols (like bubbles).

API proposal:

new SymbolGroup({
    layout: "group",
    group: function(data_array) {
        // return data for grouped symbol
    }
})

The Aitoff Projection doesn't render and gives this error:

Uncaught ReferenceError: x is not defined /js/kartograph.js:2692

Source:

Aitoff.prototype.project = function(lon, lat) {
  return [x, y];
};

RaphaelJS 2.1.0 now comes with utility functions for point in polygon tests and computing polygon intersections.

https://github.com/DmitryBaranovskiy/raphael/blob/master/history.md

I love this example: http://kartograph.org/showcase/italia/

I can not find a beautiful projection like in this sample.
Is there a tool to find a nice projection visually, without try & error?

Please describe the steps you took to find the projection - this would help a lot.

Hi,

I've created a mall map and there are several rectangle (<rect>) element in the map. I really tried to figure out how to display the <rect> but I failed. I was wondering if anyone of you here who can help me with this.

I would really appreciate any help.

Best Regards,
Joefrey

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!

To be honest, the VML rendering fallback in IE7 and IE8 can sometimes look quite crappy. Also are the VML maps horribly slow on IE. A nice way to get around this issue would be to write a fallback renderer in Flash. The idea would be to keep as much code as possible in JS and only port basic rendering functionality to AS3.

I'm having trouble finding any working examples out there.. can someone direct me to a demo?

The lat2 parallel should have a visible effect on the projection, must be some kind of bug in the formula..

Kartograph currently depends on some functionality of jQuery, which is

• ajax loading of maps
• addClass
• event handling

Since some users might want to use ender.js instead of jQuery, it might be a good idea to ensure that kartograph is compatible to the ender.js modules

• reqwest - for ajax loading
• bonzo - dom helper
• qwery - selector engine
• bean - event handling

I am following the tutorial on the website.

• Wrote the html and verified that jquery, raphael and kartograph javascript is loaded.
• Followed the steps to write the javascript, which i called my-map.js and verified that this one is loaded in the html.
• When I open the html in chrome, no map is shown.
• I played around with some alert statements resulting in this code:

$(document).ready(function () {
    var map = Kartograph.map("#map");
    map.loadMap("/Users/bart_aelterman/test/kartograph/test-1/world.svg", function () {
        map.addLayer("countries");
        alert("layer countries added");
    });
});

However, that alert is never raised (it is raised when I insert after the loadMap statement), and no map is shown when viewing the html in chrome. By the way, I am on OSX 10.8.3 and using chrome 25.0.1364.172

I am reporting this as an issue, because for newbies (such as myself) this feels like your package is not working. Which is a pity, because it might just be that there is an error in the documentation on the website, rather than in the code. As I'm eager to start with kartograph I wouldn't want you to miss a chance to get enthusiastic newbies (such as myself) into your community.

Hi, I wonder in the satellite project, around line 3105

        A = ((yo * cos_up + xo * sin_up) * sin(this.tilt / H)) + cos_tilt;
        xt = (xo * cos_up - yo * sin_up) * cos(this.tilt / A);

if the above two lines should it be

        A = ((yo * cos_up + xo * sin_up) * sin(this.tilt) / H) + cos_tilt;
        xt = (xo * cos_up - yo * sin_up) * cos(this.tilt) / A;

yysun

I think this commit removed support for tooltips entirely: fceb14b

Is that a feature or a bug?

The Balthasart Projection doesn't look like its definition: http://mathworld.wolfram.com/BalthasartProjection.html. It looks like the showcase is just displaying the Behrmann Projection instead.

Kartograph.js seems to be a very good solution to draw choropleth maps. In the example, the data are stored in a JSON file. How would it work with a CSV ?

It seems that paths are not closed properly sometimes. It can be seen for example in the italy demo. There is a part missing in the stroke under the Messina Label. It's more obvious if a solid stroke is used.

The addLayer method has no callback, and it seems to return only after it finishes when you don't set the chunks option to a value > 1. This is good, because if you have a layer that takes awhile to load, and you then want to add some symbols, you really want addLayer to be finished before the symbols are added so you don't have to mess with the z-index (which I don't even know how to change in kartograph at this point...).

However, if chunks is set to a value > 1, addLayer appears to return after the first chunk is drawn, which then allows addSymbols to do its thing and you can end up with subsequent chunks drawn on top of your symbols.

I don't think this would be hard to fix, but I want to make sure it is considered a problem and that I'm not just experiencing this because of ignorance before I do that... thoughts?

Note: I posted this under kartograph.org the first time because I didn't notice there were separate repos (got there from some example source). Please disregard the other one.

Hello, thank you for your great work.
I have this error message in IE9 : "SVG4601: SVG Path data has incorrect format and could not be completely parsed." and the svg map doesn't appears.
Any plan to support IE9 soon? Thx much.

It would be really nice to be able to run some code if loading the map fails!

        map.loadMap( mapName )
            .done ( function() {
                     /* do stuff */
            })
            .error ( function(e) {
                    /* ops */
            });

Hello, congrats to the awesome work ! The maps from the site's showcase don't appear in IE9 and below although a closed issue mentions that there's IE8 support (thx to Raphael). Any plan to support it soon? Thx much.

JS-side projection gives wrong screen coordinates. y-coordinate is far below zero..

TypeError: vp is undefined kartograph.js (line 402)

paper = Raphael(cnt[0], vp.width, vp.height);