Tag: mapping

More than just a digital analogue of our road maps of old, digital maps can transcend serving as interface devices and become vehicles for data visualization and powerful visual storytelling. I’ve worked with teams to develop rich, multi-dimensional data-driven maps that engage viewers in historical events and citizen science observations across both time and geography.

In one project, I helped a Digital Humanities team bring historical literature to life, stepping through a timeline-based tour of London with the characters in Daniel Defoe’s A Journal of the Plague Year. In another project, I supported the nonprofit Journey North, leveraging their 25-year—and ongoing—database of observations and sightings, allowing viewers to compare species’ migration patterns or arrival, departure, and emergence dates.

The majority of digital maps you encounter depend upon one of those map providers listed above. There’s simply too much overhead in hosting your own map tiles on a performant server that can respond to all those requests as users pan and zoom. It can be done, but unless you can allocate resources to maintain a responsive map server, it’s better left to the professionals and platform providers. Which one to choose?

If you’re working on a nonprofit project trying to make the most of your budget, I’d like to share the toolkit I’ve put together, which leverages robust, developer-friendly APIs, open source libraries, and free-for-non-commercial-use service plans.

Choosing a direction

Before looking at which combination of platforms and services provides the most mileage, I established an important distinction in the types of maps we were producing and the support we would need.

As you navigate a digital map at a particular zoom level, your web browser is continually loading square-shaped images—map tiles. If you change your zoom level, in some cases you receive a whole new set of map tiles. (This may not be true in many cases today, where map images are vector images rather than bitmap, but is typically true for those described here.) Some of the more detailed maps you see merge your visual data into those sets of map tiles. For large datasets and one-time projects, this can result in a much more performant map, as the browser is not rendering a multitude of markers using JavaScript, and can empower a greater level of control over your map design, or integrated map and data visualization styles. Those benefits come with a price, though. If you use a service like Mapbox Studio or ArcGIS to upload data and design and generate map tiles, you’re dependent on that service to host those map tiles on a server that can respond to requests to zoom and pan those tiles. That service necessarily costs money.

In contrast, the maps I’ve worked on plot data on a standard map as markers (or pins, or shapes, or paths). In the Digital Humanities project (“Itinerary“), this is all that was needed. We also went this route with the Journey North data for a number of reasons, including but not limited to pricing considerations. We do have maps that feature more than 3,000 pins, which is something of a performance threshold. Things start to lag when you exceed that volume of markers and flattening your data points as map tiles mitigates that overhead. But our maps feature real-time data every season, with the latest approved sightings appearing on maps as those sightings are posted. Periodically manually uploading data to generate map tiles to render snapshot maps was not logistically realistic.

Thus I make a distinction between two categories of maps: custom maps whose map tiles must be hosted on a paid-for platform, which have their place and offer many benefits, and “live” maps, where we’re plotting points, shapes, or paths on standard maps, writing JavaScript code to leverage a provider’s API. Here, I focus on the latter.

Bring your own data

Your map-making journey begins with data: data residing in a database you have access to; data that you’ve compiled from other sources; or data that you’re recording to display in the future or in real time. The only real requirement to put that data on a map is that each data point has latitude and longitude values, or a corresponding set of latitude and longitude coordinates to define a path or shape. Data points in the maps I’ve worked on also include dates, which we use to render those points on a time scale. Because these data points represent a location at a specific time, I call our data points events.

In both the Itinerary and Journey North projects I’ve process data to output it in the GeoJSON format. Because our data points—events—have additional properties, they’re formatted as feature objects in GeoJSON. We can store any additional data attributes as properties for each feature object, allowing us to pass image URLs and comments for the popup; date and time values for our timeline; and design cues to our map layer.

Our use of GeoJSON on the Itinerary project was limited to reference files we manually created to define the boundaries of parishes or paths taken, which a corresponding event would light up. We used Jekyll to generate the shell of the map application, and looped through CSV files to generate JSON data files that we looped through to create markers on the map or to highlight a corresponding parish.

