By: Chris Loer
By turning raw geospatial data into beautiful, interactive, and informative maps, we’re able to understand cities and urban trends in new ways. Recently we held an internal hack day, and I found a really cool dataset I wanted to bring to life with Mapbox GL. The result is an interactive map showing trends in solar panel installations across the greater San Diego area. This is how I built it.
As a resident of San Diego, I heard about the incredible San Diego Open Data Portal, and I started exploring. I hit the jackpot when I saw a geotagged dataset of every rooftop solar permit issued in the city since the beginning of 2015! The rapid expansion of rooftop solar over the last few years is an important story to tell. It helps us understand what’s possible as we look for alternative energy sources that can mitigate human-made climate change. However, if we just look at the numbers, it’s hard to wrap our heads around how quickly our cities are changing.
To make the dataset easier to explore, I imported it as a GeoJSON file, then used our data-driven styling API to represent installations with colored dots and our runtime styling API to give the map an interactive date slider.
Play around with the live map yourself!
What does the data show? For me, the following things stuck out:
- The pace of solar installation over the last two years has been incredible: almost twenty thousand installations!
- However, if you zoom in on the satellite view, you’ll also see that the supply of available roofs has barely been dented.
- More spread-out areas with lots of owner-occupied houses have the highest number of panels. What incentives would have to change to get more solar panels installed on top of apartment buildings?
- There’s no one dominant installer, and the many big installers have different types of geographical profiles (some are all over the place, some are concentrated in one area). Also, there are a whole lot of small-to-medium installers, including 5,000 panels installed by people with fewer than five permits to their name — thousands of people are doing it themselves.
What trends do you see?
How I built it
Getting data onto the map
I knew how to load GeoJSON into Mapbox GL, so my first step was to transform the source data into GeoJSON. The permit information was in CSV format, so I used the csv-parse and geojson npm packages to transform the input data. Because the data was limited to the City of San Diego, I thought it was important to include the (oddly shaped) city limits for context. SanGIS provided the city limits in shapefile format, so I downloaded that and used ogr2ogr to convert it to GeoJSON.
Styling the circles
I represented each permit as a single circle on the map, and used:
- The circle-radius zoom function to make the circles easier to read
- The circle-color property function to represent the status of the permit
- The circle-opacity property to fade circles in and out based on their installation date
Animating over time
To hook my date slider up to the map, I used the setPaintProperty API to update the opacity property with the current date:
map.setPaintProperty(layerID, ‘circle-opacity’, circleOpacityProperty(currentDate))
I designed the property so that the opacity would be interpolated from a value of ’0’ one month before the installation to a value of ’1’ on the completion date.
When the map is zoomed out, all twenty thousand points are rendered at once, and animating changes in opacity across all of them started to get a little jerky. To keep the animation smooth, I split the permits into 25 different layers based on their installation month — that way I only had to update opacities for the layers immediately before and after the current date.
Take a look at data.gov or the data portal of your local government — what interesting stories do you see that could be told with an interactive map? Share what you find with us on Twitter using the hashtag #BuiltWithMapbox!
Watch solar panel installations bloom in San Diego was originally published in Points of interest on Medium, where people are continuing the conversation by highlighting and responding to this story.