Rent is a touchy subject in any community, so it's no surprise that when we created a way for readers to share their rent stories, they responded en masse.
How it works
Dots on the map represent major neighborhoods within Seattle and other major areas outside of Seattle. Readers can click a point to get more information about it, submit a rent story for that neighborhood and read others' stories for that neighborhood. We're using the Mapbox and tabletop.js to display the map and submissions from our readers, which are inputted via a Google form. This is our last map that will use tabletop and Google spreadsheets to store data. The next one is using a django form and spitting out data as json.
Why the big dots to represent neighborhoods?
Not sure whether I need to explain myself on this one, but since it was the source of much discussion in our newsroom when deciding how to represent neighborhoods, the thought process is worth noting. We used big dots to represent geographic locations for a few reasons.
- Rather than using shapefiles: Neighborhood boundaries in Seattle are very ambiguous, and there aren't any official definitions of what is where. Rather than nitpicking about where one boundary started and other ended, we used big dots to ambiguously represent the neighborhoods so readers could self-identify. Eventually (soon!), yes, we're going to have to just settle on some boundaries and create neighborhood shapefiles for our city.
- Rather than letting smaller dots represent each individual submission: This would require asking readers to input an address, then map that address to a longitude/latitude. Because of privacy concerns and time limitations, we opted not to do this.
First time doing full-screen maps
You may remember our reader state parks map, which we were able to build off of for this project. It was a clunky experience (and not responsive) because we were forced to embed it into our CMS on a fixed-width flatpage. Though doing full-screen maps is certainly nothing new, it's a first for us and will likely be an issue other smaller newsrooms have to deal with.
Here's are the points I made to our UX team in sales and marketing when I made the case for why we should be able to do this:
- Google, Bing, MapQuest, etc. have already set a precedent, meaning it won't be "unexpected behavior" that surprises our users.
- If we want our maps to be responsive (yes, of course we do), an iframe on a flatpage won't do the trick and makes for weird scrolling within scrolling panes.
And speaking of mobile, here's how it all looks on a phone:
Huge shoutout to Alexa Vaughn, Dean Kramer and Gene Balk for their work on this.