Journey North maintains a fairly simple sightings database, containing latitude and longitude, sighting date and time, comments, and image URL data for each sighting event. When we fetch that data, we format it for transmission as GeoJSON in PHP before handing it off to our application’s JavaScript for rendering on our maps. Our JavaScript code does not leverage any automatic GeoJSON functions in our mapping library of choice, but using a recognized, widely-embraced format for our data means it’s ready for sharing via API with others in the future, and that the tools we’re building have adopted an existing, common language.

Because we’re using JavaScript to interact with a mapping API and put events on a map, your data will need to be consumable by JavaScript. JSON is a logical choice, and GeoJSON is a lightweight standard for mapping applications.

Making your map

Your map application is comprised of JavaScript leveraging a library that can interact with one of the map providers’ APIs.

If Google Maps API was completely free and not subject to pay-as-you-go pricing thresholds, I might be compelled to go that route despite my reservations about placing all our eggs in Google’s basket. But I think there are better choices out there, from providers dedicated to developing and supporting mapping platforms, and have been rather determined to make those work. Ultimately that mission paid off for Journey North from a pricing perspective as well. (Note: We replaced a number of legacy Google Maps API dependencies for geolocation and location picker tools from Journey North in 2018 with the following solutions to reduce costs due to pay-as-you-go. Journey North receives many map views, and API hits for associated services, during peak season updates.)

Esri‘s offerings were suggested for Journey North, as they’re well-established in the scientific and GIS communities. I’ve always been a big fan of Mapbox and recommend reading their values statement.

Which came first: Choosing a mapping platform compatible with the library you like, or choosing a library compatible with the mapping platform you’ll use? In our case, it was a little bit of both, and we ended up with something of a combination of Mapbox and Esri offerings.

To put Journey North’s data on the map, we use the open source Leaflet.js library. I’d previously worked with Leaflet.js using a Mapbox base layer on the Itinerary project. I consider Leaflet.js to be most closely associated with Mapbox, as that is where its developer is based, but you can specify base layer maps from other providers. We use Esri’s Esri Leaflet plugin for Leaflet.js to instantiate our Esri basemap layer. It is via the Esri Leaflet project’s Terms of Use that we were able to identify it as a developer-friendly free option. The combination of Leaflet.js—a robust, well-documented, “open-source JavaScript library for mobile-friendly interactive maps”—and Esri’s free base layer maps gives us a full-featured, free package to support Journey North’s mapping application.

This is the “live” map route I outlined above, where data is plotted directly on a standard map instance using JavaScript. This enables Journey North to feature the latest approved data in real time. We’re also able to slice that data into date intervals that we load in layer groups on the map so that we can scrub a timeline back and forth to rewind and advance the story of a species’ migration or the advance of a season. The Itinerary project similarly revolved around a timeline that one can step through or play to see the story unfold.

Charting a course

Exploratory projects like Itinerary, accessed by a smaller audience, can fly under the radar when it comes to pricing, with any of the mentioned platforms at your disposal as long as one is willing to put a credit card on file. As is often the case in web and application development, though, the choices we make tend to comprise our go-to toolkit—we become well-versed in those platforms and libraries we choose for our first project and they facilitate our efforts in the future, along with efficiencies that help us work effectively amidst budget and time constraints.

The toolkit I’ve outlined here has served Journey North well, supporting a few hundred thousand views a month during peak sightings season. As any nonprofit can relate to, Journey North is under continual pressure to do a lot with a little, and while maps are a cornerstone of the website and community, there are other priorities and objectives. Saving money on recurring expenses and third party services affords more time to work on enhancements and optimization.

Where there are limitations, as with performance on high volume maps, there are options. If custom map tile maps are not viable, many in the mapping community recommend clustering pins to reduce the number of elements managed by JavaScript and reduce lag when panning and zooming. Clustering pins is supported by a handful of Leaflet.js plugins, one of “hundreds” of plugins available and listed on the Leaflet.js site.

A great thing about developing digital maps is that all of the platforms behave pretty similarly, and you can translate your experience with one platform into diving into another. I encourage you to experiment with all of them—and with different types of maps—as you build your own toolkit. What’s worked well in my case may not suit your needs, and you may not be subject to the same constraints as my projects. At the same time, I can attest that the approach outlined here has empowered us with an affordable, stable, robust platform for rich, data-driven interactive maps that we’ve come to rely on to engage a community of users and tell their stories.

