Flash Map: A blog about interactive maps

We have just introduced a new interactive map: a Flash Europe Map. This map offers all the features of our flash world map, but is smaller in size and focuses on Europe (there is no zoom feature with this map). It includes latitude and longitude markers, pop-ups on hover, fully customizable colors, countries act as links, and many more features. It is designed to be used on websites and is compatible with WordPress, Joomla, Drupal, GoDaddy Website Tonight, Weebly and many other content management systems and hosts. Here is an example of our map:
(See how we embedded this interactive map in WordPress here)

You can buy this beautiful interactive europe map for only $99. You can learn more about the map by visiting:  http://www.flashworldmap.com/europe.php.  We are considering adding similar maps for continents such as the Middle East, South America, Oceania and Asia.  If you would be interested in one of these maps or something else all together, please contact us and let us know.  We do our best to add new products to meet customer demand.

Our latest product is a Flash Congressional District Map.  It contains all 435 current Congressional districts in the United States House of Representatives.  It is perfect for displaying election information in an interactive format.  It uses the base code of our US Flash map and has all of the the standard bells and whistles.  In addition, it includes a zoom feature that allows you examine the smallest of Congressional districts (think New York City).  This map was very time consuming to create and we’re selling it for $150.  You can see a live demo and purchase the map here.

Updated – 3-7-2011

A few days ago I posted about suicide rates.  Then, I came across this article talking about the happiest states.   I decided to visualize the happiness data so you could compare and contrast it against the suicide rates.  Interestingly, some states, like Wyoming and Alaska have both high suicide rates and very high rates of happiness.  Happiness rankings were based on the following measures:  life evaluation, emotional health, work environment, physical healthy; healthy behavior, and basic access. Both maps were made in minutes using this free state statistics software.

Happiness by State

Suicide Rate by State

The rate is per 100,000 (2006)

———-Original Post on Suicide Rates———

The other day I was talking to a colleague who was considering taking a job in Seattle, Washington.  However, he was hesitant to take a job in place with so much rain.  This led to a debate about the relationship between weather, depression, and suicide.  This isn’t a topic to be taken lightly, but there are some interesting relationships when you map the suicide rates of different states.

Data comes from the American Foundation for Suicide Prevention.  It is interesting how suicide rates are higher in the West.  Might this have something to do with more lax gun control policies that make suicide attempts more likely to succeed?  I don’t have any agenda here, but feel that state visualizations like these are important tools to better understand national trends on serious issues like suicide.  If you would like help adding a map like this to your site, please contact us.

Addendum – 4/10/2011

If you are interested in this topic you should check out the work done by economists Daly, Oswald, Wilson and Wu on The Happiness-Suicide Paradox (forthcoming Journal of Economic Behavior and Organization).  They find a spatial relationship between suicide and happiness after accounting for individual characteristics like race, income, education and more.  They’re not suggesting that happier people are more likely to take their own lives. Rather, that “personal unhappiness may be at its worst when surrounded by those who are relatively more content with their lives.”  In other words, cheerful people impose negative externalities on discontent people.  Definitely, a thought provoking theory worthy of further exploration.

Occasionally I get requests for help on how to install our flash maps on GoDaddy’s Website Tonight.  I don’t use this service so it has always been difficult to help.  However, a user kindly wrote up instructions on how to install a flash map on a Website Tonight site. This tutorial will work with our free flash us map.   The procedure is as follows (click on screenshots to enlarge):

Note:  Replace instances of yourdomain.com with the domain of your site.

1. Go to your main “quick navigation panel”. This is the panel where you select your pages to design.
2. Click on upload files.
   

   Step 2

3. This will take you to the upload files page.
4. Check the “place images in folder” box.
5. Click browse and find the location where you downloaded the map.xml and usmap.swf files; select both of these and click upload.
   

   After you have uploaded your files

6. Your files will appear at the bottom of the page. Click each one to test that the map and the xml code appears.
7. Republish your site.
8. Go to http://www.yourdomain.com/uploads/usmap.swf.  Your map should appear.
9. Go to the web page where you want insert the map. Click on “insert” and “block”, then “insert” then “script”. Copy the installation script found in the installation guide PDF.
10. Replace usmap.swf?xmlPath=map.xml with http://www.yourdomain.com/uploads/usmap.swf?xmlPath=http://www.yourdomain.com/uploads/map.xml
11. Your map will only show a script box in design mode; until you view pages or publish.
    

    Finished map! Don't forget to publish.

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:

1. Width and Height: 500 X 309 for a U.S. map and 550 X 349 for a world map.
2. 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
3. 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:

1. 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.
2. 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:

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.

One of the common requests we’ve received at FlashUSAmap.com is for a map of Canada.  I’m happy to announce that we’ve just released just such a map.  The Interactive Flash Canada Map includes all 13 provinces.   It is built with the same code used on our flash us map.  This means it has all the features and reliability of our flagship product.  Below is a screenshot of our new map:

You may have noticed that we have changed the look and feel of the map.  We’ve changed the labels to white to make the map softer.  Also, based on feedback from customers, we’ve decided to increase the opacity of the tooltip (the background is not as transparent anymore).  This should make it easier to read text that you’ve included in the <description>.  These design changes will be reflected in the newest update of our USA map as well.

The other main difference with the Canada map is the dimensions of the country.  The United States is shaped like a wide rectangle while Canada is shaped more like a square.  By default, the map is 500px X 500px, which makes resizing nice and convenient.

If you’re in need of an clickable map of Canada for your website, download the free trial.

One of the coolest features of our new interactive world map is that you can add location markers to the map using latitude and longitude.  And, I’m going to open source the code and show how I did this with the world so anyone can integrate it into their flash maps.

This was a difficult feature to implement because the world is a globe and when you project that globe onto two-dimensional space the latitude and longitude lines are not evenly spaced or perpendicular lines.  Solving the problem is particularly difficult for the Robinson Projection.  This is one of the most popular map projections.  It was popularized by Randy McNally in the 1960′s and is considered to be one of the most aesthetically pleasing projections of the globe.  However, unlike other projections it isn’t based on a nice formula.  Rather, it is based on an ad hoc table of input values that were chosen to look good.

To figure out how to take latitude and longitude coordinates and project them into x/y space  I had to wade through this journal article (the find articles version omits this very important table).

The process is not exactly straightforward.  You need to convert latitude and longitude into radians.  You also need to extrapolate for values that are between rows in the table.  After many frustrating hours I finally coded up some Actionscript 3 that will transform lat/lon into x/y coordinates.  These x/y coordinates are based an origin located in Africa.  So, to get them to work with Flash which has an origin in the upper left corner takes some adjustments.  Of course, you also need to scale the x/y coordinates based on the size of your map.  For the code to work, your map must be a Robinson projection and have a width that is 1.97 times the height.  I wrote some directions to walk you through the process.  As you work, use this resource for verifying output values.

————————-Download the Code————————-

1.  Robinson-Projection-Actionscript3 Code (.as)

2.  Directions on Scaling and Use (.txt)

——————————————————————

All code is licensed under the GPLv2.  This means that any derivate works that you create using the code must be released under the same license.  If you wish to use this code in a product you want to resell, you need to ask for permission by contacting me.