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);
  };

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
    }
});

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.

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

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 .

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: https://github.com/kartograph/kartograph.js/commit/fceb14b73d6e678e0f5089d53f21b327602f1dc9

Is that a feature or a bug?

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.

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.

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.

Kartograph crashes Angular JS project as soon as it's included in the index.html file. Only error output was:

Uncaught Error: [$injector:modulerr] http://errors.angularjs.org/1.5.0-rc.2/$injector/modulerr?p0=ng&p1=TypeErro…at%20d%20(http%3A%2F%2Frate.dev%2Fassets%2Fscripts%2Fangular.js%3A39%3A242)(anonymous function) @ angular.js:6(anonymous function) @ angular.js:40n @ angular.js:7g @ angular.js:39gb @ angular.js:43Ac.c @ angular.js:20Ac @ angular.js:21de @ angular.js:20(anonymous function) @ angular.js:306i @ jquery.js:2j.fireWith @ jquery.js:2n.extend.ready @ jquery.js:2K @ jquery.js:2

Which directs me to this link:

https://docs.angularjs.org/error/$injector/modulerr?p0=ng&p1=TypeError:%20Cannot%20set%20property%20%27aHrefSanitizationWhitelist%27%20of%20null%0A%20%20%20%20at%20le%20(http:%2F%2Frate.dev%2Fassets%2Fscripts%2Fangular.js:144:186)%0A%20%20%20%20at%20new%20%3Canonymous%3E%20(http:%2F%2Frate.dev%2Fassets%2Fscripts%2Fkartograph.js:1:22333)%0A%20%20%20%20at%20Object.instantiate%20(http:%2F%2Frate.dev%2Fassets%2Fscripts%2Fangular.js:41:404)%0A%20%20%20%20at%20c%20(http:%2F%2Frate.dev%2Fassets%2Fscripts%2Fangular.js:38:356)%0A%20%20%20%20at%20http:%2F%2Frate.dev%2Fassets%2Fscripts%2Fangular.js:8:216%0A%20%20%20%20at%20n%20(http:%2F%2Frate.dev%2Fassets%2Fscripts%2Fangular.js:8:3)%0A%20%20%20%20at%20Object.provider%20(http:%2F%2Frate.dev%2Fassets%2Fscripts%2Fangular.js:38:275)%0A%20%20%20%20at%20http:%2F%2Frate.dev%2Fassets%2Fscripts%2Fangular.js:27:195%0A%20%20%20%20at%20Object.invoke%20(http:%2F%2Frate.dev%2Fassets%2Fscripts%2Fangular.js:41:303)%0A%20%20%20%20at%20d%20(http:%2F%2Frate.dev%2Fassets%2Fscripts%2Fangular.js:39:242

When drawing pie chart and there is only one value it previously draw an arc with the same start and end angle (so it draws a line) It now draws a circle when there is a single value. So it really represents 100%

I'm using this fix to make kartograph.js work in our app. Other wise it crashes with

Uncaught TypeError: Cannot read property 'length' of null

the null is contours in

 Path = (function() {
    /*
        represents complex polygons (aka multi-polygons)
    */
    function Path(type, contours, closed) {
      var cnt, self, _i, _len;

      if (closed == null) {
        closed = true;
      }
      self = this;
      self.type = type;
      self.contours = [];
      for (_i = 0, _len = contours.length; _i < _len; _i++) {
        cnt = contours[_i];
        if (!__is_clockwise(cnt)) {
          cnt.reverse();
        }
        self.contours.push(cnt);
      }
      self.closed = closed;
    }

I suppose I should make a pull request with changes in your *.coffee source files, but I don't know how to.

I'm just trying to access to the symbols (resulted by noverlap clustering) in order to render the counter of nodes for a group of symbols. Is there any ready way to do that?

Hello,

i made a very simple svg using kartograph.py based on the file ne_110m_ocean.shp from Natural Earth:

Rendering it using kartograph.js only shows a partial rendering:

It doesn't seem to support 'holes' in the rendered polygone.