I hope your map-making journey is as rewarding.

We’ve all been there. Frustrated with maintaining 15 different spreadsheets, 30 documents, and 19 surveys, a nonprofit leader says, “Enough! Let’s just get a data system.” But it’s never that easy, and inevitably many organizations (and their vendors!) wind up struggling in a high-stakes, high-cost maelstrom that satisfies nobody.

What if a bunch of small-to midsized nonprofits, data system vendors, and foundations—all that have experience in rocking a new data system—gave you some pointers? As it turns out, everyone who has had a successful (or even unsuccessful) implementation has similar advice: While you need focused effort on actual vendor selection, you also need to be ready before you start that process.

So here are a few tips to help get you started on a successful path:

1. Stop and ask why you are doing this.

It seems obvious, but many organizations pursue getting a new data system without articulating what is going to get better when they do. Think of it as beginning with the ending: know what success will look like!

2. Give it time.

Implementing a system isn’t a hurry-up affair. Finding the vendor happens later in the process, after you’ve figured out the critical “why” and documented your readiness to move ahead with an implementation.

3. You’ll want your Super Squad.

Building the right team is crucial for success. Organizations that rely on the software vendor to handle everything or that load the entire project on a single person tell tales of painful, unsuccessful implementations. On the other hand, identifying the critical roles of your team ensures that your key players will have time, and that the perspectives of many are included in the process.

4. Get your GPS.

Program models and data maps are critical documents that offer big-picture views of an organization and its data. In turn, they create clear directions and priorities for what information to collect in the new system.

5. Shop around.

Just because a system worked for a partner organization or a colleague doesn’t mean it is the right system for you. Looking around, articulating what you want, and conducting a thoughtful search will help land the right partner. And don’t skip the reference checks!

6. Don’t recreate the wheel.

You can find a fair number of online tools to help get you rolling, and templates to help you do it. Key tools include making sure you have a logic model or program theory document ready to go, possibly doing an organizational analysis like strengths-weaknesses-opportunities-threats (SWOT), and building some workflow diagrams. You’ve even got a few resources out there that can help you prepare a portfolio – your vendors will love you for it!

  • The “Getting Ready” Playbook, published by Sam Doorman for the Salesforce Foundation. Strong overview to the process and decision-making organizations need to make when considering a new system.
  • The Making Wise Decisions Toolkit, published by the S.H. Cowell Foundation, authored by Public Profit and–full disclosure–me. A free guidebook with connected templates to step through the process, and links to resources produced by our fabulous colleagues.

The takeaway: Knowing yourself is the best first step to finding a great vendor partner. It kinda sounds like dating advice, but then again you are heading into a long-term partnership!

When many people think about measuring the impact of their nonprofit organization’s programs, they often think about service delivery metrics, website visits, or social media campaign statistics. While these metrics are good “proxies” for program impact, they may not be ideal in adequately capturing the long-term effects of public programs. This often results in undervaluing, and therefore under-appreciating, a number of programs that are designed to benefit the public. Information technology and recent methodological advances in the social sciences field has enabled program evaluators to overcome many of the hindrances in adequately measuring program impacts. One measurement approach that allows program evaluators to more robustly measure program impact is “Social Network Analysis.”

Imagine a Healthcare Program…

To appreciate the value of Social Network Analysis (SNA) program impact analysis, let’s use the example of a hypothetical program that is designed to promote access to healthcare among a medically underserved population. Assume that such a program planned to reach the target population through a website. A website tracking system would enable a program evaluator to find how many visited the website. These website visitors will certainly benefit from the information that they are exposed to and will likely utilize the healthcare resource that they are now aware of. However, there are some people who may not have access to computers and are therefore unable to visit the informational website. Some of those individuals, however, may know others who accessed the website information and may therefore be indirectly exposed to the information that was shared on the website. This may result in their use of the resource highlighted on the website. Information sharing creates a communication network as the information moves from one person to another.

