logo
Published on

Recreating the Google Solar API example website with a searchable address field

Authors
  • avatar
    Name
    Lauren Jarrett
    Twitter

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?

  1. Build a NextJS Javascript web application
  2. Integrated with Google Places to search for valid addresses
  3. Load the Google Map with a circle viewport around the location
  4. Enable client side download all Tiff files including Building Mask, Digital Suface Map, RGB and Annual Flux
  5. Enable client side selection of a day & month and slide through the solar flux on the address
  6. Add markers to map for each roof segment & load specific information about that roof segment
  7. Add marker to map for overall solar information specific to the property
  8. Visualise the quantile sunniness on a bar chart
  9. Render the solar panels on the roof (as close to as possible from the map view) as best positioned from Google
  10. 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

Data layers file

Screen 2: Hourly Flux Imagery

Hourly Flux

Screen 3: Building Insights

Maximum solar potential
Specific Roof Segment

Screen 4: Panel Array Design

Panel 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!