• 20 Oct

    30 Superb Examples of Infographic Maps

    Data Visualization, Design, Infographics

    View 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…


    Related Posts

    25+ Useful Infographics for Web Designers25+ Useful Infographics for Web DesignersA Showcase of Watercolor in Web DesignA Showcase of Watercolor in Web DesignArchitecture vs. Web DesignArchitecture vs. Web Design

    • 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.

    blog comments powered by Disqus

Home| Advertising| About| Contact

© 2012 All Rights Reserved