title: kartograph.js - very simple map
body: <p>As a beginner i want to get the most basic example to work.
  So i downloaded a map from <a href="http://datamaps.cc/admin1/EU/DEU.svg" rel="nofollow">here</a>
  Looked into the file to find that the id for the first and only <code>'g'</code> is <code>'admin1'</code>.</p>
  
  <p>So, i started:</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
    &lt;head&gt;
      &lt;link rel="stylesheet" href="map.css" type="text/css" /&gt;
      &lt;link rel="stylesheet" href="k.css" type="text/css" /&gt;
      &lt;script type="text/javascript" src="/js/script.min.js"&gt;&lt;/script&gt;
      &lt;script type="text/javascript"&gt;
          $script(['/js/jquery.min.js'], 'jquery');
          $script(['/js/raphael-min.js', '/js/kartograph.js', '/js/chroma.min.js'], 'kartograph');
      &lt;/script&gt;
  &lt;/head&gt;
  
  &lt;body&gt;
      &lt;script&gt;
          $script.ready(['jquery','kartograph'], function() {
              $(function() {
                  map = $K.map('#map');
                  map.loadMap('DEU.svg', function(map) {
                      map.addLayer({ id: "admin1" });
                  });
              });
          });
      &lt;/script&gt;
      &lt;div id="map"&gt;&lt;/div&gt;        
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>That is it basically - it is not showing anything. I checked the file locations, and checked if everything after the <code>$script.ready</code> function was running. all ok - but no result.
  I took all the files I include from the kartograph lib folder (on git) - and added the <code>k.css</code> and a small <code>map.css</code></p>
  
  <p><code>map.css</code> looks like this:    </p>
  
  <pre><code>#map {
  width: 900px;
  height: 900px;
  }
  </code></pre>