When designing a new house, one of the most critical factors that architects need to consider is the sun’s trajectory. Proper orientation can maximize natural light, reduce energy costs, and create more comfortable living spaces. That’s why I created SolSet - an interactive web application that visualizes the sun’s position and trajectory for any location and date/time.
I built this tool out of personal necessity when I was planning my own house. After searching extensively online, I couldn’t find any solution that provided the specific visualizations and ease of use I needed for making orientation decisions. SolSet is my answer to that gap, and I hope other homeowners and architects will find it as useful as I did during my building process.
What is SolSet?
SolSet is a user-friendly web application that helps architects and homeowners visualize how the sun interacts with a property throughout the day and across different seasons. By simulating the sun’s path and shadow projections, SolSet provides valuable insights for optimal building orientation and window placement.
How Does SolSet Work?
At its core, SolSet combines several powerful technologies to deliver accurate sun calculations and intuitive visualizations:
- Interactive Map: Users can search for any location or use their current position
- Sun Path Visualization: The application displays the sun’s trajectory across the sky for any selected date
- Time Controls: Using intuitive sliders, users can adjust the date and time to see how shadows change
- House Layout Tool: Users can place and rotate a simple house layout to test different orientations
- Detailed Sun Data: The app provides precise information about sunrise/sunset times, sun altitude, azimuth, and shadow length
SolSet leverages the open-source SunCalc library for precise astronomical calculations, along with Leaflet.js for map rendering and D3.js for interactive SVG manipulations. The frontend is built with Vue.js 3 using the Composition API for efficient state management.
Getting Started with SolSet:
Using SolSet is simple - just visit the live demo or clone the repository from GitHub to run it locally. The interface is intuitive:
- Search for your location or click “Locate Me”
- Use the date slider to select your desired day of the year
- Use the time slider to move through the day and observe sun position changes
- Toggle the house layout tool to test different building orientations
- View detailed sun data on the right panel
The application works on both desktop and mobile devices, making it accessible whether you’re in an office or directly on a construction site.
Why Sun Orientation Matters
Proper solar orientation can have significant impacts on both sustainability and quality of life. South-facing windows (in the Northern Hemisphere) capture more winter sunlight, reducing heating costs. Meanwhile, properly positioned overhangs can block the high summer sun to prevent overheating.
By visualizing these patterns in advance, architects can:
- Optimize passive solar heating and cooling
- Reduce reliance on artificial lighting
- Create more comfortable living spaces
- Design shading elements more effectively
Technical Implementation
SolSet is built as a fully client-side application, meaning it runs entirely in the browser with no backend requirements. This makes it extremely portable and easy to deploy on any static hosting platform. The application uses modern web technologies including:
- Vue.js 3.5 with Composition API
- Vite 6.3 for lightning-fast development and optimized builds
- Bootstrap 5.3 for responsive design
- Leaflet.js and OpenStreetMap for mapping functionality
- SunCalc.js for accurate sun position calculations
This approach to frontend development focuses on performance and user experience.
If you’re an architect, homeowner, or just someone interested in solar patterns, give SolSet a try and see how the sun moves across your property. The code is available on GitHub and contributions are always welcome!