Title: Interactive SVG Map not appearing (javascript)
Last modified: August 27, 2017

---

# Interactive SVG Map not appearing (javascript)

 *  [NiallASD](https://wordpress.org/support/users/niallasd/)
 * (@niallasd)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/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](http://greencastleparish.com/svg%20map/), I can’t get it to appear
   on my [WordPress page (near the bottom)](http://greencastleparish.com/wordpress/).
 * 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](https://login.wordpress.org/?redirect_to=https%3A%2F%2Fwordpress.org%2Fsupport%2Ftopic%2Finteractive-svg-map-not-appearing-javascript%2F%3Foutput_format%3Dmd&locale=en_US)
   to see the link]_

Viewing 1 replies (of 1 total)

 *  Thread Starter [NiallASD](https://wordpress.org/support/users/niallasd/)
 * (@niallasd)
 * [8 years, 9 months ago](https://wordpress.org/support/topic/interactive-svg-map-not-appearing-javascript/#post-9456526)
 * Can anyone lend a hand?
 * Nothing works for me…

Viewing 1 replies (of 1 total)

The topic ‘Interactive SVG Map not appearing (javascript)’ is closed to new replies.

## Tags

 * [javascript](https://wordpress.org/support/topic-tag/javascript/)
 * [js](https://wordpress.org/support/topic-tag/js/)
 * [map](https://wordpress.org/support/topic-tag/map/)
 * [svg](https://wordpress.org/support/topic-tag/svg/)

 * In: [Fixing WordPress](https://wordpress.org/support/forum/how-to-and-troubleshooting/)
 * 1 reply
 * 1 participant
 * Last reply from: [NiallASD](https://wordpress.org/support/users/niallasd/)
 * Last activity: [8 years, 9 months ago](https://wordpress.org/support/topic/interactive-svg-map-not-appearing-javascript/#post-9456526)
 * Status: not resolved

## Topics

### Topics with no replies

### Non-support topics

### Resolved topics

### Unresolved topics

### All topics