In the above scenario, using the website visitation log to represent the program’s reach will most certainly underestimate the program’s value. By capturing and measuring both the direct and indirect channels through which stakeholders obtain information, a Social Network Analysis approach can improve the evaluation strategy to effectively overcome the limitation that is observed in the above project example.

What Is Social Network Analysis?

Social Network Analysis is “the process of investigating social structures through the use of network and graph theories.” The American Evaluation Association’s Social Network Analysis Topical Interest Group site defines SNA as “a methodology for studying relational or relationship data and is grounded in understanding and applying the methodology within a context of networks.” As relationships evolve, a network forms of connections and this network forms a unique structure. Relationships can vary from communication, support, trade, and access to resources.

Researchers who use this approach focus on identifying, representing and measuring relationships between individuals. They represent individual actors using symbols that are called “nodes.” They represent the ties between the individuals using lines that they call “edges.”

As you can see, the approach allows for the tracing of the path of information, like new ideas and the flow of such information through the “grapevine” created by the “edges” of the network. We can also see how clusters form and where clusters connect to each other. Capturing such a rich landscape of information diffusion is made possible by modern information technology.

While experts are looking to better understand and visualize relationships with free and open source tools like Gephi and NodeXL, as a beginner, you can give Socilab a try. Socilab is a free tool that you use in conjunction with LinkedIn to better understand, among other things, the effective size, density and network constraint of your professional relationships.

So now that you’ve received an introduction to SNA, here are additional resources to help you continue your learning:

Image Source: “About Data Mining

Policy Innovators in Education (PIE) Network

  • Membership of 45 organizations in 28 states and DC.
  • Seven full time staff.
  • Moving from a long, text-based annual report to a visual, interactive report increased views more than 400%

This case study was originally published along with a dozen others in our free e-book, Collected Voices: Data-Informed Nonprofits. You can download the e-book here.

NTEN: Eric, tell us about your work.

Eric Eagon (EE): With a membership of 45 organizations in 28 states and DC, we connect state-based education advocates to one another and to our national policy and advocacy partners. We do this through a variety of in-person and virtual networking opportunities. We also support advocates with targeted decision support tools and a social media presence that amplifies their work.

Im one of seven full-time staffers, and I came on board as a Senior Associate for Policy and Communications in September 2012.

NTEN: Whats one way you recently addressed a specific challenge related to data?

EE: We conduct an annual survey of our whole network. For our first few years, we used SurveyMonkey and then put all of the data into a massive report.

But it wasn’t getting much traction. When we looked at Google Analytics for the 2012 report, we saw just 82 views of the summary page and only one download. We had tons of information that could help our members collaborate with one another and plan better supports, but it wasn’t presented in an inviting, useful way.

NTEN: What did you do to fix or improve the situation?

EE: We made two major changes. We conducted phone interviews to supplement the online survey and capture more stories. We also created an interactive map to make it much simpler for our members to find what they need.

We launched the map at our conference this fall, creating interest among our 300+ attendees. We also led webinars; refer people back to it whenever possible; and now track the Google Analytics on the map to see how people are using it.

NTEN: Wow! How did you make it happen?

EE: The Deputy Director and I handled most of the policy work and ran the annual survey. Then, with our summer Fellow and Communications Director, we conducted 50 phone interviews that each lasted 30+ minutes, plus additional time for participants to edit our notes.

That summer, we happened to begin contracting with new website developers, a shop called Punk Ave based in Philadelphia. They had created one map for us, and we asked if they could use the same format for a new one.

We entered all of the survey and interview data into the new map so that members can sort by year and policy issue. Bills show up in green if they passed, red if not, orange if they’re pending. Members can view summaries of bills, who worked on them, lessons learned, related resources, and contact info.

NTEN: How did you get buy-in from the rest of your team?

EE: There was some concern, especially because the work coincided with our conference, which is an all-hands-on-deck initiative. Did we have time and capacity to do this? Could it wait for next year?

But the previous report had only been downloaded once. Punk Ave could build a shell into which we could add more details over time, rather than providing all of the data up front. And our Fellow could handle the data entry once it was built. Ultimately, we decided this was a priority. We try to make sure that all of our work is driven by member demand and needs.

NTEN: What went well? Do you have data to prove it?

