kartograph.js - very simple map

Question

kartograph.js - very simple map

2.3k Views Asked by Thomas Deutsch At 16 April 2025 at 15:35

As a beginner i want to get the most basic example to work. So i downloaded a map from here Looked into the file to find that the id for the first and only 'g' is 'admin1'.

So, i started:

<!DOCTYPE html>
<html>
  <head>
    <link rel="stylesheet" href="map.css" type="text/css" />
    <link rel="stylesheet" href="k.css" type="text/css" />
    <script type="text/javascript" src="/js/script.min.js"></script>
    <script type="text/javascript">
        $script(['/js/jquery.min.js'], 'jquery');
        $script(['/js/raphael-min.js', '/js/kartograph.js', '/js/chroma.min.js'], 'kartograph');
    </script>
</head>

<body>
    <script>
        $script.ready(['jquery','kartograph'], function() {
            $(function() {
                map = $K.map('#map');
                map.loadMap('DEU.svg', function(map) {
                    map.addLayer({ id: "admin1" });
                });
            });
        });
    </script>
    <div id="map"></div>        
</body>
</html>

That is it basically - it is not showing anything. I checked the file locations, and checked if everything after the $script.ready 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 k.css and a small map.css

map.css looks like this:

#map {
width: 900px;
height: 900px;
}

Original Q&A

There are 2 best solutions below

Matthias On 17 August 2012 at 21:24

When I tried to reproduce your problem, I found out that Raphaël might not been loaded. If you copied the files from kartograph.org, try changing /js/raphael-min.js to /js/raphael.min.js.

**dubist** · Accepted Answer

If my resurrecting this after 2 years has caused the OP dismay, my sincerest apologies. I intend only to help others who may have been as dumbfounded as I was at this problem.

The following loadMap() function works for me:

map.loadMap('DEU.svg', function () {
    map.addLayer("admin1");
});

So it seems you don't need to say map.addLayer({ id: "admin1" }). You can add styles or event handlers after the layer name, like so

map.loadMap('DEU.svg', function () {
    map.addLayer("admin1", {
        styles: {
            stroke: '#aaa',
            fill: '#f6f4f2'
        }
    });
});

kartograph.js - very simple map

There are 2 best solutions below

Related Questions in JQUERY

Related Questions in KARTOGRAPH

Trending Questions

Popular # Hahtags

Popular Questions