A powerful, interactive web application that enables users to explore panoramic imagery with advanced navigation capabilities, similar to Google Street View but with custom functionality and enhanced control.
- Features
- Project Structure
- Technologies Used
- Getting Started
- Usage Guide
- Admin Interface
- Data Management
- Customization
- Troubleshooting
- Contributing
- License
- Immersive panorama viewing experience using Three.js
- Smooth transitions between connected panoramic images
- Intuitive controls for panning, zooming, and rotating
- Compass indicator for orientation
- Automated pathfinding between panorama points using Dijkstra's algorithm
- Visual directional arrows indicating available navigation points
- Guided tours with step-by-step navigation instructions
- Leaflet-based map with multiple base layers (OpenStreetMap, Esri Satellite, Google Satellite)
- Cluster markers for efficient display of numerous panorama locations
- Heatmap visualization of panorama density
- Reverse geocoding for location information
- SQLite database integration for storing and retrieving panorama data
- Project import/export functionality
- Support for EXIF data extraction from images
- Loading indicators and transition effects
- Responsive design for various screen sizes
- Information panel displaying location details
- Debug mode for developers
├── admin.html # Administrative interface
├── db.js # Database management and operations
├── index.html # Main application entry point
├── map.js # Map functionality and visualization
├── pathfinder.js # Pathfinding and navigation logic
├── style.css # Styling for the application
├── utils.js # Utility functions
└── viewer.js # Panorama viewer implementation
- Frontend: HTML5, CSS3, JavaScript
- Libraries:
- Three.js (3D panorama rendering)
- Leaflet (interactive maps)
- GSAP (animations and transitions)
- Turf.js (geospatial analysis)
- sql.js (SQLite database in browser)
- EXIF.js (image metadata extraction)
- FileSaver.js (file download functionality)
- JSZip (zip file handling)
- A modern web browser (Chrome, Firefox, Safari, or Edge)
- Basic knowledge of web technologies
- For local development: A web server (e.g., VS Code Live Server, Apache, Nginx)
- Clone or download the repository to your local machine
- Place the files in your web server's root directory
- Ensure all JavaScript files and dependencies are correctly referenced
- Open the application through your web server (not directly as a file)
For a better development experience, we recommend using a local development server:
# If you have Node.js installed
npm install -g http-server
cd /path/to/streetviewer
http-serverOr use the VS Code Live Server extension for instant reloading during development.
- Panorama Viewing: Click and drag within the viewer to rotate the view
- Map Interaction: Use the map to browse available panorama locations
- Location Switching: Click on markers in the map or directional arrows in the viewer
- Select a starting point on the map
- Choose a destination point to initiate an automated tour
- Follow the on-screen instructions to navigate the suggested path
- Upload custom panorama images
- Import/export entire projects as zip files
- Load existing databases containing panorama collections
The application includes a dedicated admin interface (admin.html) with enhanced capabilities:
- Advanced database management
- Bulk import/export operations
- Debugging tools
- Additional configuration options
The application uses an SQLite database to store panorama information, including:
- Image metadata
- Geographical coordinates
- Connection information between panoramas
- User-defined tags and categories
You can import panorama data in several ways:
- Direct image upload with automatic EXIF extraction
- Importing an existing SQLite database
- Loading a project zip file
Projects can be exported as:
- SQLite database files
- Complete zip packages including images and database
Modify style.css to customize the application's appearance, including:
- Color schemes
- Layout proportions
- UI element positioning
- Animation effects
You can add additional map layers by modifying the layer configuration in map.js.
The pathfinding algorithm can be adjusted in pathfinder.js to optimize for different criteria such as distance, time, or user preferences.
- Panorama not loading: Ensure the image paths are correct and the files are accessible
- Map not displaying: Check your internet connection and ensure Leaflet.js is properly loaded
- Navigation arrows not showing: Verify that panorama connections are correctly defined in the database
- Performance issues: Reduce the number of visible markers or use lower resolution images
Enable debug mode to view additional information about the application state, including:
- Panorama connection details
- Database query results
- Performance metrics
Contributions to improve Streetviewer are welcome! Please follow these steps:
- Fork the repository
- Create a new branch for your feature
- Make your changes and commit them with descriptive messages
- Push your changes to your fork
- Submit a pull request
This project is licensed under the MIT License - see the LICENSE file for details.
- Three.js community for their excellent 3D rendering library
- Leaflet contributors for the powerful mapping framework
- All other open-source projects and libraries used in this application
© 2025 Streetviewer Project. All rights reserved.