One of the most common questions I get is whether it is possible to add an interactive Flash map to a WordPress blog. Yes, it is possible. In fact, this blog is powered by WordPress and you can see an example of an embedded map here. But, it’s more difficult than you would expect because WordPress does a lot of url rewriting behind the scenes that messes everything up. You can read more about this at the end of the post. First, I’d like to explain how to embed a map in WordPress. These directions will work with the free version of either the us flash map or the world flash map. After you have customized your map and uploaded the necessary files to your server you’re ready to go.
1. To embed a map in a post or page. The easiest way to do this is to use the plugin Kimili Flash Embed. After you have activated the plugin, you will see a little flash icon appear in your toolbar when you are writing a post.
Clicking on this icon will allow you to embed your map. You need to edit the following fields:
- Width and Height: 500 X 309 for a U.S. map and 550 X 349 for a world map.
- Flash (.swf): This is the location of the .swf file that you uploaded. For example: http://www.flashmap.org/wp-content/uploads/2010/10/usmap.swf
- fvars: This tells the .swf where to find the XML file. It should be “xmlPath=” followed by the location of the xml file. For example for the US map this might be: xmlPath=http://www.flashmap.org/wp-content/uploads/2010/10/map.xml (Note: xmlPath is the name of the Flash Variable for the current versions of both the US and world maps).
That’s it! Your map should be working.
2. Add the map to a theme file. If you want to add the map to a theme file you need to use a different approach. For example, say you want to put a map on the homepage. You need to edit index.php and insert the code from the documentation making two small changes:
- Replace the relative url of the .swf file with the absolute url for the .swf file. For example, http://www.flashmap.org/wp-content/uploads/2010/10/usmap.swf instead of usmap.swf.
- Add ?xmlPath= to the end of the .swf url. Then paste in the absolute url of the xml file.
An example of what the code should look like is as follows:
And in a form that you can copy/paste:
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="false" />
<param name="wmode" value="transparent" />
<param name="quality" value="high" />
<param name="src" value="http://www.flashmap.org/wp-content/uploads/2010/10/usmap.swf?xmlPath= http://www.flashmap.org/wp-content/uploads/2010/10/map.xml" />
<param name="allowfullscreen" value="false" />
<embed type="application/x-shockwave-flash" width="550" height="340" src="http://www.flashmap.org/wp-content/uploads/2010/10/usmap.swf?xmlPath= http://www.flashmap.org/wp-content/uploads/2010/10/map.xml" quality="high" wmode="transparent" allowfullscreen="false" allowscriptaccess="sameDomain"></embed>
That’s it! Your map should now show up in your theme.
Why is this so difficult? Because, WordPress is a content management system (CMS). When you write a new post it automatically creates a new webpage on your site. This is really convenient, because you don’t have to mess HTML or uploading a new web page to your server. However, what many people don’t realize is that the pages on your blog don’t actually exist. If you create a post called “dogs” there is no file called dogs.html on your server. Instead, when some goes to http://www.yoursite.com/dogs your server directs them to a template file and fills that file with information from a database. The actual template file that is being shown exists at http://www.yousite.com/wp-content/themes/templatefile.php. So, when you embed the map the Flash file is looking for the XML file at http://www.yoursite.com/map.xml when it should be looking elsewhere. To fix this problem, we have to tell the Flash file exactly where to find the XML file using an absolute url. Both of the solutions above do just that.
If you have any questions about the process, leave a comment or contact us for support.