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