Building an interactive map with jQuery instead of Flash

78 Comment(s) | Posted January 27, 2009 by Joel Sutherland |

Joel Sutherland

Joel Sutherland leads operations at NMC where he has launched over 250 sites and served as lead developer on the company's CMS which serves millions of unique visits each year. Joel has an Honors Degree in Computer Science from UNC Chapel Hill where he was a Morehead Scholar. Follow Joel on Twitter.

There is an update to this post! Plese visit the new post that has a downloadable, generic plugin.

At the end of last year, we launched a website for Coastal & Marine Sciences in North Carolina with one of our Agency Partners, Liaison Design Group. As a part of the project, the website was supposed to have an interactive map that showed some information and the location of the various Marine Science outposts across the state. The locations would be represented by dots and upon clicking one an info box would pop up and display information about the location.

To make the map as engaging as possible, there needed to be smooth animations and crisp graphics. Traditionally such a project would require the use of Flash. We try to avoid Flash whenever possible, so I began to consider how the project could be accomplished in jQuery.

There were a number of advantages of using jQuery over Flash for the project:

Updates were Easy: Since the map was going to be a visual representation of html, it would be easy to update the data with our Content Management Software. Each location would be a 'page' in the system with contents and attributes like pixel coordinates that would be simple to update.
Content was Search Engine Friendly: Since all of the data was represented in html, it would be easy for search engines to index and spider the content.
Architecture would be naturally layered: All of the data would be stored in a database by the CMS. I would then build html templates for the information that the CMS would display. jQuery and CSS would then take the html content and display it appropriately. Each layer would have a natural role so it would be easy to make changes to any individual component of the application without having to worry about the whole thing.

My biggest concern using jQuery was performance. An important requirement of the project was that the map should zoom when switching between coastal areas. In Flash this would not be a problem, since transformations like these would be executed at a very low level on computer hardware. This is not the case with jQuery, instead the DOM would need to be manipulated and then displayed. I knew that this could be a struggle for less efficient browers like IE6. Fortunately this turned out not to be a problem in the end.

The Five Locations

The Five Maps

In total, there were five maps that needed to be displayed and roughly 70 location dots. The artwork for these maps was beautifully done by Liaison. The first map would show the entire NC coast and some of the location dots that were not highly concentrated. It would also show 4 highlighted areas that could be clicked to zoom in to the other 4 maps where there were more highly concentrated location dots.

In order to simplify the code I had to write, I came up with the following rough procedure to run when one of the five maps was shown:

Load the background image
Load the bullets and info boxes
Place the bullets and hide the info boxes
Attach events to the bullets to display the boxes
Add either the "Return to NC Coast" link or the Zoom-able regions

With this decided, I just need to come up with the markup for each bullet and a couple of jQuery functions to make it all work.

The Bullets and Info Boxes

The bullets and info-boxes for each map would follow a convention that allowed some simple jQuery to link the two together:

 

  Currituck Banks
  
    [CONTENT]

As you can see, both the bullet link and the info-box have similar ids that can be used to reference each other. The class of the bullet contains its color and its rel attribute contains its pixel coordinates. The jQuery to display this on the map and add the info-box event is dead simple:

$(this).children('a.bullet').each(function(){

  var coords = $(this).attr('rel').split('-');
  $(this).css({left: coords[0] + 'px', top: coords[1] + 'px'})
    .hide()
    .fadeIn()
    .click(function(){showPopup($(this).attr('id'));});
});

The showPopup method is simple as well:

function showPopup(id){
  $('#map div.popup').fadeOut(); 
  var boxid = '#' + id + '-box';
  $(boxid).fadeIn();
  $('a.close').click(function(){
    $(this).parent().fadeOut();
  });
}

The code simply relies on the convention between the bullet link id and the info-box id to select and display the box. At the same time it is sure to close any other infobox popup that may be open.

Handling the Zoomable Regions

When the NC Coast map is displayed, in addition to the location bullets, there are also four zoomable regions. Like the bullets and infoboxes I settled on a naming convention that made the code much simpler. The id of all of the related elements as well as map images would be derivable from rules.

Since it was important not to load all of the images at once for concern about loading time, I placed and sized a simple blank gif over each of the regions:

$('').css({
  border: 'none',
  position: 'absolute',

  width: width + 'px',
  height: height + 'px',
  top: top + 'px',
  left: left + 'px',

  cursor: 'pointer'
});

I also attached a click even to this image so that the zooming would occur when the time came:

.appendTo('#map').click(function() {
  $(this).siblings().fadeOut();
  $(this).hide()
    .attr('src', id + '_base.jpg')
    .fadeIn('slow')
    .animate({
      width: '577px',
      height: '418px',
      top: '0px',

      left: '0px'
    }, 1000, '', function(){
      $('#map').css({backgroundImage: 'url(id + '_base.jpg)'}).empty();
      loadBullets(id, true);

    });
});

You'll notice that when clicked, the blank image is swapped for the real one and it is resized to match the map and placed in the top left corner. jQuery's animate function handles these linear transforms with no problem and the map is smoothly scaled into place. It results in a simple yet nifty effect.

Conclusion

In this case, jQuery was a great alternative to Flash. Because of the beautiful artwork, the interactive map looks great with the jQuery animations. The potential performance problem was not an issue and the client is able to have control of the maps content without having to bother a web developer.

It is great to have the opportunity to work on such a fun project in partnership with a talented designer and a client that is as excited about technology as we are. Be sure to head over to the site to check out the final map and learn more about Marine Science in North Carolina.

Categorized in: Development, jQuery