http://www.smashingmagazine.com/2010/04/06/maps-in-modern-web-design/<br><br>
<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="padding: 4px; background-color: #c3d9ff;"><h3 style="margin:0px 3px;font-family:sans-serif">Enviado para você por termal12 através do Google Reader:</h3></div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="font-family:sans-serif;overflow:auto;width:100%;margin: 0px 10px"><h2 style="margin: 0.25em 0 0 0"><div class=""><a href="http://www.smashingmagazine.com/2010/04/06/maps-in-modern-web-design/">Maps In Modern Web Design: Showcase and Examples</a></div></h2>
<div style="margin-bottom: 0.5em">via <a href="http://www.smashingmagazine.com/" class="f">Smashing Magazine Feed</a> de Zach Dunn em 06/04/10</div><br style="display:none">
<table width="650"><tr><td width="650"><div style="width:650px"> <img src="http://creatives.commindo-media.de/static/smashing-magazine-advertisement.gif" alt="Smashing-magazine-advertisement in Maps In Modern Web Design: Showcase and Examples" border="0"><br> <a href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=56"><img src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=56" border="0" alt=" in Maps In Modern Web Design: Showcase and Examples"></a> <a href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=63"><img src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=63" border="0" alt=" in Maps In Modern Web Design: Showcase and Examples"></a> <a href="http://creatives.commindo-media.de/www/delivery/ck.php?zoneid=64"><img src="http://creatives.commindo-media.de/www/delivery/avw.php?zoneid=64" border="0" alt=" in Maps In Modern Web Design: Showcase and Examples"></a></div></td></tr></table><p>Geo-location was a hot topic in 2009. With so many applications on GPS-enabled smartphones, more maps than ever were accessible to the average person. But how can Web designers and developers take advantage of an increasingly location-aware user base? This article explores existing trends, conventions and the possible future of interactive maps online.</p><p>Offtopic: by the way, did you know that there is a Smashing eBook Series? Book #1 is <a href="http://shop.smashingmagazine.com/smashing-ebook-series-1-professional-web-design-intl.html">Professional Web Design</a>, 242 pages for just $9,90.</p><h3>The Fundamentals Of Online Maps</h3><p>When most people think of maps on the Internet, Google, MapQuest and TomTom might come to mind. These are the giants in the industry, but they are far from the most creative. These companies provide maps as a service. As you’ll see from the mapping applications featured throughout this article, Google doesn’t own the market. There is still plenty of room for creative map innovation.</p><p>This isn’t a lesson in cartography, but understanding the purposes that maps can serve in modern Web design is important. Three main areas seem to represent the majority of tasks:</p><ol><li>Navigation and directions,</li><li>Show relationships and trends geographically,</li><li>Show points of interest.</li></ol><h3>Interactive Maps</h3><p>The expansion of Web technology over the past decade has opened a number of doors to presenting data online. One of the most rapidly improving tools for interactive presentation is the map.</p><p>Interactive maps on the Internet <strong>present data most effectively when they invite action from the user</strong>. Showing relationships between data is easier when the user has the power to change the visuals. These are advantages that traditional print maps do not have. If a print map is not clear initially, a person can do very little to make sense of it. With online interactive maps, the simple action of moving sliders around reveals relationships between data and content.</p><p>Panning and zooming are fundamental to the interactive map. These actions enable the user to focus their browser on the amount of information that they’re comfortable with.</p><h4>No Legend Required</h4><p>On traditional print maps, the legend serves as a translator for the symbols used. <strong>Contextual windows eliminate the need for legends</strong> in many online maps. Instead of having to refer to an explanation of the symbol in the margins, the user simply clicks on a point to find out more about it. The results in fewer steps and less eye movement to accomplish the same goal. To illustrate just how intuitive this kind of action has become to Web users, try out the “<a href="http://adventure.nationalgeographic.com/americas-best-adventures/interactive-map" title="You know what to do">America’s Best Adventures</a>” map below:</p><p><a href="http://adventure.nationalgeographic.com/americas-best-adventures/interactive-map" title="You know what to do"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/points-of-interest-map.jpg" alt="Points-of-interest-map in Maps In Modern Web Design: Showcase and Examples"></a><br> <em>Clicking a dot brings up a contextual window.</em></p><p>Legends are still needed in certain cases. Heat maps, for example, display intensity by shade of color, and users usually require a reference bar to make sense of the information. Contextual menus do not make legends obsolete across the board, just for simple “points of interest.”</p><h3>Common Types Of Map Navigation</h3><p>Other than panning and scrolling, there are a number of interesting ways to present digital maps. Below are some the of the most common among modern interactive maps. Keep in mind that mixing and matching most of these methods is possible; one does not necessarily preclude use of others.</p><h4>Drill-Down</h4><p>When the user has to move through various levels of specificity of data, a drill-down style of navigation is commonly offered. The drill-down clearly groups information of magnitudes ranging anywhere from the “big picture” down to an individual case.</p><p>Google Analytics presents a drill-down style for its world maps. By clicking on a specific country, the map reorients itself to mute other countries, and then does the same at the state and city level. This allows the user to control the specificity of data without being overwhelmed.</p><p><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/analytics-drilldown.jpg" alt="Analytics-drilldown in Maps In Modern Web Design: Showcase and Examples"></p><h4>Timeline</h4><p>A timeline slider shows progress over time on a map. The slider doesn’t necessarily have to represent time itself. The main purpose is to show the correlation between the slider’s metric and the map’s content.</p><p><a href="http://www.nytimes.com/interactive/2009/03/10/us/20090310-immigration-explorer.html" title="Immigration Explorer"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/immigration-timeline.jpg" alt="Immigration-timeline in Maps In Modern Web Design: Showcase and Examples"></a></p><h4>Zoom</h4><p>This is different from the drill-down method because with zooming, <strong>the map is typically not rebuilt or reorganized for each level of magnification</strong>. With zooming, the map allows information to be examined more closely, rather than regroups data for a smaller area.</p><p>Some data may not be visible until a certain level of magnification is reached. This keeps broader views from being cluttered by details that have little relevance at that scale. An example of this is street names, which are hidden from view at the magnification shown below.</p><p><a href="http://maps.google.com/" title="Zoom in Google Maps"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/google-maps-zoom.jpg" alt="Google-maps-zoom in Maps In Modern Web Design: Showcase and Examples"></a></p><h4>Before and After</h4><p>Like the timeline approach, this one shows multiple states of the same location. The difference is that the before-and-after method shows only two states. This style has been showing up much more frequently lately, particularly with satellite imagery.</p><p>After the recent Haiti disaster, the New York Times used composite images taken from space to create an interactive map that showed the destruction. The result was a striking <a href="http://www.nytimes.com/interactive/2010/01/14/world/20100114-haiti-imagery.html">before-and-after illustration of the earthquake’s destruction of Port-au-Prince</a>.</p><p><a href="http://www.nytimes.com/interactive/2010/01/14/world/20100114-haiti-imagery.html"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/before-after-haiti.jpg" alt="Before-after-haiti in Maps In Modern Web Design: Showcase and Examples"></a></p><h4>Point of Interest</h4><p>In a point-of-interest map design, everything but the target area falls into the background. This allows the user to focus instantly on the relevant points of interest. Additional information can be conveyed by the <a href="http://www.nytimes.com/interactive/2010/02/24/world/20100224-quake-map.html?scp=6&sq=map&st=cse" title="Example map with point of interest plus scale">relative sizes of the markers</a>, making it <strong>easy to discern relationships between locations without clutter</strong>.</p><p>Odopod takes this idea a step further on its contact page by offering a photo of its office’s front. Finding the right building is now much easier.</p><p><a href="http://odopod.com/contact/" title="Odopod's Point of Interest"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/odopod-point-interest.jpg" alt="Odopod-point-interest in Maps In Modern Web Design: Showcase and Examples"></a></p><h3>Maps As Informational Tool</h3><p>The Internet and digitization of information represents an interesting improvement to print maps. Used in conjunction with surveys and user feedback, maps can become an almost real-time representation of information. With this method, comparing two metrics side by side is simply a matter of selecting the desired ranges.</p><p>The maps on National Geographic’s website illustrate how interactive maps can be used to show worldwide trends from collected data. The Earth Pulse map, for instance, has a menu on the side that allows users to display information based on metrics such as population, meat consumption and deforestation.</p><p><a href="http://earthpulse.nationalgeographic.com/earthpulse/earthpulse-map" title="National Geographic's Earth Pulse map"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/natgeo-earthpulse.jpg" alt="Natgeo-earthpulse in Maps In Modern Web Design: Showcase and Examples"></a></p><h4>From the Political World</h4><p>Location gives context to current events. It’s no surprise, then, that news organizations are visualizing world events with some of the Web’s most innovative maps.</p><p>Perhaps the most heavily mapped period of time was the 2008 US presidential election. Interactive maps were created daily to show voter opinion. Anytime a poll was released, you could be sure that an interactive map would soon follow. Because the information was tied to constantly updated data, a static map would have become irrelevant within hours.</p><p>In the heat of the race, <a href="http://cnn.ch/ELECTION/2008/calculator/" title="CNN's Election Map">CNN released a tool</a> that allowed users to assign votes and project which candidate would ultimately win. The map thus not only <em>presented</em> information, but became <strong>a tool for generating information</strong>.</p><p><a href="http://cnn.ch/ELECTION/2008/calculator/" title="CNN Electoral Vote Map"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/cnn-pick-electoral.jpg" alt="Cnn-pick-electoral in Maps In Modern Web Design: Showcase and Examples"></a><p>Once the election was over, the country’s voting patterns were mapped as well. One of the more interesting versions was the Washington Post’s map broken down by county. The map used Flash to give a full 360-degree view of election trends. The results of an entire campaign were <strong>summed up effectively in a single graphic.</strong><p><a href="http://www.washingtonpost.com/wp-srv/politics/interactives/campaign08/election/uscounties.html" title="Election 2008 County Breakdown"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/election-2008-county-map.jpg" alt="Election-2008-county-map in Maps In Modern Web Design: Showcase and Examples"></a></p><p>This is where maps tend to overlap with (or even become) infographics. The difference is in presentation and design. In the Washington Post’s map, <strong>the information was directly tied to a particular area</strong>. The data, then, would be relevant only to the context in which it was collected. A 30-year-old female voter in California is not the same as a 30-year-old female voter in New York.</p><h3>Unconventional Maps</h3><p>While the majority of maps in this article are of physical locations, don’t feel that you have to stick to that. <strong>Geographical maps are not the only kind of maps out there.</strong> Maps can also be used to explore more abstract information, not unlike <a href="http://informationisbeautiful.net" title="A collection of infographics">static infographics</a>. GOOD illustrates this with its “<a href="http://awesome.good.is/ecosystem/#/home" title="Roadmap to Harmony">Roadmap to Harmony</a>” presentation. The result is both logical and inspiringly creative.</p><p><a href="http://awesome.good.is/ecosystem/#/home" title="Roadmap to Harmony"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/good-roadmap-harmony.jpg" alt="Good-roadmap-harmony in Maps In Modern Web Design: Showcase and Examples"></a><br> <em>“Roadmap to Harmony” breaks the mold of location-based maps.</em></p><h3>The Future of Location</h3><p>Most of the maps we’ve looked at are of physical locations and buildings. The future of interactive maps will have to accommodate the role of people, too, and people are a bit more mobile than bricks and roads.</p><p>Services like <a href="http://foursquare.com/" title="foursquare">Foursquare</a> and <a href="http://gowalla.com/" title="Gowalla">Gowalla</a> are making sure that <strong>maps and location are a part of the daily lives of smartphone users</strong>. Twitter is rapidly expanding its API to include location data. Where you are at any given moment has remarkable implications. This could lead to websites that collect such data and turn it into maps that show movement and trends.</p><p><a href="http://mashable.com/2010/01/26/twitter-local-trends-now-live-for-all/" title="Local Trending Topics"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/twitter-local-trending.jpg" alt="Twitter-local-trending in Maps In Modern Web Design: Showcase and Examples"></a></p><h4>Mapping Action from Location</h4><p>Consider how many people checked in at this year’s SXSWi conference. The entire conference was mapped thanks to the location-based badges of attendees. This was more than just about individuals sporadically updating their location; it was an demonstration of how <strong>an entire event’s “personality” could be mapped based on the actions of its participants</strong>. With so many attendees checking into each event, the data could be used to determine everything from eating habits to panel interest.</p><p><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/foursquare-at-sxsw.png" alt="Foursquare-at-sxsw in Maps In Modern Web Design: Showcase and Examples"></p><h4>People-Centric Maps</h4><p>Relying on GPS only to locate buildings may soon be a thing of the past. We may begin to see contact pages of website designers that have a “Find me here now” section, complete with GPS coordinates? NFL player <a href="http://twitter.com/OGOchOCinco" title="Ochocinco on Twitter">Chad Ochocinco</a> has already taken this level of interaction to a <a href="http://mashable.com/2009/10/25/ocnn-chad-ochocinco/">whole new level</a>. And nothing is to stop the average person from jumping onboard, too (privacy concerns notwithstanding).</p><h3>A Showcase of Maps in Web Design</h3><p>We’ve covered a lot of ground today. The showcase below compiles <strong>more examples of maps for your inspiration</strong>. Thanks to <a href="http://patterntap.com" title="Design Collections">Pattern Tap</a> for making the process of searching by design element relatively painless (even though it doesn’t yet have a map section). Many of the examples below were scavenged from there and other locations.</p><p><a href="http://innovista.sc.edu/map/" title="Explore Innovista"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/explore-innovista.jpg" alt="Explore-innovista in Maps In Modern Web Design: Showcase and Examples"></a><br> Interactive map for the future development of Innovista, a massive project of the University of South Carolina.</p><p><a href="http://www.hotel-oxford.ro/en/" title="Locating Oxford Inn"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/oxford-inns-map.jpg" alt="Oxford-inns-map in Maps In Modern Web Design: Showcase and Examples"></a><br> Hotel Oxford puts its location in context.</p><p><a href="http://boston.everyblock.com/" title="Everyblock Spots"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/everyblock-spots.jpg" alt="Everyblock-spots in Maps In Modern Web Design: Showcase and Examples"></a><br> EveryBlock displays city news as point-of-interest markers.</p><p><a href="http://www.cubancouncil.com/" title="Cuban Council"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/cuban-council.jpg" alt="Cuban-council in Maps In Modern Web Design: Showcase and Examples"></a><br> An exaggerated rendering of building location.</p><p><a href="http://www.kurtnoble.com/contact/" title="Kurt Noble"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/kni-maps.jpg" alt="Kni-maps in Maps In Modern Web Design: Showcase and Examples"></a><br> KNI uses maps to show studio locations.</p><p><a href="http://www.v-s-p.net/contact.php" title="Victoria Star Promotion"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/victoria-star-3d.jpg" alt="Victoria-star-3d in Maps In Modern Web Design: Showcase and Examples"></a><br> Even if not perhaps to scale, Victoria Star’s map provides all the information you would need to find the company.</p><p><a href="http://www.arcinspirations.com/leeds-bar-locations.php" title="Find Our Bars"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/arc-inspiration-locations.jpg" alt="Arc-inspiration-locations in Maps In Modern Web Design: Showcase and Examples"></a><br> A rough guide to finding bars.</p><p><a href="http://awesome.good.is/features/011/Wanderlust" title="GOOD Wanderlust"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/good-wanderlust.jpg" alt="Good-wanderlust in Maps In Modern Web Design: Showcase and Examples"></a><br> This one explores the routes of famous expeditions.</p><p><a href="http://teachingjobsportal.com/" title="A jQuery powered interactive map"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/teachingjobs-jquery-map.jpg" alt="Teachingjobs-jquery-map in Maps In Modern Web Design: Showcase and Examples"></a><br> A jQuery-powered map of open school-teacher positions.</p><p><a href="http://www.worldofwarcraft.com/wrath/features/northrend/worldmap.xml" title="A map of the fictional World of Warcraft"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/world-warcraft-map.jpg" alt="World-warcraft-map in Maps In Modern Web Design: Showcase and Examples"></a><br> An interactive map of the fictional World of Warcraft.</p><h3>Build Your Own</h3><p>Looking to generate your own map for a project? While JavaScript and HTML5 have come a long way, <strong>Flash-based alternatives like <a href="http://www.ammap.com/" title="amMap Product Page">amMaps</a> still offer some of the most robust solutions for interactive mapping</strong>. Almost every map mentioned in this article could be built using this (or a similar) system.</p><p><a href="http://www.ammap.com/" title="amMap Product Page"><img src="http://media.smashingmagazine.com/cdn_smash/wp-content/uploads/2010/03/ammaps-sample.jpg" alt="Ammaps-sample in Maps In Modern Web Design: Showcase and Examples"></a></p><p>If you’re looking for a non-Flash alternative, Carsonified recently published a great <a href="http://carsonified.com/blog/dev/making-interactive-maps-with-jquery/" title="Mistakes Were Made: Making Interactive Maps With jQuery">case study on using jQuery for interactive mapping</a>, which explains the process. Know of any other Internet-based mapping systems out there that designers should know about? Share a link in the comments below.</p><p><em>(al)</em></p><hr><p><small>© Zach Dunn for <a href="http://www.smashingmagazine.com">Smashing Magazine</a>, 2010. | <a href="http://www.smashingmagazine.com/2010/04/06/maps-in-modern-web-design/">Permalink</a> | <a href="http://www.smashingmagazine.com/2010/04/06/maps-in-modern-web-design/#comments">35 comments</a> | <a title="Bookmark in del.icio.us" href="http://del.icio.us/post?url=http://www.smashingmagazine.com/2010/04/06/maps-in-modern-web-design/&title=Maps%20In%20Modern%20Web%20Design:%20Showcase%20and%20Examples">Add to del.icio.us</a> | <a title="Bookmark in Digg" href="http://digg.com/submit?phase=2&url=http://www.smashingmagazine.com/2010/04/06/maps-in-modern-web-design/">Digg this</a> | <a title="Stumble on StumbleUpon" href="http://www.stumbleupon.com/submit?url=http://www.smashingmagazine.com/2010/04/06/maps-in-modern-web-design/">Stumble on StumbleUpon!</a> | <a title="Tweet us!" href="http://twitter.com/home?status=@tweetmeme%20@smashingmag%20Reading%20'Maps%20In%20Modern%20Web%20Design:%20Showcase%20and%20Examples'%20http://www.smashingmagazine.com/2010/04/06/maps-in-modern-web-design/">Tweet it!</a> | <a title="Bookmark in Reddit" href="http://reddit.com/submit?url=http://www.smashingmagazine.com/2010/04/06/maps-in-modern-web-design/">Submit to Reddit</a> | <a href="http://forum.smashingmagazine.com/">Forum Smashing Magazine</a><br> Post tags: <a href="http://www.smashingmagazine.com/tag/showcases/" rel="tag">showcases</a><br> </small></p></p></p></div>
<br>
<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="padding: 4px; background-color: #c3d9ff;"><h3 style="margin:0px 3px;font-family:sans-serif">Coisas que você pode fazer a partir daqui:</h3>
<ul style="font-family:sans-serif"><li><a href="http://www.google.com/reader/view/feed%2Fhttp%3A%2F%2Frss1.smashingmagazine.com%2Ffeed%2F?source=email">Inscrever-se no Smashing Magazine Feed</a> usando o <b>Google Reader</b></li>
<li><a href="http://www.google.com/reader/?source=email">Começar a usar o Google Reader</a> para se manter facilmente atualizado sobre <b>todos os seus sites favoritos</b></li></ul></div>
<div style="margin: 0px 1px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>
<div style="margin: 0px 2px; padding-top: 1px; background-color: #c3d9ff; font-size: 1px !important; line-height: 0px !important;"> </div>