- Published on
Recreating the Google Solar API example website with a searchable address field
- Authors
- Name
- Lauren Jarrett
Case study
I was approached by a client adbout recreating the example web application for Google's solar API with the addition of an Address field to search for any addresses.
What did I do?
- Build a NextJS Javascript web application
- Integrated with Google Places to search for valid addresses
- Load the Google Map with a circle viewport around the location
- Enable client side download all Tiff files including Building Mask, Digital Suface Map, RGB and Annual Flux
- Enable client side selection of a day & month and slide through the solar flux on the address
- Add markers to map for each roof segment & load specific information about that roof segment
- Add marker to map for overall solar information specific to the property
- Visualise the quantile sunniness on a bar chart
- Render the solar panels on the roof (as close to as possible from the map view) as best positioned from Google
- Allow the client to slide through rendering the panels & see the yearly kw/h savings
Code is located on Github here
Screenshots
Screen 1: Address search and tiff file downloads
Screen 2: Hourly Flux Imagery
Screen 3: Building Insights
Screen 4: Panel Array Design
Feel free to reach out and get in touch if you have ideas you want to prototype or discuss the Google Solar API in more detail. Thanks for following along!