Home >> Roundups >> 10 Great Examples of Web Design Using Interactive Maps
10 Great Examples of Web Design Using Interactive Maps

10 Great Examples of Web Design Using Interactive Maps

Incorporating interactive maps into your site’s web design is a great way to draw the viewer in to spend more time on your site, while sharing location-specific data at the same time. The following are ten prime examples of sites that use interactive maps to their advantage.

1. Crime Mapping

Choose a state or sheriff’s department to view an interactive map of the crimes committed in that area. The maps are available on the main website or via a corresponding app. Crimes are coded with descriptive icons from assault to burglary, which is both fun to browse and informative for local residents.

crimemapping

2. Into the Arctic

Greenpeace’s stunning Into the Arctic site has an interactive map feature showcasing “villains” in the region. You can click on the icons to see where global oil companies are drilling, along with a brief description of the company’s history in the region.

into-the-arctic

3. OldSF

This site uses images from the San Francisco Historical Photograph Collection, which are geocoded to appear as dots on a map of the city. Using a simple search tool and map layout, it allows history buffs to explore 13,000 photographs on a virtual tour of the city.

oldSF

4. Provence Festival

This interactive map lets you bob above the city of Marseille as soothing music plays in the background. You can click on any of the city’s iconic sights and then be taken to a short video and photograph of the location in question, along with an artist’s interpretation of it.

provence-festival

5. Best of British Music Map

All of the artists that have been featured on the one-hour radio show “Best of British Unsigned” are displayed here on the map, notable for its clean, chic layout. You can switch between artists or radio stations to find new music.

best-of-british-music

6. Odopod

The San Francisco web development and digital agency Odopod uses a standout interactive map on their Contact page, showing their office’s location as well as nearby bars, transportation links, and other areas of interest.

san-francisco-development

7. Rate My Area

A combination of review site and social media network, RateMyArea.com allows users to post reviews on their interactive site map, and share with others in their social networks. It also allows you to receive discounts depending on the location you’ve been sharing in, for multilevel geo-targeting.

rate-my-area

8. Protected Planet

Set up by the World Database on Protected Areas, protectedplanet.net allows users to browse or search for specific protected areas, both on land and at sea. You can explore the maps to find protected refuges in your area, learning more about them through text and photos when you click on the map.

protected-planet

9. SANGIS Parcel Lookup

Learn more about different parcels of land with this example of interactive web design San Diego. The website is maintained by the San Diego Geographic Information Source and allows you to look through different layers of the map, according to district, place, or ecology.

sangis-parcel-lookup

10. The Global Transition

Mapping instances of the global transition to a “new economy,” this map is perfectly melded into the site’s design and is broken down according to categories. It’s easy to navigate and provides useful information about sustainable trade initiatives worldwide.

the-global-transition

 

Ultimate Designer Toolkit

About Web Design

I am the owner and main person behind WebDesignDev. I blog about all kinds of web design topics.

One comment

  1. Robert Davis

    British Music Map is a great idea! Truly, now so many ideas helping to see things at another angle!
    Got much pleasure reading the article! :)

Leave a Reply

Your email address will not be published. Required fields are marked *

*

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

10 Great Examples of Web Design Using Interactive Maps