Home/ Questions/Q 8360483
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-09T11:28:40+00:00

I have drawn a map in Inkscape, saved it as SVG and used http://readysetraphael.com/

  • 0

I have drawn a map in Inkscape, saved it as SVG and used http://readysetraphael.com/ to convert it to Raphial.
I put this generated code into a function called drawMap and I have saved this in js/map.js

js/map.js:

function drawMap(){
 var map = Raphael('map', '100mm', '100mm');
 var layer4 = map.set();
 var path3041 = map.path("m 106.15571,153.07817 -1.64315,13.74999 4.60661,10.36488 6.04618,9.21323 9.21323,3.16705 6.04618,6.04618 8.34949,8.06157 77.4487,1.72748 3.45496,-48.79108 z");
 path3041.attr({id: 'path3041',parent: 'layer4',opacity: '0.98999999',fill: '#ffb380',stroke: '#000000',"stroke-width": '3',"stroke-linecap": 'butt',"stroke-linejoin": 'miter',"stroke-miterlimit": '4',"stroke-opacity": '1',"stroke-dasharray": 'none'}).data('id', 'path3041');
 layer4.attr({'id': 'layer4','name': 'layer4'});

 //etc, more lines than stackoverflow will let me add

var mapGroups = [layer4,layer5,layer19,layer20,layer21,layer22,layer23,layer24,layer25,layer26,layer6,layer7,layer8,layer9,layer10,layer1,layer3,layer11,layer12,layer13,layer14,layer15,layer16,layer17,layer18,layer27,layer28,layer29,layer30,layer31,layer32,layer33,layer34,layer35,layer36,layer37,layer38,layer39,layer40,layer41,layer42,layer43,layer44,layer45];
}

I then put raphael-min.js and into the ‘js’ folder.

When I called drawMap() firebug said:

“drawMap is not defined”

I added the containts of map.js into the html file but I recived the error “Raphial is not defined”.

I assumed this was as raphial was being called before raphial-min.js had loaded so I used Modernizer to load raphial-min.js and map.ja before calling drawMap() but now I get the error:

“drawMap is not defined”

Index.html:

<!DOCTYPE html>
<html>
<head>
    <title>Risk</title>
    <script type="text/javascript" src="http://modernizr.com/downloads/modernizr.js"></script>
    </head>
    <body>
    <div id="map">
    <script type="text/javascript">
        drawMap()
        Modernizr.load({
            load: 'js/raphael-min.js',
            load: 'js/map.js',
            complete: drawMap()
        })
    </script>
    </div>
</body>
</html>
Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Several issues with the Modernizr implementation.

    1. In the complete property, you should not be calling drawMap, just referring to it and since it’s not loaded yet, you have to refer to it in an anonymous inline function.
    2. You should not be calling drawMap() before loading it.
    3. In the Modernizr.load() syntax, javascript doesn’t let you use multiple load properties on the same object.

    So this:

    drawMap();
Modernizr.load({
    load: 'js/raphael-min.js',
    load: 'js/map.js',
    complete: drawMap()
})

    should be this:

    Modernizr.load({
    load: ['js/raphael-min.js', 'js/map.js'],
    complete: function() {drawMap();}
})

    Also, I don’t know why you’re dynamically loading these. It probably isn’t necessary. you could just do this:

    <script src="js/raphael-min.js"></script>
<script src="js/map.js"></script>
<script>
drawMap();
</script>
    • 0