Following the tutorial on the website does not result in a displayed map

bartaelterman commented 11 years ago

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.

gka commented 11 years ago

Your code looks as if you're trying to load a map from a local folder. This is not possible due to browsers security restrictions. Please use the local web server (Apache) that is already installed with OSX. Please both the HTML/JavaScript and the SVG in the same folder inside the web root and access the map via http://localhost.

babsdenney commented 10 years ago

Hi, Sorry to bother you with newby questions. I just kind of hit a wall and don't know where to go from here. I keep getting this error in my chrome console - Uncaught TypeError: Cannot call method 'fromXML' of undefined

I thought maybe it was because I wasn't running locally like you mentioned above so I setup an apache server and moved all my files to a sites directory and am now running the kartograph through a local host.

Here is the html I have -

<!DOCTYPE html>
<html>
<head>
    <script src="lib/jquery.min.js"></script>
    <script src="lib/raphael-min.js"></script>
    <script src="kartograph-0.8.3.min.js"></script>
    <script type="text/javascript">

map = $K.map('#map', 600, 400);
map.loadMap('world.svg', function() {
    map.addLayer('countries', {
        styles: {
            fill: '#ee9900'
        },
        title: function(d) {
            return d.countryName;
        }
    });
});

    </script>
</head>
<body>
    <div id="map"></div>
</body>
</html>

Any suggestions would be very help. Thank you!

kartograph / kartograph.js

Following the tutorial on the website does not result in a displayed map #41