Project description:

Coastal cities need billions of dollars to build defenses against sea level rise. Tensions are growing over where that funding will come from: taxpayers or private companies with waterfront property?

This immersive project is a deep dive into a complicated subject, using interactive maps and drone photography to help convey the scope of the issue and the challenging terrain.

Impact reached:

Our story is being used a tool for community engagement among several environmental justice groups in the Bay Area. They are using it to help their public understand sea level rise and how it affects them, relative to their large corporate neighbors. 

After publication, Google and Facebook employees tweeted about the story publicly. Google and Facebook are both aware of our reporting. 

Techniques/technologies used:

This project is a combination of original drone footage and photography, maps and reporting. The maps were made using QGIS, leaflet.js and lots of code to allow integration with Google Sheets. This project was built with NPR’s own in-house developed scrolly-telling based interactive template. The template makes it easy to integrate photo, video, interactive elements, and text. 
 

What was the hardest part of this project?

Creating the data layers for Facebook and Google’s parcels was extremely difficult and confusing. Lauren Sommer and I (Daniel Wood) collected detailed parcel information from several different counties to create the data sources at the heart of this story. Some of the data was extremely large and hard to work with. Some of the parcels were held by third parties but rented to the companies. Other parcels were owned by the companies but as-yet undeveloped. Creating this layer with a cohesive methodology from messy public sources was very challenging. 

Building a slippy map that flew and zoomed on scroll was essential to locating this story within a place. Working on a tight budget, we opted to use a free web mapping library called leaflet.js, rather than spend extra for something like Mapbox. But this came with several difficulties. One downside of this was that we had to populate the imagery with our own custom labels, and we had to have them work well on desktop and mobile. Another challenge was loading and painting the geo data while keeping the load times low. While Mapbox would allow you to preload this data into their tiles, our system doesn’t pre-bake tiles, making this impossible. On the plus side, loading the geo data in the browser allowed us to easily manipulate the layers with javascript and css. This made the water effect possible and the timeline of loading data later on. 

What can others learn from this project?

Animated maps such as these can be a good way to step laypeople through the factors and impacts of issues that otherwise can be very dry and difficult to grasp with text and photos alone. This project offers a couple examples of how one might approach it.

Project links:

apps.npr.org/sea-level-rise-silicon-valley/