- Implemented OpenStreetMap using WebView with Leaflet.js - Added OpenStreetMapView component with interactive map functionality - Created heat map visualization with color-coded intensity - Added 30 dummy location points around San Francisco Bay Area - Implemented location tracking with real-time pin placement - Added comprehensive UI with two-row button layout - Features: Start/Stop tracking, Center map, Demo heat map, Clear demo, Reset map - Added location count display and confirmation dialogs - Updated project structure and documentation - All functionality tested and working on Android emulator
395 lines
12 KiB
Markdown
395 lines
12 KiB
Markdown
# Location Tracker App
|
||
|
||
A comprehensive .NET MAUI application that tracks user location and displays it as an interactive heat map using OpenStreetMap integration and SQLite database storage.
|
||
|
||
## Application Overview
|
||
|
||
The Location Tracker App is a cross-platform mobile application built with .NET MAUI that provides real-time location tracking with advanced heat map visualization. The app uses OpenStreetMap for map display, eliminating the need for Google Maps API keys while providing rich, interactive mapping capabilities.
|
||
|
||
## Key Features
|
||
|
||
- **Interactive Maps**: OpenStreetMap integration with Leaflet.js for detailed map display
|
||
- **Real-time Location Tracking**: Continuous GPS tracking with configurable accuracy
|
||
- **Heat Map Visualization**: Color-coded intensity display based on location frequency
|
||
- **SQLite Database**: Local data persistence with Entity Framework Core
|
||
- **Location Analytics**: Track and analyze movement patterns
|
||
- **Modern UI**: Clean, intuitive interface with responsive design
|
||
- **Privacy-Focused**: No external API dependencies for map display
|
||
- **Cross-Platform**: Works on Android, iOS, and macOS
|
||
- **Data Management**: Clear data, load data, and session management
|
||
- **No API Keys Required**: Free map service without Google Maps dependencies
|
||
- **Background Tracking**: Continuous location monitoring with battery optimization
|
||
- **Export Capabilities**: Share location data and routes
|
||
|
||
## Application Screenshots
|
||
|
||
### Main Application View
|
||

|
||
*The main application interface showing the interactive map with location tracking controls*
|
||
|
||
### Location Found Dialog
|
||

|
||
*Location detection and map centering functionality with coordinate display*
|
||
|
||
### App Demo
|
||

|
||
*Animated demonstration of the application's core features and functionality*
|
||
|
||
### Additional Screenshots
|
||

|
||
*Application running on Android emulator*
|
||
|
||

|
||
*Complete heat map display*
|
||
|
||

|
||
*Application after clearing demo data*
|
||
|
||

|
||
*Updated user interface with new controls*
|
||
|
||

|
||
*OpenStreetMap integration*
|
||
|
||

