A Non-Flash Interactive U.S.A. Map - Archives

A Non-Flash Interactive U.S.A. Map | Archives

September 18, 2012

For the last few years, Flash has been a reliable platform for delivering fast interactive maps consistently across a number of browsers. The performance of Flash still beats what is possible with Javascript or HTML5 canvas. However, that gap is narrowing rapidly as these technologies improves and more users adopt modern browsers. Every day fewer people use legacy browsers and more people access the web using mobile devices. Adobe’s decision to kill support for mobile Flash on Android put the nail in the coffin. As Steve Jobs said in his thoughts on Flash, open web standards are the future.

I am therefore, pleased to announce our first Non-Flash interactive map of the United States. It is built using the raphael.js library so the map is rendered using SVG in modern browsers and VML as a fall back for older browsers. This allows the map to be compatible with legacy browsers like Internet Explorer 7 and 8 while maximizing performance in modern browsers like Chrome. The map does not use any jQuery which helps to avoid any potential conflicts with existing scripts.

Selling and supporting our Flash USA map over the last few years, I learned a lot about how people use interactive maps. While I did my best to incorporate this feedback into previous iterations of the Flash USA map, I faced certain limitations. For example, I had to maintain backwards compatibility, was constrained by poor initial design choices, and faced limitations from Flash itself. Therefore, it was wonderful to have a blank slate to design the best possible interactive U.S.A map from scratch. Here are some of the major improvements:

1. Customization is more intuitive and less fragile. The settings file is an easy to read Javascript file instead of a bloated XML file. I got rid of confusing names like <overwritecolor> and replaced them with simple intuitive names like color. Deleting a setting or state will no longer cause the map to stop functioning. Instead, missing variables will take default values.

2. Installation is simpler. Here is the process:

Upload 2 files and 1 folder
Reference the files in the <head> of the webpage
Name a div “map”

No large chunks of incomprehensible code to paste. No more FlashVars to pass. Much easier to install in content management systems like WordPress.

3. Locations based on latitude and longitude. Getting the projection right on this was a little bit of a challenge, but it was worth it. No other U.S. interactive map does this. None! This makes it possible to use the map to display locations via scripts.

4. Mobile optimized. The map looks fantastic on my Android smartphone. The map automatically detects mobile devices and switches from “hover mode” to “touch mode”. In “touch mode” the tooltip appears on the first click and following a link requires an additional click. Of course, this also works on iPhones and iPads.

You can learn more and buy the map at: here.

Questions moving forward
Will you be adding a non-Flash world map?
Isn’t it hard to sell a non-Flash map on a domain that starts with Flash?

Stay tuned!