- 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
12 KiB
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
Application after clearing demo data
Updated user interface with new controls
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
- Clone the repository
- Open the solution in Visual Studio
- Restore NuGet packages
- Build the application
- Run on your preferred platform
Building for Android
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 - 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 configurationappsettings.Development.json- Development-specific configuration
Configuration Priority:
The configuration is loaded in this order:
- Environment variables
appsettings.jsonfile- Default values (for development)
Environment Variables:
You can set configuration values as environment variables:
On macOS/Linux:
export APP_SETTING="your_value_here"
On Windows (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:
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 accessACCESS_COARSE_LOCATION: Approximate location accessACCESS_BACKGROUND_LOCATION: Background location tracking
iOS
- Minimum Version: iOS 15.0
- Permissions:
NSLocationWhenInUseUsageDescription: Location access when app is in useNSLocationAlwaysAndWhenInUseUsageDescription: Always location accessNSLocationAlwaysUsageDescription: 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
-
Map Not Loading
- Check internet connection
- Verify OpenStreetMap tile availability
- Restart the application
-
Location Not Found
- Ensure location permissions are granted
- Check GPS/Location services are enabled
- Verify device location settings
-
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
- Fork the repository
- Create a feature branch
- Make your changes
- Test thoroughly
- 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