EE: The map is much more engaging than a 50-page report. In less than three months since the launch, we’ve had over 350 unique views, many return visits, and good anecdotal feedback from members.

The interviews went well because we’ve been very intentional about building and maintaining trust with people in our network. This map is not available to the general public. Its password-protected for members only. People were candid because they trust that this is for the betterment of the education reform movement more broadly.

NTEN: What didn’t go so well? What do you still need to work on?

EE: We’ve made one minor change so far, tweaking the policy categories on the survey and map. We want to keep those as consistent as possible year to year.

We also need to streamline the lengthy interview process. We may need to begin with a quick conversation, then ask people to fill out the survey and capture most of the stories there.

NTEN: Do you have data that will help inform your next moves?

EE: We wanted to better understand our members policy priorities for 2014, so we sent personal emails to 50+ policy directors with a request to fill out another survey. We’ve seen a response rate of over 80% so far, and are integrating these responses into the existing policy map. As legislative sessions start in 2014, we also plan to make updates and even share resources in real time so that the map becomes more of a legislative tracking tool.

This is all in the name of not reinventing the wheel and sharing resources among our membership. It also helps us to reflection and plan.

NTEN: Any advice you’d offer to someone who wanted to tackle a big project like this?

EE: Make sure theres demand from your members. And as you design it, put yourself in their shoes. We asked ourselves:

  • What goals do our state advocates have?
  • What tools do they currently use?
  • How do they get the information they need?
  • Can we share mock-ups and beta versions of the tool?

Overall, the way we conducted the 2013 survey was much more labor intensive, but yielded something much more useful.

If you’re into interactive maps, it’s a good time to be alive! Seems we’ve entered a golden era of interactive mapping, with no shortage of exciting ways to display geographically-specific data. In the last few years, we’ve seen exponential growth in interactive mapping software that presents data from all sorts of angles.

But while being spoiled for choice can be a good thing, all this product and feature clutter makes it difficult to make a choice. When we have a client who wants to design an interactive map, our first question is not, “What kind of map do you need?” but always, “What are you trying to say?” Because, once we understand what message they want to communicate through geographic data, we’re much more well-equipped to dive into the sea of options and recommend an effective solution.

So, let’s say you want to add an interactive map to your website. How do you approach thinking about the project? What kinds of options do you have at your disposal? And which ones are best to meet your goals?

Assuming you may not have had time to navigate the world of online mapping software and could use some help designing for impact using geographic data, hopefully I can offer some insight gained over years of helping clients tell their story using interactive maps.

3 Things Before You Dive In

A few things to keep in mind when you are making decisions about interactive mapping projects:

Your Story: Before you get too fixated on what type of map you’d like, or what tool you’d like to use, take a step back and think about your audience. What do you want to tell them, and how will they find it meaningful? Getting this part right first will save you a ton of time choosing mapping technologies and techniques down the road.

Your Data: What kind of data do you have? Is it hierarchical and heavily relational, or more singular and straightforward? Will it change over time, or is it more of a static snapshot? What format do you keep it in? The quantity, quality, depth and format of your data has a huge influence on what types of mapping software are appropriate for you.

Your Budget: I know, interactive maps are like eye candy, and you feel like a kid in a candy store! Like anything, choosing an interactive mapping tool involves trade-offs, and budget is usually a big factor. Save yourself the time (and heartbreak) of falling in love with an incredible interactive map technique that’s beyond your budget by starting with a clear idea of how much time and money you want to invest in bringing your data to life with maps.

Common Mapping Goals and 6 Great Examples

While there’s no shortage of interactive mapping tools and techniques, the goals of most of the clients we work with seem to fall into one of two pretty clear groups:

1. Displaying location-specific information about the activities of their organization

2. Displaying geo-specific data that tells a story about an issue, goals, progress and/or impact

With these two groups alone, there are a lot of really exciting and innovative ways to bring data to life. Each offers different benefits. Here are just a few approaches to interactive mapping that can be really effective, with examples of tools that we think have a lot to offer.

1a. Simple Designed Map Markers

This most basic interactive map technique is ideal when you need an easy way to highlight different points of interest and just want to visually differentiate the markers (or “pins”). It’s also an opportunity to make useful, branded information design part of the experience through color and iconography.

