title: How can I use kartograph.js?
body: <p>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'</p>
  
  <p>The error in the kartograph.js :</p>
  
  <pre><code>.... 
  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');
      }
  ....
  </code></pre>
  
  <p>Thank you for your help</p>
  
  <p>The HTML page. The error come when I build $K.map </p>
  
  <pre><code>&lt;html lang="en"&gt;
  &lt;head&gt;
      &lt;meta charset="utf-8" /&gt;
      &lt;title&gt;GEOFRANCE&lt;/title&gt;
      &lt;link href="/Styles/Site.css" rel="stylesheet" type="text/css" /&gt;
      &lt;script type="text/javascript" src="/script/js/script.min.js"&gt;&lt;/script&gt;
  </code></pre>
  
  <p></p>
  
  <pre><code>  $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');
  </code></pre>
  
  <p></p>
  
  <pre><code>&lt;/head&gt;
  &lt;body&gt;
  &lt;div id="main"&gt;
  
  &lt;link rel="stylesheet" type="text/css" href="/Styles/jquery.qtip.css"&gt;    
  &lt;script type="text/javascript"&gt;
  
  $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&lt;sup&gt;2&lt;/sup&gt;'];
                          }
                      });
                      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);
  
      });
  
  });
  &lt;/script&gt;
  
  &lt;div id="map"&gt;
  &lt;/div&gt;
  
  &lt;/div&gt;
    &lt;/body&gt;
   &lt;/html&gt;
  </code></pre>