Build Solar Panel Prediction App with ReactJS

Solar

The purpose of this application is to predict suitable areas for solar panel placement. The more green a specific area in the image, the more unlikely that you are able to place a solar panel there.

Demo

Here’s a quick gif demonstrating the app in action:

App Demo Gif

Getting Started

To get started with the project, you’ll need to have Node.js and Python3 installed on your machine.

1. Clone this repository

2. Install dependencies by running npm install in the root directory of the project

3. Install the Python dependencies by running pip install -r requirements.txt in the server directory

4. Create a .env file and set the following environmental variables:

   • MAPBOX_TOKEN
   • INTERACTIVE_STYLE
   • ACCESS_TOKEN
   • OWNER_ID
   • STYLE_ID
   • For more information on how to set up a map and retrieve the relevant values for the environmental variables, check out the Mapbox Documentation

5. Start the frontend and backend by running npm run dev

The application should now be accessible at http://localhost:8080.

Usage

1. Enter an address in the search bar or interact with the map and scroll manually with your mouse to find the building you want to predict solar panel placement for.
2. Click on the building to select it. If the building clicked on is a valid roof, the surface area of the roof will appear.
3. Once the building is selected, click the Process Selected Building button
4. The processed image will then be displayed with a color map indicating the suitability of different areas for solar panel placement. The more green a specific area in the image, the more unlikely it is that you are able to place a solar panel there.
5. Users can download the generated image by clicking on the “Download” button.

Built With

• React
• JavaScript
• Mapbox
• Turf
• Python
• FastAPI
• OpenCV

Authors

• Issam Eljitan

Acknowledgments

• Mapbox
• Turf
• FastAPI
• OpenCV

Source Code

To use this app, please view the source code via the link below.

We hope that Build Solar Panel Prediction App with ReactJS article will be useful. Please continue to visit this site to get other latest free application source code info. You can also join the telegram channel or subscribe to email to get the latest updates. Thank You.

Love this Solar Prediction app? You can provide support by buying coffee at this link. You can also support us by sharing this content on social media and your friends, let's share via the link below.