Interactive SVG Map not appearing (javascript)

Hi all,

Hope I’m posting this in the right place, if not please direct me to where’s more appropriate.

I created an interactive SVG map using Javascript and although it works in HTML as seen here, I can’t get it to appear on my WordPress page (near the bottom).

I’m guessing that it’s because I’m not referencing my Javascript files properly as the background SVG is appearing OK.

Here’s what I have on my WordPress page:

		<div id="map" class="townlands">
			<!-- Raphaël JS Map Here -->
		</div>
		<h3 id="region-name"></h3>
		<h2 id="irish-name"></h2>
		<h1 id="detail-name"></h1>

In style.css:

/* Interactive Map */
.townlands {
	width: 590px;
	height: 763px;
	background-image: url(http://greencastleparish.com/wordpress/wp-content/uploads/2017/08/parish_townlands.svg);
	clear: both;
}
h1 {
	width: 150px;
	position: absolute;  top: 185px;  left: 40px;
	font-family: Oswald;  font-size: 20px;  font-weight: 300;
}
h2 {
	position: absolute;  top: 145px;  left: 40px;
	font-family: Oswald;  font-size: 18px;  font-weight: 300;  font-style: italic;
}
h3 {
    position: absolute;  top: 80px;  left: 40px;
	font-family: Oswald;  font-weight: 300;  font-size: 36px;
}
/* Interactive Map */

In header.php:

<!-- Interactive Map -->
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/raphael.js"></script>
<script src="<?php bloginfo('stylesheet_directory'); ?>/js/map.js"></script>
<!-- Interactive Map -->

I also tried the following code in functions.php:

// Interactive Map
function themeslug_enqueue_script() {
    wp_enqueue_script( 'raphael', '/js/raphael.js', false );
    wp_enqueue_script( 'map', '/js/map.js', false );
    // here you can enqueue more js / css files 
}

add_action( 'wp_enqueue_scripts', 'themeslug_enqueue_script' );
// Interactive Map

What am I doing wrong?

Any help would be much appreciated

The page I need help with: [log in to see the link]