Flash Map: A blog about interactive maps

So, last night I finished our new web-based tool to visualize state statistics.  I ran into some problems when I tried to move the tool from my PC to the online server.  Apparently, newer versions of PHP prevent you from using a variable name as a string and then reusing it later as an array.  Anyway, the new tool is pretty sweet.  Here is a screen shot of the map used to visualize March 2010 unemployment rates by state (click on the map to see the interactive version):

FlashUSAmap.com Solution

That took minutes to make.    You simply enter in the state data and the tool does all the work.  You can choose any color you want as your base color.  It is fully compatible with the regular flash map that we sell.   You can make your own density map now!

I’m hoping this tool makes the flash map I sell more valuable to my customers.  If you don’t need a fully interactive map, you can just use the tool and take screenshots of your maps for free!  I’m totally ok with that.  But, please consider linking back to me or telling other people about this resource.  Screenshots of my map are much better than the alternative:

Google's Solution

This is the Google intensity map.  Entering data for each state was such a pain that I gave up by the time I made it to the Eastern states.  To be fair, you can also make Google’s intensity map somewhat interactive if you use this javascript hack from Pete Warden.  (BTW Pete’s blog is one of my favorite’s at the moment and a great resource).  Nonetheless, the user experience isn’t comparable.

Please try out the map and let me know what you think!  I’m sure there are some bugs that need to be ironed out and I’d appreciate your feedback.  If you have a blog and would like a review copy of our map, please let me know.  You can email me by using this form.

How to add an Interactive Flash Map of the United States to your Site
Many companies need a clickable interactive map of the United States.  A USA map provides users with a much better navigation experience then searching through a list of state names or even using a drop-down menu.  These maps are often used for real-estate websites, dealer locators, displaying branches, and linking to state resources.

However, the prospect of creating such a map is daunting for many small business owners.  Making a clickable map is quite difficult to do using HTML alone.  While possible, solutions using HTML don’t look professional and often take up a lot of space causing increased loading times.  What’s the alternative?  An animated flash USA map.

Flash is a programming language that was developed by Macromedia and later purchased by Adobe.  It is used by many websites to display movies, animations, and interactive tools.  Flash files are called SWF files.  When you go to YouTube, you are watching a Flash file.

Flash maps are great alternative to traditional HTML maps because they are smaller and more flexible.  With Flash, the United States will respond to your mouse with effects.  When you hover over a state, that state can change color, get larger, and display additional information.  For an example, see these interactive maps of the U.S. using Flash.

But is it hard to implement?  Many people worry that creating a Flash Map requires expensive software and complicated coding.  And while it is possible to make your own map and recreate the wheel, there is no need to do so.  Many companies sell prepackaged states maps that are ready to go out of the box.  You can get a high quality map for anywhere between 45-65 dollars.

When you choose a map, make sure to use one that is powered by XML.  XML is a very simple way of storing data.  All you need to do is open the XML file in a text editor and change the links and colors accordingly.  Make sure not to buy a map that requires that you have Flash Software.  Flash software can cost hundreds of dollars.  Also, make sure that the map is scalable so you can change its size to fit the space you have available.  Lastly, make sure to buy a map that includes the full source code.  This will give you the option of making substantial changes to the map in the future.  That way, if you need to add Canada or Puerto Rico to your map you won’t have to start from scratch.

So, which map should you use?  I’m impartial to the one I built at FlashUSAmap.com.  It is full-featured and easy to customize and install.  But, don’t take my word for it, you can download a flash map demo and try it out yourself.  There are also lots of maps you can find with a simple Google search.  Just keep in mind, there is no need to pay hundred’s of dollars to buy special map software.

**********************************************************************************************

Note:  I wrote this up to submit to article sites and promote my site. However, I think it will be just as beneficial to post it here.  Hopefully, people wanting to know more about interactive maps can find it.

So, you need a map of the United States to post on your blog or website.  You don’t need anything fancy, but you want to change the color of some states.  Maybe, you’re covering the presidential election and you want to post a prediction of what states will go Republican (red), Democrat (blue), and Independent (green).  Ignoring the complexity of those states that split electoral votes (like Nebraska) what is the quick easy way to make this map?

The answer is using a Scalable Vector Graphics (SVG) file.  You can check out the wikipedia entry here.  First of all SVG files are vectors which can be resized without any distortions.  More importantly an SVG file describes pictures using only text.  So the area of Texas is described to your browser using a long string of coordinates.  In an SVG file the color of each object is defined by a simple tag.  This makes editing SVG files really simple.  You don’t need to own any software (although free software makes editing SVG’s much easier).  You can just open the file using a text editor and manually change the colors.  SVG files have other cool features like letting you have each object act as a link.

SVG files have a lot going for them.  Why aren’t they more popular?  Because Internet Explorer doesn’t support them!  Surprise, Surprise.  So, if you want 50+% of your users to see your pictures you need to use something else.  Nevertheless, we can use SVG files to make pictures and then transform the SVG into another more compatible format like .png.

That’s do a quick example.

1.  Download this Blank USA Map that I got off Wikipedia.  It is an SVG file.

2.  Open the map using a text editor.

3.  The code for Kansas will look something like this:

<path style=”fill: #d3d3d3; stroke: #ffffff; stroke-opacity: 1; fill-opacity:1;stroke-width: 0.75; stroke-miterlimit: 4;stroke-dasharray: none” id=”KS”

d=”M 507.88059,324.38028 L…(a bunch of number that outline the state of Kansas).

4.  You simply replace the “fill” color with whatever color you want the state of Kansas to be.  It’s pretty safe to assume it will go Republican, so we’ll replace #d3d3d3 with #FF0000 the (color code for Red).

5.  Click to see the map with Kansas red (must use Firefox, Chrome or Safari).

Now, you could open that image in your browser, take a screenshot and use your favorite photo program and save the picture as a jpeg or png file.  However, it’s probably easier to use software to speed up the whole process.

Inkscape is a free vector graphics program that will allow you to open up SVG files like the one blank US map.  Change the colors of each state is as easy as clicking on each state and choosing a color.  When your done you can save the file as whatever type of image you like.

Hopefully you learned how to make your own customized map with a little work.  Feel free to ask questions in the comments.

Setting up a blog is so easy these days!  Buy a domain name, link it to my hosting account (Host Gator…highly recommended), and use Fantastico to install the latest version of WordPress (2.9.2).  This new WordPress user interface is really nice, it’s like driving a new car.  The hardest part of the process was choosing a theme.  I’ve come to the conclusion that often it isn’t worth the time/effort to have a unique design.  (In fact, once, I spent hours and hours designing a site that I have yet to write anything on).  That’s silly, the content is what matters.  So, I spent 5 minutes looking through themes and settled on this simple one with just a little style.  It’s called Lightword.

Anyway, why another blog?  I’ve recently started making interactive maps using Flash and Javascript and I wanted to share what I’ve learned in the process.  In full disclosure, it will give me the chance to promote the interactive maps I sell.  But before I dive in with shameless self-promotion I want to get a few posts under my belt.   I’ll start with an introduction to SVG files and how you can make your own free USA map to display state statistics.  Until then…