Load a .svg to display with javascript in rails

556 Views Asked by At

I'm trying to use kartograph.js to display a svg map located in /public in a rails application and cannot figure out how to load the map. Here's my .js.coffee.erb file:

$ ->
    map = $K.map('#map')
    # map.loadMap("#{Rails.root}/public/Blank_US_Map.svg", loaded) # attempt 1
    map.loadMap("Blank_US_Map.svg", loaded) # attempt 2

    loaded = () ->
        map.addLayer('baseLayer')

The error thrown in the console is Uncaught TypeError: Cannot call method 'getAttribute' of undefined, though I believe the problem is that no file is being loaded.

1

There are 1 best solutions below

0
On

The issue comes from the library you're using, Kartograph. It needs a SVG file with absolute coordinate, or you'll most likely get this error.

You can confirm that by trying a pure-HTML-and-js version, e.g. :

<html>
    <head>
        <script src="jquery.min.js"></script>
        <script src="raphael-min.js"></script>
        <script src="kartograph.min.js"></script>
    </head>
    <body>
        <div id="map"></div>
    </body>
</html>

<script>
    $(document).ready(function() {
        var map = kartograph.map('#map');
        function callback(mymap) {
            // Stuff
        }
        map.loadMap('Blank_US_Map.svg', callback);

    })
</script>

And see if you get the same error.