Simple designed map markers used to indicate points of interest

screenshot-soft.png

Customized, photographic markers for each point

Solve%2050%20problems%20in%2050%20days.p

1b. Map Markers with Detailed Information

This technique is perfect if you want to quickly share detailed information about a geographic area, from summaries to pictures, and links that give users greater context. Most mapping tools give you a great deal of design control over your detail “hover boxes,” so this is a great way to present top-level summaries, provide useful, visual navigation, integrate the look and feel of your map with your brand.

This map displays specific project information with links to project pages

The%20Global%20Transition.png

These info boxes allow you to book a flight right from the map

Flybe%20Route%20Map.png

1c. Map Markers with Quantity Groups

I know, rolls off the tongue, doesn’t it? But, say you operate a lot of programs in one close area and you want to display them without presenting a confusing mess. Quantity Groups let you display a cluster of map points as one marker…until the user zooms in to get more detail. This way, users can get a feel for the big picture, and they can investigate each individual point.

An excellent quantity group function

Leaflet-debug-page.png

Using quantity groups to organize a large number of points

Olympic-torch-route--interactive-map--Sp

Google Maps’ standard way of displaying groups, called Marker Clusterer

MarkerClusterer-v3-Example.png

2a. Choropleth Map

We’ve all seen choropleth maps but maybe didn’t know that was what they were called. They are those maps that show variations in data by displaying variations in color – like a map that shows all the states in the country color coded by something like election results. Choropleth maps are a great way to communicate large amounts of data as the color coding allows for users to easily digest patterns and trends in your data.

Using choropleth maps to display election data, state by state

Screen-Shot-2013-06-25-at-10.16.35-AM.pn

Using a standard shape to more accurately display information

Screen-Shot-2013-06-25-at-10.18.38-AM.pn

Displaying census data is a great way to use a choropleth map

Screen-Shot-2013-06-25-at-10.20.19-AM.pn

2b. Clustering Maps

Say you want to give audiences an idea of relative density for population, energy use, or just about anything across a geographic area. Clustering Maps are an incredibly easy and effective way to get the point across, allowing you to customize the view in all sorts of ways, presenting data points as clusters of different sizes to indicate density.

A clustering map of all meteorites that have fallen to Earth

meteoritessize%20%20CartoDB.png

A dynamic cluster map showing a data trend over time

US-terror-attacks-1970-2011-mapped--News

Showing social media density in New York City after Hurricane Sandy

Map-%20How%20New%20York%20Tweeted%20Duri

2c. Heatmap

Heatmaps are technically another type of Choropleth map, using color to communicate relative concentration of a range of data values. But say you want to share information such as how people move their mouse on a webpage or statistics that are not delineated by geographic boundaries; a heatmap’s organic display (i.e. lacking any predefined bounds) is a great way to visually communicate relative concentrations.

Visualizing local information, like commuting times, with heatmaps

Trulia%20Local%20-%20Visual%20analysis%2

Statistics, like flood data, can be visualized well with a heatmap

FloodTools.com%20-%20Map%20My%20Risk.png

Using color-coded contour lines to visualize elevation

Iceland%20contour%20lines%20%E2%80%93%20

Here’s a real-time example of a mouse movement heat map

example-heatmap-mousemove.html

A Note About Base Map Styles

In addition to displaying your data in certain ways on a map, there is also a lot of flexibility with how the map itself looks. There are some absolutely incredible tools out there for base map styling. Here are a couple of fun links that illustrate just how much latitude (pun intended…) there is when it comes to choosing a base map style.

TileMill offers an astounding number of options for map styling

Gallery%20%20MapBox.png

Stamen offers some interesting styles as well

Gallery%20%20MapBox.png

The Tip of the Iceberg

This is just a peek into a few examples from an incredible range options out there for visualizing data on maps. The best part is that most of the tools used to create the examples above are open-source and freely available to test and use. None of them uses Flash, making them very flexible for desktop and mobile display, and new tools are being created all the time.

