Building better maps for Boston.gov

“Build a map” is a simple statement, but with online maps, there are no simple answers. We’ve been thinking a lot about our maps recently, and there are many things to consider. Maps we create need to:

1. fully integrate into Drupal, the system we use to edit and update Boston.gov
2. fit our brand
3. link to our City data sources
4. be easy-to-update when information changes, and
5. be easily understood — and even enjoyed — by those people using our maps.

It’s a bit of a tall order, but we’re happy to announce we’re getting there!

Hearing from the people

Before we even started our work, we collected a lot of feedback on how people are using our maps versus how they would like to be using our maps. Over the summer, two of our wonderful summer fellows, Jiaorui and Caroline, helped us test our ideas with residents. We asked dozens of people to use our maps on both mobile and desktop screen sizes. They gave us great feedback — one example included a suggestion to make lines semi-transparent when the map is zoomed in so people can read the names of streets.

We have a lot of assumptions of what could work on all of our projects, not just maps. We can’t stress the importance of user testing enough. This type of feedback was invaluable as we prototyped and worked on our new maps. User testing will continue to drive us as we create, develop, and build even more digital tools.

So, what’s different?

One big change you’ll notice is that our maps are now fully embedded on Boston.gov as “modal components.” Basically, you click on a button and an interactive map opens that takes up your entire screen. With the lack of space on mobile devices, you have to move around to find the information you’re interested in. Using modal maps means we can take advantage of all the screen space a user has. By using more space, we can help you find what you’re looking for faster since you’ll have to do a lot less pinching and zooming.

Modal maps also force you to opt-in to viewing a map by clicking a “show map” button. This helped us address a major issue with our old maps, which we created by adding iframes to the website. The flexibility of iframes made them a great option when we first launched Boston.gov, but a user could get stuck inside the map when scrolling down the page. You basically had to use the tiny gutters on the side of a map to go up or down. The gutters also took up a good amount of space on mobile screens, making the map smaller and harder to use.

You get a dataset, and you get a dataset...

While the Digital Team helps build the public facing product, there always needs to be someone who owns the data related to a map. This usually involves the department responsible for the map and members of the Analytics Team at the City. This ownership of our maps has two main benefits:

1. We make sure stakeholders are invested in keeping the map up-to-date.
2. We know we’re using data from sources that are properly managed and maintained by our Analytics Team.

To get started, members of both the Digital Team and Analytics Team meet with a department interested in creating a map. We work with them to figure out what updating process works best for them. Do they use maps in their existing workflows? If so, we work with our GIS Team to make an ArcGIS Online application that allows them to edit the data in a map-centric interface. Are they more comfortable in spreadsheets? If that’s the case, we help them set up a Google Sheet for their information that updates the map every night.

When we create maps, we pull directly from these data sources that departments are editing. That means our maps update automatically on Boston.gov. Once a department gets set up, they can change the information on their maps without ever needing to involve us.

The work doesn’t stop

Many of the changes we’ve made to our maps over the past few months were all based on feedback. So, if you see anything you’d like changed or tweaked, please let us know at feedback@boston.gov. You can check out some of the maps we've worked on below: