How can I use kartograph.js?

Question

Is there anyone who has used the library kartograph.js and 'kartograph.py'? Do you know if I need 'kartograph.py' to be able to run?How can I use the library 'kartograph.py' without installing python? Because I have a problem with 'kartograph.js' when I build the 'BBOX' in the 'kartograph.js'

The error in the kartograph.js :

.... 
if (height === 0) height = width * .5;
        alert(width);
        me.viewport = new kartograph.BBox(0, 0, width, height);
**Uncaught TypeError: undefined is not a function**
        me.paper = me.createSVGLayer();
        me.markers = [];
        me.pathById = {};
        me.container.addClass('kartograph');
    }
....

Thank you for your help

The HTML page. The error come when I build $K.map

<html lang="en">
<head>
    <meta charset="utf-8" />
    <title>GEOFRANCE</title>
    <link href="/Styles/Site.css" rel="stylesheet" type="text/css" />
    <script type="text/javascript" src="/script/js/script.min.js"></script>

  $script(['/script/js/jquery.min.js','/script/js/raphael.min.js', '/script/js/kartograph.js', '/script/js/chroma.min.js'], 'kartograph');

  $script(['/script/js/jquery.qtip.min.js'], 'qtip');

</head>
<body>
<div id="main">

<link rel="stylesheet" type="text/css" href="/Styles/jquery.qtip.css">    
<script type="text/javascript">

$script.ready(['kartograph', 'qtip'], function () {

    $(function () {
        var map,
            colorscale,
            dep_data = {},
            w = $('#map').parent().width();
        $.fn.qtip.defaults.style.classes = 'ui-tooltip-bootstrap';
        $.fn.qtip.defaults.style.def = false;

        $.ajax({
            url: 'departments.json',
            dataType: 'json',
            success: function (data) {
                alert("test : " + w);

                $.each(data, function (i, r) {
                    dep_data[r.id] = r;

                })


                map = $K.map('#map', w, w);

                alert("test2 : " +w);
                map.loadMap('france-departments.svg', function () {
                    map.addLayer('departments', {
                        titles: function (d) { return d.id },
                        styles: {
                            stroke: '0.5px'
                        },
                        tooltips: function (d) {
                            return [d.name, dep_data[d.id].density + '/km<sup>2</sup>'];
                        }
                    });
                    updateMap();
                });
            }
        });

        /*
        * update map colors
        */
        function updateMap() {
            var prop = 'density', // $('.measure.btn-custom').data('value'),
                scale = 'quantiles', // $('.scale.btn-custom').data('value'),
                colors = $('#colors').get(0).value;

            colorscale = new chroma.ColorScale({
                colors: chroma.brewer[colors],
                limits: chroma.limits(dep_data, scale, 7, prop)
            });
            map.getLayer('departments').style({
                fill: function (d) {
                    return colorscale.getColor(dep_data[d.id][prop]);
                }
            });

        }

        // init user interface
        $('.btn').click(function (event) {
            var tgt = $(event.target), par = tgt.parent();
            $('.btn', par).removeClass('btn-custom');
            tgt.addClass('btn-custom');
            updateMap();
        });

        $('#colors').change(updateMap);
        $('#colors').keyup(updateMap);

    });

});
</script>

<div id="map">
</div>

</div>
  </body>
 </html>

score 0 · Accepted Answer · answered Oct 02 '12 at 09:47

0

You need to generate the map you're going to use with kartograph.py, so this directly answers your next question, yes, you need to install Python to use it. You can't run something written in Python without the Python interpreter.

I'm not really sure where did you read about that BBox method, but the docs say something way different: http://kartograph.org/docs/kartograph.js/

answered Oct 02 '12 at 09:47

alexandernst

14,352
22
97
197

Thank you. So, if I want to use kartograph for my website, I need Python Interpreter on my server? – user1298799 Oct 02 '12 at 09:59
No, according to docs, you only need to generate a map using the .py. Once generated, you're free to use only the .js with the generated map. – alexandernst Oct 02 '12 at 10:03
So I don't understand. I am using a SVG map generated by kartograph.py. The BBox method is used in kartograph.js and it's on the BBox method that I have an error – user1298799 Oct 02 '12 at 10:10
Could you make a small jsfiddle? Or maybe paste some more code and the error you're getting? – alexandernst Oct 02 '12 at 10:14
I have a problem on the line : map = $K.map('#map', w, w); – user1298799 Oct 02 '12 at 10:25
Can you use firebug or chrome dev tools and edit your question posting the actual error you're getting? – alexandernst Oct 02 '12 at 10:28
if (height === 0) height = width * .5; alert(width); me.viewport = new kartograph.BBox(0, 0, width, height); **Uncaught TypeError: undefined is not a function** me.paper = me.createSVGLayer(); me.markers = []; me.pathById = {}; me.container.addClass('kartograph'); } – user1298799 Oct 02 '12 at 10:40
The error log you're posting doesn't match with the code from your question. Please show the exact code that's causing the error. – alexandernst Oct 02 '12 at 10:45
I change the question. The error come when I build $K.map used in the kartograph.js – user1298799 Oct 02 '12 at 10:52
AS I said before, I don't know where are you reading from, but BBox is not a method of that library (or at least I can't see it anywhere). Please read the docs. – alexandernst Oct 02 '12 at 11:19
I find my error. Thank you very much for your help. I used the library kartograph.js in the "_build" folder – user1298799 Oct 02 '12 at 12:34

How can I use kartograph.js?

1 Answers1