|
||
*Map centered on current location*
|
||
|
||
## Technical Architecture
|
||
|
||
### Technology Stack
|
||
- **Framework**: .NET MAUI (.NET 9.0)
|
||
- **Database**: SQLite with Entity Framework Core
|
||
- **Maps**: OpenStreetMap with Leaflet.js
|
||
- **Architecture**: MVVM (Model-View-ViewModel)
|
||
- **Dependency Injection**: Built-in .NET DI container
|
||
- **Background Processing**: Non-blocking location updates
|
||
- **Event-Driven Architecture**: Real-time location events
|
||
|
||
### Project Structure
|
||
```
|
||
LocationTrackerApp/
|
||
├── Components/ # Custom map components
|
||
│ └── OpenStreetMapView.cs
|
||
├── Data/ # Database context
|
||
│ └── LocationDbContext.cs
|
||
├── Models/ # Data models
|
||
│ └── LocationData.cs
|
||
├── Services/ # Business logic services
|
||
│ ├── ILocationService.cs
|
||
│ ├── LocationService.cs
|
||
│ ├── IConfigurationService.cs
|
||
│ └── ConfigurationService.cs
|
||
├── ViewModels/ # MVVM view models
|
||
│ └── MainViewModel.cs
|
||
├── Views/ # UI views
|
||
│ ├── MainView.xaml
|
||
│ └── MainView.xaml.cs
|
||
├── Platforms/ # Platform-specific configurations
|
||
│ ├── Android/
|
||
│ └── iOS/
|
||
├── MainPage.xaml # Main application page
|
||
├── MainPage.xaml.cs # Main page code-behind
|
||
└── Configuration files # appsettings.json, etc.
|
||
```
|
||
|
||
### Key Components
|
||
|
||
#### LocationData Model
|
||
Represents a location data point with:
|
||
- Latitude/Longitude coordinates
|
||
- Accuracy, altitude, and speed
|
||
- Timestamp and session ID
|
||
- Optional notes
|
||
|
||
#### LocationService
|
||
Handles location tracking with:
|
||
- Continuous location updates
|
||
- Permission management
|
||
- Background tracking capabilities
|
||
- Event-driven architecture
|
||
|
||
#### OpenStreetMapView
|
||
Custom map component featuring:
|
||
- Heat map visualization with intensity-based coloring
|
||
- Interactive map controls
|
||
- Real-time location pins
|
||
- WebView-based rendering with Leaflet.js
|
||
|
||
#### MainViewModel
|
||
MVVM view model providing:
|
||
- Command bindings for UI interactions
|
||
- Property change notifications
|
||
- Location tracking state management
|
||
- Data persistence operations
|
||
|
||
## Getting Started
|
||
|
||
### Prerequisites
|
||
- Visual Studio 2022 or Visual Studio Code
|
||
- .NET 9.0 SDK
|
||
- .NET MAUI workload
|
||
- Android SDK (API level 34+)
|
||
- Xcode (for iOS development)
|
||
|
||
### Installation
|
||
1. Clone the repository
|
||
2. Open the solution in Visual Studio
|
||
3. Restore NuGet packages
|
||
4. Build the application
|
||
5. Run on your preferred platform
|
||
|
||
### Building for Android
|
||
```bash
|
||
dotnet build -f net9.0-android
|
||
dotnet build -f net9.0-android -t:Install
|
||
```
|
||
|
||
## Usage Guide
|
||
|
||
### Main Features
|
||
|
||
#### 1. Location Tracking
|
||
- **Start Tracking**: Begin continuous GPS location monitoring
|
||
- **Stop Tracking**: Pause location collection
|
||
- **Real-time Updates**: Live location pins on the map
|
||
|
||
#### 2. Map Interaction
|
||
- **Center Map**: Automatically center on current location
|
||
- **Zoom Controls**: Standard map zoom in/out functionality
|
||
- **Interactive Navigation**: Pan and explore different areas
|
||
|
||
#### 3. Heat Map Visualization
|
||
- **Demo Heat Map**: Display pre-loaded San Francisco Bay Area data
|
||
- **Color Coding**:
|
||
- Red: High intensity (many location points)
|
||
- Yellow: Medium-high intensity
|
||
- Cyan: Medium-low intensity
|
||
- Blue: Low intensity (fewer location points)
|
||
- **Intensity Calculation**: Based on location frequency and density
|
||
|
||
#### 4. Data Management
|
||
- **Clear Demo**: Remove all demo location data
|
||
- **Reset Map**: Return to default map view
|
||
- **Location Count**: Real-time display of tracked locations
|
||
|
||
## Sample Data
|
||
|
||
The application includes 30 dummy location points around the San Francisco Bay Area:
|
||
|
||
- **Golden Gate Bridge** (5 points) - High frequency
|
||
- **Financial District** (6 points) - High frequency
|
||
- **Fisherman's Wharf** (3 points) - Medium frequency
|
||
- **Union Square** (3 points) - Medium frequency
|
||
- **SOMA** (4 points) - Medium frequency
|
||
- **Chinatown** (3 points) - Medium frequency
|
||
- **Mission District** (2 points) - Low frequency
|
||
- **Castro District** (1 point) - Low frequency
|
||
- **North Beach** (1 point) - Low frequency
|
||
- **Marina District** (1 point) - Low frequency
|
||
- **Presidio** (1 point) - Low frequency
|
||
|
||
## Configuration
|
||
|
||
### OpenStreetMap Integration
|
||
The app uses OpenStreetMap tiles with Leaflet.js for map display:
|
||
- **Tile Provider**: [OpenStreetMap](https://www.openstreetmap.org/about) - Community-driven, open-source map data
|
||
- **Attribution**: © OpenStreetMap contributors
|
||
- **No API Keys Required**: Completely free map service
|
||
- **Open Data**: Free to use for any purpose with proper attribution
|
||
|
||
### Configuration Files
|
||
The app supports configuration files for managing settings:
|
||
|
||
#### Files Created:
|
||
- `appsettings.json` - Base configuration
|
||
- `appsettings.Development.json` - Development-specific configuration
|
||
|
||
#### Configuration Priority:
|
||
The configuration is loaded in this order:
|
||
1. Environment variables
|
||
2. `appsettings.json` file
|
||
3. Default values (for development)
|
||
|
||
#### Environment Variables:
|
||
You can set configuration values as environment variables:
|
||
|
||
**On macOS/Linux:**
|
||
```bash
|
||
export APP_SETTING="your_value_here"
|
||
```
|
||
|
||
**On Windows (PowerShell):**
|
||
```powershell
|
||
$env:APP_SETTING = "your_value_here"
|
||
```
|
||
|
||
#### Security Notes:
|
||
- Never commit sensitive configuration to version control
|
||
- Use different settings for development and production
|
||
- Consider using environment variables for production deployments
|
||
|
||
### Database Configuration
|
||
- **Database**: SQLite local storage
|
||
- **Location**: `FileSystem.AppDataDirectory/location_tracker.db`
|
||
- **Framework**: Entity Framework Core 9.0.9
|
||
|
||
### Database Schema
|
||
The SQLite database stores location data in the `LocationData` table:
|
||
|
||
```sql
|
||
CREATE TABLE LocationData (
|
||
Id INTEGER PRIMARY KEY AUTOINCREMENT,
|
||
Latitude REAL NOT NULL,
|
||
Longitude REAL NOT NULL,
|
||
Accuracy REAL DEFAULT 0.0,
|
||
Altitude REAL,
|
||
Speed REAL,
|
||
Timestamp TEXT NOT NULL,
|
||
SessionId TEXT,
|
||
Notes TEXT
|
||
);
|
||
```
|
||
|
||
## User Interface
|
||
|
||
### Color Scheme
|
||
- **Primary**: Purple (#8B5CF6) - Header and heat map button
|
||
- **Success**: Green (#10B981) - Start tracking
|
||
- **Danger**: Red (#EF4444) - Stop tracking
|
||
- **Info**: Blue (#3B82F6) - Center map
|
||
- **Warning**: Orange (#F59E0B) - Clear demo
|
||
- **Secondary**: Gray (#6B7280) - Reset map
|
||
|
||
### Layout
|
||
- **Header**: Application title with purple background
|
||
- **Map Area**: Full-screen interactive map
|
||
- **Controls**: Two-row button layout with status display
|
||
- **Status Bar**: Location count and system information
|
||
|
||
## Platform Support
|
||
|
||
### Android
|
||
- **Minimum SDK**: API level 21 (Android 5.0)
|
||
- **Target SDK**: API level 34 (Android 14)
|
||
- **Permissions**:
|
||
- `ACCESS_FINE_LOCATION`: Precise location access
|
||
- `ACCESS_COARSE_LOCATION`: Approximate location access
|
||
- `ACCESS_BACKGROUND_LOCATION`: Background location tracking
|
||
|
||
### iOS
|
||
- **Minimum Version**: iOS 15.0
|
||
- **Permissions**:
|
||
- `NSLocationWhenInUseUsageDescription`: Location access when app is in use
|
||
- `NSLocationAlwaysAndWhenInUseUsageDescription`: Always location access
|
||
- `NSLocationAlwaysUsageDescription`: Background location access
|
||
- **Capabilities**: Background location updates
|
||
|
||
### macOS
|
||
- **Minimum Version**: macOS 12.0
|
||
- **Architecture**: Apple Silicon and Intel
|
||
|
||
## Privacy & Security
|
||
|
||
- **Local Storage**: All data stored locally on device
|
||
- **No Cloud Sync**: No data transmitted to external servers
|
||
- **Open Source Maps**: No tracking by commercial map providers
|
||
- **Permission-Based**: Location access only when explicitly granted
|
||
|
||
## Performance
|
||
|
||
### Optimization Features
|
||
- **Efficient Rendering**: WebView-based map rendering
|
||
- **Memory Management**: Proper disposal of resources
|
||
- **Background Processing**: Non-blocking location updates
|
||
- **Responsive UI**: Smooth interactions and animations
|
||
|
||
### System Requirements
|
||
- **RAM**: Minimum 2GB recommended
|
||
- **Storage**: 50MB for app and data
|
||
- **Network**: Internet required for map tiles
|
||
- **GPS**: Location services enabled
|
||
|
||
## Troubleshooting
|
||
|
||
### Common Issues
|
||
|
||
1. **Map Not Loading**
|
||
- Check internet connection
|
||
- Verify OpenStreetMap tile availability
|
||
- Restart the application
|
||
|
||
2. **Location Not Found**
|
||
- Ensure location permissions are granted
|
||
- Check GPS/Location services are enabled
|
||
- Verify device location settings
|
||
|
||
3. **Performance Issues**
|
||
- Clear demo data if too many points
|
||
- Restart the application
|
||
- Check available device memory
|
||
|
||
### Build Issues
|
||
|
||
#### Android Build Issues
|
||
- Ensure Android SDK API level 34+ is installed
|
||
- Accept Android SDK licenses
|
||
- Set correct Android SDK path in project file
|
||
|
||
#### iOS Build Issues
|
||
- Ensure Xcode 16.4+ is installed
|
||
- Set up iOS development certificates
|
||
- Configure provisioning profiles
|
||
|
||
#### Location Permissions
|
||
- Grant location permissions when prompted
|
||
- Check device location settings
|
||
- Ensure location services are enabled
|
||
|
||
## Contributing
|
||
|
||
1. Fork the repository
|
||
2. Create a feature branch
|
||
3. Make your changes
|
||
4. Test thoroughly
|
||
5. Submit a pull request
|
||
|
||
## License
|
||
|
||
This project is licensed under the MIT License - see the LICENSE file for details.
|
||
|
||
For production use, consider:
|
||
- Adding comprehensive error handling
|
||
- Implementing proper logging
|
||
- Adding unit tests
|
||
- Optimizing battery usage
|
||
- Adding privacy controls
|
||
|
||
## Acknowledgments
|
||
|
||
- **OpenStreetMap**: Free, open-source map data
|
||
- **Leaflet.js**: Interactive map library
|
||
- **.NET MAUI**: Cross-platform framework
|
||
- **Entity Framework Core**: Data access framework
|
||
|
||
## Support
|
||
|
||
For questions, issues, or feature requests:
|
||
- Create an issue in the repository
|
||
- Check the documentation
|
||
- Review the troubleshooting guide
|
||
|
||
## Disclaimer
|
||
|
||
This repository was created as part of the coursework for the **Master’s in Information Technology** program at the **University of the Cumberlands**, for the course **Software Engineering and Multiplatform App Development**.
|
||
|
||
**Student Information:**
|
||
- **Name:** Carlos Gutierrez
|
||
- **University Email:** cgutierrez44833@ucumberlands.edu
|
||
- **Personal Email**: carlos.gutierrez@carg.dev
|
||
|
||
This project was developed for educational purposes only and is not intended for commercial use. All code and materials are submitted as part of the academic requirements for the course.
|
||
|
||
---
|
||
|
||
**Built with .NET MAUI and OpenStreetMap**
|