A beautiful, interactive web application for visualizing the sun's position and trajectory.
- OpenStreetMap and ESRI satellite imagery options
- Click anywhere to set location
- Smooth panning with real-time sun updates
- Center crosshair indicator with compass labels
- Remembers your preferred base layer
- Daily sun trajectory arc
- Current sun position marker
- Sunrise/sunset time markers
- Shadow projection from center point
- Correct local times using the location's real time zone (including DST)
- Intuitive date and time sliders with color gradients
- Quick date jumps (solstices, equinoxes)
- Direct keyboard input for precise times
- Play through the day (skips the night)
- Keyboard shortcuts for fast navigation
- Optimal house orientation calculator
- Day/Night zone visualization
- Real-time shadow projection
- Toggle auto-orientation or set the orientation manually
- Toggle seasonal sun paths (solstices & equinoxes, labelled for your hemisphere)
- Compare summer vs winter sun exposure
- Visual legend with color coding
- Light and dark mode themes
- System preference detection
- Beautiful gradient sliders
- Responsive layout for phones and tablets
- Keyboard shortcuts
- Settings panel with customization
- URL state sharing (bookmark any view)
- Recent locations history
- Saved locations (bookmark button in the Sun Data panel)
- Export data to JSON
| Key | Action |
|---|---|
← → |
Adjust time ±15 minutes |
⇧ + ← → |
Adjust date ±1 day |
N |
Jump to current date/time |
Space |
Play/pause time animation |
H |
Toggle house layout |
S |
Toggle seasonal paths |
D |
Toggle light/dark mode |
? |
Show shortcuts help |
Esc |
Close modals |
- Vue.js 3.5 - Composition API with script setup
- Vite 6 - Fast build tool and dev server
- Leaflet.js 1.9 - Interactive map rendering
- SunCalc.js 1.9 - Astronomical calculations
- tz-lookup - Offline time zone lookup for coordinates
- Bootstrap Icons - Icon library
- Node.js 18+ (LTS recommended)
- npm or yarn
# Clone the repository
git clone https://github.com/rouralberto/solset.git
cd solset
# Install dependencies
npm install
# Start development server
npm run devOpen http://localhost:5173 in your browser.
npm run buildThe built files will be in the dist directory.
This is a static site that can be deployed to any hosting service:
./deploy.sh s3 your-bucket-name./deploy.sh oss your-bucket-nameJust connect your repository and deploy automatically.
Access via the ⚙️ icon in the header:
- Theme: Light, Dark, or System (saved in your browser)
- Shadow Height: Custom object height for shadow calculation (default: 1m)
- Solar System Size: Custom kW for production estimates (default: 6.7kW)
- House Layout: Toggle visibility and auto-orientation
- Locations: Open or remove saved and recent locations
Share specific views with the share button in the header, or by copying the URL. Parameters include:
lat,lng- Location coordinatesz- Map zoom leveldate- Date inYYYY-MM-DDformattime- Time inHH:MMformat
Date and time are local to the location (not to the viewer), so a shared link shows the same sun position for everyone.
Example: https://solset.guztia.com/#lat=43.3183&lng=-1.9812&z=15&date=2024-06-21&time=12:00
- Sun Calculations: SunCalc by Vladimir Agafonkin
- Maps: OpenStreetMap and ESRI
- Geocoding: Nominatim API (searches run only on submit, per the usage policy)
- Time zones: tz-lookup
Contributions are welcome! Please feel free to submit a Pull Request.
- Fork the project
- Create your feature branch (
git checkout -b feature/AmazingFeature) - Commit your changes (
git commit -m 'Add some AmazingFeature') - Push to the branch (
git push origin feature/AmazingFeature) - Open a Pull Request
This project is licensed under the MIT License - see the LICENSE file for details.
- SunCalc for precise astronomical calculations
- Leaflet for the excellent mapping library
- OpenStreetMap contributors for map data
- tz-lookup for offline time zone lookup
Made with ☀️ by Alberto Roura