30 Superb Examples of Infographic Maps

Oct. 20, 2009  |  Data Visualization  |  42 comments

As you search the web you’ll come across a wide range of interactive and graphical maps.

Deciding when, where and how to integrate or display a map on your site is the first step, the second should be what technology and illustrations to use.

If you’re all about interaction, JQuery, Ajax, or Flash are all effective technologies that hold their own ground.

Map illustrations are a dime a dozen however, a strong and balanced display of graphics, information, and colors is what makes an infographic stand out and reach its target audience effectively.

As designers, we’re constantly searching for ways to improve and style our designs, this is exactly what the following 30 infographics and sites display below; the breaking of rules.

 

Sites with Interactive Maps


Illustrative Infographics


Compiled exclusively for WDD by Liz Fulghum.

Did we miss any great examples? Please post them in the comments’ area below…


SHARE THIS POST
RELATED POSTS

30+ inspiring sites to spark your creativity

50 Free Rusted Metal Texture Backgrounds

Create a stunning menu in CSS3

COMMENTS
  • http://www.clarkedesign.co.uk Sean Clarke

    Nice — all I need now is to learn how to draw maps !

  • Evan Jones

    I love info-graphics like these! Such a beautiful organization of data :)

  • http://www.jadgraphics.net Jad Graphics

    Great examples. I recently wrote a blog post about infograpics as well. They are awesome!

  • http://prandall.com Paul Randall

    As a visual learner, these are great, and much more interesting than tables and pie charts!

  • http://www.moinid.com Most Interesting Ideas

    Cool maps

  • http://www.squiders.com Web Design Maidstone Kent

    Wow, what a great way to display info, I remember doing demographics using a 3d uk map, took forever but looked great… site no live anymore though which is a masisve shame!

  • http://www.gregprogramming.com Greg

    Amazing Maps!!!!
    This can really bring clarity to information in a way charts just cannot

  • http://www.newmediacampaigns.com Joel Sutherland

    Here is a link to a writeup on the second map. It was done entirely in jQuery and is driven by a CMS:

    http://www.newmediacampaigns.com/page/jquery-vs-flash-for-interactive-map

  • http://www.istech.ie/ Web Design Kilkenny

    Thanks for putting all this together – I’m always looking for inspiration when it come to maps – trying to get away from the plain vanilla google maps.

  • http://oscarmartell.com Oscar Martell

    Wow, I´m very impresed, great recopilation. Thanks for sharing

  • Sean

    Can anyone provide a good link for the Hurricane Hugo graphic?

  • http://www.appsheriff.com App Sheriff
  • http://www.dzinepress.com Dzinepress

    really superb examples which you mention in post titile, there is all graphs fulfill requirements, me also getting idea because now a days i am also working on an project which belong to same idea and your article helping me too much.

  • http://www.ohne-schufa-kredite.de s.holstens

    Thank you for inspirating me =) and thanks for this nice collection.

  • pesho

    Thanks,these are very amazing

  • http://www.2expertsdesign.com 2expertsDesign

    LOOKS GREAT!!! really very impressive. Anyway, really enjoyed the post.

  • http://scar1337.wordpress.com Scarlett

    Beautiful maps! Makes figures less boring =]

  • http://susiaho.blogspot.com Sami Susiaho

    I cannot believe you just posted this, without including the classic example of an infographic map. Made by Harry Beck in 1933 and widely known, it also made headlines a few weeks ago, as a very important part of it was removed
    http://www.bbc.co.uk/london/travel/downloads/tube_map.html
    It is ofcourse, the London tube map and the part that was removed in august was the Thames. As the Thames is a very integral part of the map, it cannot be removed and will be reinstated. The alpha and the omega of the infographic maps, portraying just the information you need in an understandable (yet abstract) form.

  • http://www.aledesign.it aledesign.it

    Thank for this post..The firs adn second examples are so nice.

  • RoaldA

    Great stuff!

  • http://www.designerkan.com Designerkan

    Perfect Maps Thank you…

  • http://www.empfehlenswert-wien.at wien

    nice post

  • http://www.julieversum.de Julia

    Really impressive and gives a lot of inspiration. :-) The best demonstration at all – infographics don´t have to be boring! ;-) Thanks WD!

  • http://www.insidethewebb.com/ Inside the Webb

    These are some pretty cool designs, glad I checked out the post :)

  • sushil

    Link on last map’s in the list (about stock markets) is wrong, click takes to a wrong map.

    Good collection

  • http://www.nexusgeografics.com Edu

    Hi people !

    Check this site of mapping:

    http://www.cercalia.com

    We have our own API…

  • http://www.crearedesign.co.uk James

    Making a map interesting is something I know I always struggle with. This collection definitely gives some brilliant ideas, and even the tube map posted in the comments is a great example.

    I’ll be sure to check back here next time I need to be fancy with my map display!

  • http://redlemonclub.com Alex Mathers

    These are all very inspiring. I’m thinking, as an illustrator, to get into working on more infographic type stuff.

  • http://www.meganba.com NBA

    Making a map interesting is something I know I always struggle with. This collection definitely gives some brilliant ideas, and even the tube map posted in the comments is a great example.

  • SashaKa

    Having a detailed interactive map on your website is realy good marketing tool. This list is wonderful and full of fresh ideas)) only I can add is this map http://www.hiltonhead360.com/Hilton-Head-Map.html done by this guys http://www.sibers.com

  • http://www.oxidizzy.com oxidizzy

    Amazing !!! Give me an idea to make some thing like these (map) for my mini shop.

  • accessoire

    If you think that’s great then check out the website of the german agency “Kircher Burkhardt” http://www.kircher-burkhardt.com/

    Go to “Kunden” -> “Infografik”

  • http://www.styleprone.com CSS

    Very nice collection.

  • http://www.bendesign.eu/blog Grafiker

    Great Inspiration. Thank you.

  • http://www.alejandroperazzo.com/ Alvaro Hernandorena

    great!, i work with maps most times, i work as a designer in a real estate in Punta del este – Uruguay, so i do a lot of work with maps and animation.

    here is a link http://www.alejandroperazzo.com/edificiosnuevos/ that one is nice but the map doesen’t move and it has a BAD moving water effect =D

    here is another http://www.alejandroperazzo.com/clubdellago/ moving but with less animation.

    regards

  • ec
  • http://www.design-drift.com Deja

    I’m fascinated with Infographics and this is a great source of new inspiration. Much appreciated!

  • claudia

    check this one. she is an architect but she also drwas maps sometimes.
    http://s-t-a-r.nl/html/projects/Project-frameset-SM.html

    scroll down.
    i love the separatist countries map

  • Lee Chizum

    Wow. What’s the most comprehensive software, or software combo, to create great infographics?

  • http://www.emlakx.net Emlak

    Wow, what a great way to display info, I remember doing demographics using a 3d uk map, took forever but looked great… site no live anymore though which is a masisve shame

  • http://hubpages.com/hub/Japanese-Tea-Sets Jen

    The 10 hours of havok one is amazing.

  • http://www.liderpaylasim.net LiderPaylasim

    It’s amazing! Thanks for that.