What this means for you, is that if you want to communicate using interactive maps and data, it’s easier than ever to integrate them into your website. Do so in a strongly-branded way, and your point will come across more effectively.

Paul Chamberlain is Senior Producer at Matthew Schwartz Design Studio in New York City, a brand experience firm specializing in design and development for nonprofit and academic organizations. He leads MSDS’s interactive team, helping clients create effective online experiences that inspire action and help create positive meaningful change in the world.

If you’re into interactive maps, it’s a good time to be alive! Seems we’ve entered a golden era of interactive mapping, with no shortage of exciting ways to display geographically-specific data. In the last few years, we’ve seen exponential growth in interactive mapping software that presents data from all sorts of angles.

But while being spoiled for choice can be a good thing, all this product and feature clutter makes it difficult to make a choice. When we have a client who wants to design an interactive map, our first question is not, “What kind of map do you need?” but always, “What are you trying to say?” Because, once we understand what message they want to communicate through geographic data, we’re much more well-equipped to dive into the sea of options and recommend an effective solution.

So, let’s say you want to add an interactive map to your website. How do you approach thinking about the project? What kinds of options do you have at your disposal? And which ones are best to meet your goals?

Assuming you may not have had time to navigate the world of online mapping software and could use some help designing for impact using geographic data, hopefully I can offer some insight gained over years of helping clients tell their story using interactive maps.

3 Things Before You Dive In

A few things to keep in mind when you are making decisions about interactive mapping projects:

Your Story: Before you get too fixated on what type of map you’d like, or what tool you’d like to use, take a step back and think about your audience. What do you want to tell them, and how will they find it meaningful? Getting this part right first will save you a ton of time choosing mapping technologies and techniques down the road.

Your Data: What kind of data do you have? Is it hierarchical and heavily relational, or more singular and straightforward? Will it change over time, or is it more of a static snapshot? What format do you keep it in? The quantity, quality, depth and format of your data has a huge influence on what types of mapping software are appropriate for you.

Your Budget: I know, interactive maps are like eye candy, and you feel like a kid in a candy store! Like anything, choosing an interactive mapping tool involves trade-offs, and budget is usually a big factor. Save yourself the time (and heartbreak) of falling in love with an incredible interactive map technique that’s beyond your budget by starting with a clear idea of how much time and money you want to invest in bringing your data to life with maps.

Common Mapping Goals and 6 Great Examples

While there’s no shortage of interactive mapping tools and techniques, the goals of most of the clients we work with seem to fall into one of two pretty clear groups:

1. Displaying location-specific information about the activities of their organization

2. Displaying geo-specific data that tells a story about an issue, goals, progress and/or impact

With these two groups alone, there are a lot of really exciting and innovative ways to bring data to life. Each offers different benefits. Here are just a few approaches to interactive mapping that can be really effective, with examples of tools that we think have a lot to offer.

1a. Simple Designed Map Markers

This most basic interactive map technique is ideal when you need an easy way to highlight different points of interest and just want to visually differentiate the markers (or “pins”). It’s also an opportunity to make useful, branded information design part of the experience through color and iconography.

Simple designed map markers used to indicate points of interest

screenshot-soft.png

Customized, photographic markers for each point

Solve%2050%20problems%20in%2050%20days.p

1b. Map Markers with Detailed Information

This technique is perfect if you want to quickly share detailed information about a geographic area, from summaries to pictures, and links that give users greater context. Most mapping tools give you a great deal of design control over your detail “hover boxes,” so this is a great way to present top-level summaries, provide useful, visual navigation, integrate the look and feel of your map with your brand.

This map displays specific project information with links to project pages

The%20Global%20Transition.png

These info boxes allow you to book a flight right from the map

Flybe%20Route%20Map.png

1c. Map Markers with Quantity Groups

I know, rolls off the tongue, doesn’t it? But, say you operate a lot of programs in one close area and you want to display them without presenting a confusing mess. Quantity Groups let you display a cluster of map points as one marker…until the user zooms in to get more detail. This way, users can get a feel for the big picture, and they can investigate each individual point.

An excellent quantity group function

Leaflet-debug-page.png

Using quantity groups to organize a large number of points

Olympic-torch-route--interactive-map--Sp

