Building an interactive map with jQuery instead of Flash
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
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]
![close]()
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.
Comments
Seamus
Thank you kind sir for the nice writeup. It's interesting to read a case study" of our collaborative effort from the developer's point of view.
Here's to future team efforts...
Seamus"
cssProdigy
This is just awesome. I can't believe it's not flash! Great work. And coastal Carolina is awesome.
Joel Sutherland
@Seamus
Thanks for the comments -- I too look forward to the next project.
@cssProdigy
Thanks as well. It was a lot of fun to work on such a cool topic.
Kevin Mario
Opened up the site with Firefox 2 and some of the pop-ups had scrollbars under them.. might get rid of this problem by changing overflow: auto to visible on your style.css ( line 609 I believe )
Hope this helps.. otherwise nice app you've got there =)
Joel Sutherland
@Kevin Mario
Thanks so much for the specific feedback! This should now be fixed!
Kevin Mario
Glad I could help =)
Azeem
Great work! - an alternate to flash is always good.
Although I noticed one minor error, more in the content that the code. The popup containing the entry for Carteret County Shore Protection Office" heading breaks out of the yellow background header and spills out.
I guess this is because the bg image is a set height and it was only intended to hold 2 lines of text but "Carteret County Shore Protection Office" uses 3 lines - A small error but I thought you might want to know. "
Andrew
I'm wondering - why didn't you use Google Maps and perhaps create custom tiles? It doesn't seem like I can pan on the map?
I recently founded a start-up focused on mapping, and we use Google Maps API, along with YUI for ajax.
Basically, while Google is fetching and rendering the map tiles, we fetch up overlays" in parallel, using YUI async requests. The overlays are the trails and waypoints on the map, along with their metadata. To make the maps snappy, we also cache various map views in static files as JSON.
I don't know that you want to reinvent the wheel, especially when you don't have the resources to make it feature complete (panning and zooming the map)."
James Cready
I built a map kinda sorta similar once: http://www.enfatico.com/contact.php"
Joel Sutherland
@Azeem
Good catch. We decided with the client to enforce a 1-line rule on the headlines. It looks like that slipped past us.
@Andrew
I've used the Google Maps API before (it was actually marine science related! I worked with a professor to track Sea Turtle migration in the Atlantic) but it wasn't a good fit for the project.
We have a very limited dataset and the panning of Google Maps would have been more distracting than anything else. By doing things this way, users wouldn't find themselves somewhere without interesting data.
@James
Cool! I love the way the bullets fan out at the beginning.
Cyanbane
Great Post. The transitions from main map to sub maps are very smooth.
Chris Olberding
Nice. I did some similar a few years back only using html and css for apartment locations within a city. Needless to say it did not come out nearly as nice as yours. But yeah, updating with this type of map is easy and a lot more simple to program against.
Gary
Couple of ideas to make it even more accessible:
1) Add a href attribute value to each of the anchors, then within the click function of for the anchors, add a e.preventDefault() - this stops the link being followed and another page loading. This means users with some combination of JS/CSS enabled/disabled can still get to a page, all about the specific location.
2) Load the popup content with AJAX from the actual page itself, then you won't have to sets of content to maintain.
Jim Hanifen
This is great, I love seeing anything usually done in flash done using javascript. Nice work and thanks for the post.
Eric
Beautiful map and use of jQuery. Are you able to add bullets to the map via the CMS? If so, how does that work?
Joel Sutherland
@Eric
The client adds locations to the map by creating new pages within a section. Each page corresponds to an infobox and a bullet.
To place the bullet, one of the CMS fields is used:
312-50-blue
Where the first two are pixel coordinates and the last is obviously the color of the bullet. The client picked this up quickly and has added a lot of information since we launched.
gamma911
Well done on the map integration, I would love to do this for one of my projects - my map would have three zoom levels, do you think this would be possible?
Joel Sutherland
@gamma911
Three levels of zoom certainly would be possible. If you poke through the live javascript you'll see I have separate functions for placing the bullets and zoomable regions. You would just need to place more zoomable regions on each of the second level images.
Let me know if you have any questions and thanks for the comment!
gamma911
Thanks for the tip - look at this site: http://www.visitscotland.com/guide/
I am trying to achieve a similar effect on the map but would like the client to add points to the map without me having to go to flash to do it.
So we will need 3 levels of zoom.
How achievable do you think this is, or should I just stick to flash?
"
Joel Sutherland
@gamma911
I'm sure you could use flash or JS, I found it much quicker to do in jQuery.
To place the bullets, I had the client enter pixel coordinates into our CMS. Even for someone non-technical this is easy to figure out quickly.
Eric Wendelin
Good work, but I second Andrew's suggestion of the GMaps API. You could likely have overridden any functions that didn't perfectly suit your needs. Very impressive work as I said, though.
Graham Scragg
Thanks so much for blog entry!!
I needed something similar for a client, and was trying to do it with the OpenLayers API, using jquery is so much more intuitive.
I modified your code to allow for dynamic zoomable areas as well as different types of button.
Good work.
Mike Duguid
As a flash developer I have to point out that none of the 3 advantages you list over flash are actually any different to what well developed flash could provide.
# Updates were Easy
A swf map could have it's data fed from flashvars embedded in the html or from a database (or from xml etc), and all image assets would be loaded externally.
# Content was Search Engine Friendly
Google spiders swf content now, but again the important data could be held in the html via flashvars or in alt content (see swfobject alt content)
# Architecture would be naturally layered
All of the data could be read from a database from flash too.
In flash development nowadays most developers have separate text (.as) actionscript files that handle each function so the separation of functionality is the same.
The only real advantage in using jquery is that it doesn't require a plugin.
Micah Slavens
We use jquery quite a bit these days in our shop. It is a great alternative to Flash in many cases. However, I do think that it's got a long way to go. The above example, to me, looks much more choppy than a well built flash piece would. It's quite choppy and it doesn't load very quickly.
This is still great work and a good concept, but it may be stretching what Jquery was intended to do.
Joel Sutherland
Micah,
Thanks for the comments -- I agree that there are some performance issues with javascript. The next generation of browsers will help that out quite a bit by speeding up DOM manipulations.
You've got a great site!!
Steve
Wow.. Love it... working with jquery everyday lately - this is one of the best and simple examples of a zoomable map I have ever seen. Great Job! Could you send me a zip also? I want to also play around with dragging a large map around in the window. Will keep you up on my success.
We are working on a community base snowmobile map for the region - I just love your setup!
Cheers!
Joel Sutherland
Steve,
I just sent you an email with some info! Thanks for the comments.
Wes Crockett
Hello,
This is an AWESOME use of jQuery... With your permission, and help by sending a demo zip, I would love to implement this in our schools website to highlight the brand new library that we just opened.
Thank you and way to go!
Wes
Joel Sutherland
Wes,
An email has been sent your way with initial instructions. Be sure to post back here when you've got it running!
Padraig Boru
Joel,
You are going to get tired of doing this, but I must ask.
Would you mind also sending me your demo.zip and the instructions?
Thanks in anticipation.
Mr Brown
Yet another person after the zip!
Need a contact map (dont need the zoom)and this looks relly nice. As I dont know squat about flash this is a nice solution.
Thanks heaps
Shawn Dampier
Wow, fantastic work and thanks for the tutorial - as long as people are asking for the .zip, I would love it as well. Our agency built an interactive map for Germany a few years back that was done in Flash and we encountered all of the same issues you mention. Would have loved to have had this solution then - but going forward, I would built custom maps ala the method you have shown here.
Thanks again for the tutorial.
Dmitri
Hey! Nice!
But there is one problem.
The div with id 'containershadow' (with the map) is below than normal. I see big white space with shadows detached on the right and than the map-container itself.
I'm using FF 3.0.7 on Mac.
Jason
This is pretty cool, good job. Although I would have saved myself the headache of browser testing etc. and just do it in Flash :)
Brian Lang
Has the plugin been released? Where can I get it?
I've got an outstanding request for one website to build an interactive map, but it's been put on the back burner for a few months. Perhaps this may be what they're looking for. Can you send me a copy of the demo?
Thanks.
Joel Sutherland
Brian,
The plugin has not yet been released. I am hoping to wrap it up this week. I'll post it on the blog along with some instructions when I am finished with the writeup and testing.
Geoff
Hey there, really really nice alternative to a flashed based solution, would love a copy of the demo files please also. cheers!
Jamie
Nice job.
i wonder,where i can get that plugin and example ??
can someone tell me?
i really appreciate.
Thanks.
Bonnie
Joel,
Great stuff! Are you releasing the plugin this week? I showed a client the example b4 reading you hadn't released it yet - so now I'm sitting on pins and needles ;-)
jamie
i'll be waiting until your plugin released.
Thanks Joel..
Renee
@Mike D: I stay away from Flash now because it still has a bad reputation in the accessibility world and, yes, it can be made accessible, but it's still a large pain in the ass to do so, and still only degrades semi-gracefully. And when a tool with jQuery is already packaged into major CMSes, why not use it? jQuery code is far more transparent to future developers, it doesn't require buying any more Adobe products, and it's WAY easier to restyle. It's also a lot faster if you make good use of its AJAX capabilities than loading a Flash file, even if in-browser performance isn't (but honestly, I can't tell the difference without looking at benchmarks, and neither can users, ftmp). And it's not confined to one zone on the page, so it's far more flexible... So there are some more reasons to head away from Flash as a development tool.
I've been using, and hating, Flash for years and jQuery was like a summer breeze blowing open the curtains. :)
Ditto on the breathless anticipation of the plugin, I already have a map in mind =)
Cato
Wow, this is excellent, would love to see a demo zip if possible?
Davor
Great work. Is this available as plugin perhaps, or a zip file, I could really use it about now. :D Sry for asking like this but everyone has allready.
kotnik
Really nicely done!
Just started to do similar map, and I'd really appreciate if you could send me demo zip, as well.
Thanks.
Tim Brown
Awesome! Jquery rules.
Could a Demo zip be sent (or posted on this entry)?
ChevignoN
If you want to extract the code, you can use Firebug, it is an extention of firefox.
I'm testing the map, and it work very well.
Mark
Great script! but could you please send me the code? I can't really figure out why the bullets wont load when I put all the script together myself =S
Tonka
Hi,
great script. Is there any chance to have the zip file?
Ryan Mawhinney
@joel
Hi I am trying to design a Jquery Interactive Map using the same technique you used for the NC Marine Science as I am planning on integrating it for my University Major Project. I am having a bit of trouble getting the map loaded at the start. Would it be possible to be sent a Demo.zip of the file to help me get started. Thanks Ryan
chris
Hi Joel, awesome work with the interactive map and it's inspired me with my mapping project. Any possibility to email me the zip file too? Thanks!
Nathan Fried
Hey Joel,
I am new at a lot of stuff here.
Call me stupid but Im confused as to where you put the info that pops up on the info box when you click a dot on the map.
I used firebug to look at it more closely but just couldn't figure what file I should stick that in???
Looking at the jquery, css, and html... I can understand where and how this works but...
where does that info for the pop up box go???
~Nate
Nathan Fried
From the looks of it, I think you stick all the pop up" descriptions in "inner HTML".
But when looking through your source code, I can't find the description of say..."East Carolina University"
Running firebug, I do find it but Im so confused as to where to put that info!
God I hate being such a Novice at Web Development.
Maybe it would be good for me to just look at the .zip files??? Email them to me pleeeeaaaase???
Thanks again,
~Nate"
Rad
Great work. Could you please send me demo zip.
Thanks,
Rad
Sheereen
Awesome work, is it possible that you send me a zipped demo or something?
Bage
Wow... It is actually great... I am planning to develop a map for my town. Is it possible to get a demo in a zip file?
Thanks
Bage.
marco
Hello Joel.
Impressive indeed.
If you have time, would you be able to send me a demo.zip?
Thanks.
Justin
Hey Joel,
Amazing jQuery mapping project!, for a school project i try to make a interactive map for a dutch festival (Lowlands) (for mobile phones).
Also got the same question :).. Would you be able to send me a demo copy? Would be great if i have an example of how this could work!
Thanks!
Justin.
cialis
Perfect work!
Jeremy
Great work! I am looking to do something similar, and if I can get a head start rather than starting from scratch that would be great.
I see a post about a reusable component to be released 'in a few days'. Has this been released yet? Or can a person get a peek at the source for the existing demo?
Keep up the good work!
cialis
Perfect work!
Lauren Egan
I am in love with this map! I am working on a project where this would be more than perfect. With your permission, can you send me a demo.zip? I can e-mail more details on the project separately.
Thanks!
Lauren ^__^
RIchard Dyce
It's a work of genius man! IT's so nice to see a GIS interface that is a googlemash. Can I add my name to the list of people requesting a zip file?
ZK@Web Marketing Blog
An alternative to Lightbox and its various clones, with the sole purpose of displaying images: One or more thumbnails point at the full resolution image, and instead of displaying that image on a new page, its displayed, above an overlay, on the current page.
Pratik
Hi,
Its really great work. Its so lite n smooth. Thanks Joel.
Somebody Help me out for problem....
The given example runs fine on my PC... but when I uploaded it to server (Linux), the bullets did not appear. uploaded examples link is http://www.ushawoods.com/test/u2/example.html
Thanks
FocusWithJava
I love this community's willingness to share.
I would love to implement this for one of my local outdoors organization, for a location guide that will list Hiking, Backpacking and Kayak trips. My data set will have similar clustering around various state parks and waterways. But I may need a 3rd level of zoomable regions (ex Adirondack). Oooh.. I am getting all excited.
Please add me to the list for the ZIP file. Gota itch that I got to scratch.
FocusWithJava
Thanks for making that ZIP file accessible at
http://www.newmediacampaigns.com/blog/category/jQuery#zip
PS: great work
Monica
I am having the same problem as Pratik (July 4 comment). What is the trick? Thank you so much for any suggestions you can provide. Monica
Joel Sutherland
The plugin post for this project has information about the issue Pratik had:
http://www.newmediacampaigns.com/page/a-jquery-plugin-for-zoomable-interactive-maps
"The AJAX/load uses GET or POST to retrieve the popup files. So the file extension used has to be what's allowed (.aspx, .php) on your server to accept these requests."
kilinkis
lovely!
Eerk
Great looking project! Congrats!
I would like to mention the fact that a flash file can work with a CMS or even google maps in exactly the same way that javascript can!
Eric Di Bari
Great tutorial. I'm always looking for ways to avoid using flash. Also, I've become a big fan of jquery. Thanks.
Ian Huet
I recently completed a somewhat simpler implementation of an interactive map using JQuery and a HTML Image Map rather than Flash. I am very happy with the result.
http://www.workwithchoicecuts.com/methodology/revisiting-the-html-image-map/
The discussion above JQuery performance versus Flash smoothness is an interesting one. For me though, JQuery beats Flash hands down every time for the simple fact that it is part of the page rather than a proprietary black box sitting on top of the page.
Props to you guys for a project beautifully completed.
david stranack
hey,
this map is AWESOME, I have tried to make a start using your logic but as a newbie I'm not getting very far, could I please have a demo.zip as well??
THIS TUT ROCKS!!!
Phoon
Hi Joel,
Impressive project with the nice detailed map.
Would it be ok to send me a demo zip too?
Greatly appreciated.
Thanks
Bret Bouchard
This is gonna be a fun lil toy to play with. It will be nice to use for mobile site, especially iPhone where i always hate having people jump out of the page to explore a map in the Google maps doc.
wespai
nice collect it to http://ajax.wespai.com
Alan Crissey
Hey, this plugin is great. Just yesterday I was given to task of porting some Flash maps over to HTML and this is a near perfect solution. Thanks for your work.
One question - is there a way to reference the 'bullet' links outside of the map? I have a list of locations to the side of the map and on the old flash version, you could both click on the map and the name in the menu to trigger the popups. I'm not that great at javascript and I'm not quite sure how to accomplish this. Any ideas?
Sean
While the map looks good and functions well, I think it is a stretch to call it "interactive." You really cannot do anything on the map except click links. If that is the threshold of obtaining an "interactive" label, then doing all of this with an image map would qualify.
For me, interactive requires me to be able to do something other than just click. Something as simple as pan and zoom in particular will get you there.
And while I don't think that you would need to put something like this in a Flash map, I have to agree with someone above me who pointed out that all of your arguments against using Flash just don't hold water anymore, and didn't for a while even at the time of this post. While I certainly am not a Flash advocate, I absolutely hate when people spread misinformation about a technology that has some true benefits.
Still, as I said, it is a good looking map.
Joel Sutherland
Sean,
If you click one of the highlighted areas the map zooms. This is why I used the word "interactive".
Dejan Web Dizajn Artist
This is awesome! Wow! :)
Alan
Hey Joel, your map has worked great for me. Do you know of any way to make outside links interact with the map? Such as a list of locations that, when clicked, do the same thing as clicking on the points on the map?
Thanks!
Joel Sutherland
Alan,
You could do something like this:
$('#someOutsideLink').click(function(){ $('#bullet-point').trigger('click'); });
Alan
Thanks Joel, worked perfectly!
Cassie
Joel,
This looks great!
Could you send me a demo zip as well?
Thanks much!
Fancy
Very great work! wonderful!
Priyanka
Amazing work!! Could you share the code zip?
Thank you.
Miami Web Design
Erik
Erik
Jan Hanak
stephan
Really Fantastic Work. Just what i need.
I would like to be able to build a 3rd and 4th level...
Here is what i did using the Raleigh interactive map...
map: {
id: '0',
title: 'Triangle',
image: 'images/image.jpg',
maps: [
{
id: '1',
parent: '0',
image: '../images/1.jpg',
data: '../popups/1.html',
width: '350px',
height: '235px',
top: '0px',
left: '0px',
maps : [
{
id: '3',
parent: '1',
image: '../images/3.jpg',
data: '../popups/3.html',
width: '100px',
height: '100px',
top: '100px',
left: '100px'
}
]
},
.....
The 3rd image appears quickly before disappearing and i can't click on it to zoom!
Maybe a z-index error?
What do you think about that?
mandy
Please advise.
Guga
Excellent job. Elegant work.
I´ve been tring to apply it in a site about museums. Everything is fine, except for Google Chrome: the yellow boxes (highlights) doesn´t appears.
Any suggestion?
Thank you.
Matt
Mike
joy
Mark Pinkston
http://www.aarp.org/work/job-hunting/info-07-2010/pain_index.html
http://www.aarp.org/health/medicare-insurance/info-12-2010/medicare_beneficiaries_percentage_2010.html
Thank you
StronyKraków
Thanks!
Nishant Prajapati
Sue
just trying to make your interactive map work but no luck...the map does not show up when tested on a live server...?
http://www.digitalmake-up.com/staging/testing.html
how do I get your concept to work?
Sue
Great plugin....Bravo!!!
sandeep kumar bhatt
Danja
First of all, great map!
I am hoping to get it to work for the new Georgia Tech student center facilities map as part of my lowly college student job...
I have been trying to come up with a way to integrate the map highlight functionality (this jquery plugin: http://plugins.jquery.com/project/maphilight) with this map so that regions highlight on mouseover before they are clicked.
Unfortunately, the map highlight code uses the idea of an "image map" to a letter (it uses an image instead of a div with an image as a background), thus making it difficult to integrate with your interactive map, which is contained in a div. Do you have any suggestions?
I have the two scripts working separately just fine, just can't find a way to mesh them together!
Thanks,
Danja
Mike Guenther
How would the code look for this?
thanks!
MG
kgvr
siavash
Jose
ahmed
thankss
ixago
Is that possible to add icons on this maps to represent informations like POI ?
Thanks for your answer
Jacksonville Town Center
Elias
Peter Schmalfeldt
Mike
Ricardo
Thanks
Ricardo
Sam
Leave a Comment