Examples of Interactive Maps on Websites

Bringing data to life with interactive maps

By Emily Allred on January 13, 2020

Interactive maps are a great website asset to organizations with a large geographical reach.  A map of any type does a great job of showcasing the scope of a group’s work, their influence, and their success. Making those maps interactive adds another element of engagement and functionality to the display.  We have built dozens of interactive maps for different clients; nonprofit website designs often use them to show the distribution of projects across the world, whereas corporate sites usually leverage them to demonstrate offices setup across the globe.

When working with clients to design and build interactive maps, we understand that there is no “one size fits all” solution.  We work with each client to determine what the map should convey, provide insight on how it should be visually displayed, and implement various integrations to help power the map with data.   

When deciding on approach, much of the process involves us sharing various examples with clients. This helps them to determine the functionalities they like, get ideas on how to present data, and see what aesthetic designs they are drawn to.  Three things we like to establish upfront to help guide the approach are:

  1. Should the map just represent a single data type (e.g., projects), have different data types represented on the same screen (e.g., past projects and current projects), or a toggle to let visitors get different views?  And what is the data that should be displayed?
  2. What will power the data for the map and how frequently will it change?
  3. Should there be pins on the map to represent different individual locations or should the map represent the data in a different way?

While there are a number of other details to consider during the design and build process, these initial questions help everyone to gain a high level understanding of what data should be displayed, how the map should look, and the method to get the data onto the map. 

In addition to guiding the design, these details also influence how the map will be built.  We always work to enable clients to be able to control and manage the data on their map.  The development and maintenance approach is largely guided by the data being displayed and the desired functionality of the map.  Often times, we'll be able to set it up so the interactive map can be controlled directly through the Content Management System, such as WordPress, that the site is built on.  Editors can input the content into the CMS and then assign pins an address or location. 

For more complex datasets or those that rely on third-parties, a Spreadsheet can also be a viable option.  Clients can upload their spreadsheet of data to a specific place or we can even connect live to a Google Sheet and power data directly from that as it's edited.  Sometimes this approach is easier than a CMS-powered solution when dealing with hundreds of datapoints that are maintained elsewhere.

We always work to design and develop interactive maps based on the goals and needs for that particular project, yielding a large variety in the types of maps we build.  Below is a list of some of our favorite maps. Some of these were built by us, and others are great examples that we’ve encountered across the web. We like to share this list with clients to help them hone in on what they would like.

 

International Women’s Media Foundation

First on our list is IWMF’s program map (an NMC project). This map utilizes location pins to highlight the various countries that IWMF journalists have worked in.  Once a user clicks on a location pin, a lightbox appears and displays additional information like past reporting trips, journalist biographies, and program information.  

 

IntraHealth International

IntraHealth’s “Where We Work” map (an NMC project) is another great example that showcases the breadth of an organization’s impact.  Through a color-coded system, this map highlights the countries in which IntraHealth has established programs and also reflects the other countries that they have worked in.  When a user clicks on a “Featured” country, they are taken to that country’s dedicated page to learn more about the work that is being conducted within that country.

 

Fleet Feet

Fleet Feet’s interactive map (an NMC project) showcases the 180+ franchise locations that the major retailer has around the United States.  Powered by Mapbox, each pin on the map represents a Fleet Feet franchise store and once a user clicks on it, it provides a popup that contains valuable store-specific information for customers.

 

North Carolina Community Foundation

This interactive map reflects the different counties that NCCF serves (an NMC project).  The North Carolina state map has a legend that details the different colored counties.  Although users can interact with the map by simply clicking on the county tiles, they are are also able to filter the map based off of eight different regions.  North Carolina has 100 counties, which could be overwhelming to review at first glance. But with this filter option, users are able to focus-in on a particular region within the state to learn more about the resources that are available to them. 

 

Duke Global Health Institute

Although Duke University is based in Durham, North Carolina, they have a global reach through their various programs.  The Duke Global Health Institute site (an NMC project) features a world-wide map that allows users to filter by research projects, student projects, or education and training, in addition to viewing their entire reach.  With each filter option, the associated countries filter through various colors to showcase their presence. Additionally, each individual pin details the location’s name while the individual country tile takes users to a dedicated page that details the work going on within that country, applicable news, and research topics. 

 

Cornell University

Cornell University has a very unique map on their site.  The purpose of this map is to show the impact that Cornell University has made within communities across the state of New York.  When clicked, each pin within the map showcases a different research initiative that is based in that specific part of the state.

 

Duke Energy Outage Map

Duke Energy serves thousands of customers across five different states.  With such a wide reach, their interactive outage map is a great resource for all of their customers.  

Before customers are taken to the map, they are first prompted to select the state they reside in and then they have to select their account-type.  From there, users are taken to a map that displays the appropriate information depending on their state and provider. From this point, they can then focus in on a specific location to see the amount of active outages, customers that are without power, when the outage was reported and the cause of the outage, in addition to the anticipated restoration time - wow!  

This map does a great job of taking users to the information that is specific to them and then providing essential information in a digestible and informative way.  

 

Lee and White

Lee + White is a 23-acre warehouse development located in Atlanta, Georgia.  Currently, Lee + White buildings house breweries, restaurants, retailers, and a few food manufacturers.  Additionally, the impressive property features more than a half mile of frontage along the Atlanta BeltLine with direct access to the trail, sounds like an entrepreneurs dream, right?  The map on Lee + White details current occupancy and vacancy space for potential businesses. In addition to highlighting the space available within the warehouses, the map displays information regarding surrounding businesses, streets, and beltline access. 

 

WeWork

WeWork is a company that provides coworking space for individuals all around the world.  At first glance, users see a global map view that details the number of locations WeWork has around the world.  As users click through the various pop-ups within the map, the map takes users to a more specific location based on the pins they selected. 

 

Impossible Foods

Although this map functions like a lot of the others on our list, it is visually very different.  Impossible Foods’ map plays with bold font and colors, which is consistent with their overall brand.  

Similar to WeWork’s map, users are shown a national view of Impossible Food’s locations to really showcase their presence within stores.  Like most interactive maps, users are able to zoom in and out to find the information that is specific to them. However, as users continue to narrow their search, the map showcases more and more features like lakes, national forests, and metropolitan city grids. 

As you can tell, there are endless options when it comes to interactive maps.  They are a great resource and display of information for all industries and businesses.  If you are wondering how an interactive map could be incorporated onto your site, drop us a line and we’ll brainstorm together!

Leave the first comment