Google Maps’ standard way of displaying groups, called Marker Clusterer

MarkerClusterer-v3-Example.png

2a. Choropleth Map

We’ve all seen choropleth maps but maybe didn’t know that was what they were called. They are those maps that show variations in data by displaying variations in color – like a map that shows all the states in the country color coded by something like election results. Choropleth maps are a great way to communicate large amounts of data as the color coding allows for users to easily digest patterns and trends in your data.

Using choropleth maps to display election data, state by state

Screen-Shot-2013-06-25-at-10.16.35-AM.pn

Using a standard shape to more accurately display information

Screen-Shot-2013-06-25-at-10.18.38-AM.pn

Displaying census data is a great way to use a choropleth map

Screen-Shot-2013-06-25-at-10.20.19-AM.pn

2b. Clustering Maps

Say you want to give audiences an idea of relative density for population, energy use, or just about anything across a geographic area. Clustering Maps are an incredibly easy and effective way to get the point across, allowing you to customize the view in all sorts of ways, presenting data points as clusters of different sizes to indicate density.

A clustering map of all meteorites that have fallen to Earth

meteoritessize%20%20CartoDB.png

A dynamic cluster map showing a data trend over time

US-terror-attacks-1970-2011-mapped--News

Showing social media density in New York City after Hurricane Sandy

Map-%20How%20New%20York%20Tweeted%20Duri

2c. Heatmap

Heatmaps are technically another type of Choropleth map, using color to communicate relative concentration of a range of data values. But say you want to share information such as how people move their mouse on a webpage or statistics that are not delineated by geographic boundaries; a heatmap’s organic display (i.e. lacking any predefined bounds) is a great way to visually communicate relative concentrations.

Visualizing local information, like commuting times, with heatmaps

Trulia%20Local%20-%20Visual%20analysis%2

Statistics, like flood data, can be visualized well with a heatmap

FloodTools.com%20-%20Map%20My%20Risk.png

Using color-coded contour lines to visualize elevation

Iceland%20contour%20lines%20%E2%80%93%20

 

A Note About Base Map Styles

In addition to displaying your data in certain ways on a map, there is also a lot of flexibility with how the map itself looks. There are some absolutely incredible tools out there for base map styling. Here are a couple of fun links that illustrate just how much latitude (pun intended…) there is when it comes to choosing a base map style.

TileMill offers an astounding number of options for map styling

Gallery%20%20MapBox.png

Stamen offers some interesting styles as well

Gallery%20%20MapBox.png

The Tip of the Iceberg

This is just a peek into a few examples from an incredible range options out there for visualizing data on maps. The best part is that most of the tools used to create the examples above are open-source and freely available to test and use. None of them uses Flash, making them very flexible for desktop and mobile display, and new tools are being created all the time.

What this means for you, is that if you want to communicate using interactive maps and data, it’s easier than ever to integrate them into your website. Do so in a strongly-branded way, and your point will come across more effectively.

Paul ChamberlainPaul Chamberlain is Senior Producer at Matthew Schwartz Design Studio in New York City, a brand experience firm specializing in design and development for nonprofit and academic organizations. He leads MSDS’s interactive team, helping clients create effective online experiences that inspire action and help create positive meaningful change in the world.

One of the most effective ways of telling your organization’s story is through images – and maps are one of the most powerful visuals you can employ. Online maps provide context, engage viewers with interactive features, and reveal stories by visualizing your data. In short, maps are awesome!

Join data analyst Dave Johnson of Mapbox who will walk you through common use cases for web maps, provide an overview the best types of data to map, and the most effective ways to reach your audience.

Learn more and register today >>

Event Details

Cost: $35 for NTEN Members / $70 for non-members

When: Wednesday, October 10th, 11:00 am Pacific Time / 2:00 pm Eastern Time

Presented by: Dave Johnson, MapBox

I spent last week driving around the Northwest with a whole passel of maps, from my old DeLorme road atlas to my new favorite iPad app, MotionX-GPS, which we even took into the backcountry with us. There’s something inherently cool about maps – so being able to tap them so easily these days, to help us further our missions, is pretty fantastic. I hope you’ll be able to join us.