Merge pull request 'feature/routing-map' (#15) from feature/routing-map into main

Reviewed-on: #15
This commit is contained in:
v4l3n71n 2024-11-17 12:56:18 +01:00
commit 67b56b5764
2 changed files with 266 additions and 79 deletions

View File

@ -244,7 +244,7 @@ class _ItemMenuState extends State<ItemMenu> with ShowErrorDialog {
Navigator.push(
context,
MaterialPageRoute(
builder: (_) => Mapboxpages(
builder: (_) => MapboxPages(
title: '${widget.title}',
place: '${place}')));
},

View File

@ -1,18 +1,16 @@
import 'dart:convert';
import 'dart:typed_data';
import 'dart:io';
import 'package:flutter/services.dart'; // For loading assets
import 'package:flutter/material.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart'; // For environment variables
import 'package:flutter/services.dart'; // For loading assets
import 'package:http/http.dart' as http;
import 'package:mapbox_gl/mapbox_gl.dart';
import 'package:flutter_dotenv/flutter_dotenv.dart'; // Import dotenv
import 'package:shared_preferences/shared_preferences.dart';
import 'package:geolocator/geolocator.dart'; // For getting the user's location
import '../classes/alert.dart'; // Assuming this contains your error dialog code.
import '../classes/events.dart'; // Your Event class, assuming you are using it.
import '../variable/globals.dart' as globals;
import 'package:shared_preferences/shared_preferences.dart';
void main() async {
await dotenv.load(fileName: ".env"); // Load .env file
runApp(const MyApp());
@ -24,46 +22,48 @@ class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
title: 'Flutter Demo',
title: 'Flutter Directions Example',
theme: ThemeData(
primarySwatch: Colors.blue,
),
home: const Mapboxpages(title: 'Event Location', place: "Flutter"),
home: const MapboxPages(title: 'Event Location', place: "Flutter"),
);
}
}
class Mapboxpages extends StatefulWidget {
const Mapboxpages({Key? key, required this.title, required this.place})
class MapboxPages extends StatefulWidget {
const MapboxPages({Key? key, required this.title, required this.place})
: super(key: key);
final String title;
final String place;
@override
State<Mapboxpages> createState() => _MapboxpagesState();
State<MapboxPages> createState() => _MapboxPagesState();
}
class _MapboxpagesState extends State<Mapboxpages> with ShowErrorDialog {
class _MapboxPagesState extends State<MapboxPages> with ShowErrorDialog {
late MapboxMapController mapController;
late String mapboxAccessToken;
late MapboxMapController mapController; // Mark mapController as nullable
List<LatLng> routeCoordinates = [];
String selectedMode = 'driving';
double longitude = 0.0;
double latitude = 0.0;
bool isLoading = true;
late LatLng userPosition;
bool isUserPositionInitialized = false;
Line? currentRouteLine;
@override
void initState() {
super.initState();
_initToken();
_getEventInfo();
_getUserLocation();
}
// Load the Mapbox access token from the .env file
void _initToken() {
mapboxAccessToken = dotenv.env['MAPBOX_ACCESS_TOKEN'] ?? '';
if (mapboxAccessToken.isEmpty) {
showErrorDialog(context, "Mapbox Access Token is not available.");
return;
}
}
@ -76,70 +76,112 @@ class _MapboxpagesState extends State<Mapboxpages> with ShowErrorDialog {
var responseGet = await http.get(urlGet,
headers: {HttpHeaders.cookieHeader: 'access_token=${accessToken}'});
stderr.writeln('Response Get status: ${responseGet.statusCode}');
if (responseGet.statusCode == 200) {
var events = jsonDecode(utf8.decode(responseGet.bodyBytes));
latitude = events["latitude"];
longitude = events["longitude"];
setState(() {
isLoading = false;
});
} else {
var text = "";
switch (responseGet.statusCode) {
case 400:
{
text = "Requête mal construite";
_handleErrorResponse(responseGet.statusCode);
}
} else {
showErrorDialog(context, "Invalid cache.");
}
}
void _handleErrorResponse(int statusCode) {
String text;
switch (statusCode) {
case 400:
text = "Bad Request.";
break;
case 406:
{
text = "Mot de passe incorrect";
}
text = "Incorrect Password.";
break;
case 404:
{
text = "Utilisateur inconnu";
}
text = "User Not Found.";
break;
case 403:
{
text = "Vous n'avez pas l'autorisation de faire cette action";
}
text = "Action not permitted.";
break;
case 410:
{
text = "Token invalide";
}
text = "Invalid Token.";
break;
case 500:
{
text = "Probleme interne du serveur";
}
text = "Internal Server Error.";
break;
default:
{
text = "Probleme d'authentification inconnu";
}
break;
text = "Unknown error.";
}
showErrorDialog(context, text);
}
Future<void> _getUserLocation() async {
try {
bool serviceEnabled = await Geolocator.isLocationServiceEnabled();
if (!serviceEnabled) {
showErrorDialog(context, "Location services are disabled.");
return;
}
LocationPermission permission = await Geolocator.checkPermission();
if (permission == LocationPermission.denied) {
permission = await Geolocator.requestPermission();
if (permission == LocationPermission.denied) {
showErrorDialog(context, "Location permissions are denied.");
return;
}
}
if (permission == LocationPermission.deniedForever) {
showErrorDialog(context,
"Location permissions are permanently denied. Enable them in settings.");
return;
}
LocationSettings locationSettings = LocationSettings(
accuracy: LocationAccuracy.high,
distanceFilter:
10, // Optional: Minimum distance (in meters) to trigger location update
);
Position position = await Geolocator.getCurrentPosition(
locationSettings: locationSettings,
);
setState(() {
userPosition = LatLng(position.latitude, position.longitude);
isUserPositionInitialized = true;
});
_initToken();
_getEventInfo();
} catch (e) {
showErrorDialog(context, "Failed to get user location: $e");
}
}
Future<void> _fetchRoute(
LatLng origin, LatLng destination, String mode) async {
final url = Uri.parse(
'https://api.mapbox.com/directions/v5/mapbox/$mode/${origin.longitude},${origin.latitude};${destination.longitude},${destination.latitude}?geometries=geojson&access_token=$mapboxAccessToken',
);
final response = await http.get(url);
if (response.statusCode == 200) {
final data = jsonDecode(response.body);
final geometry = data['routes'][0]['geometry']['coordinates'];
setState(() {
routeCoordinates = geometry.map<LatLng>((coord) {
return LatLng(coord[1], coord[0]);
}).toList();
});
} else {
showErrorDialog(context, "Cache invalide");
showErrorDialog(
context, "Failed to fetch the route: ${response.statusCode}");
}
}
// Load image from assets as Uint8List
Future<Uint8List> _loadMarkerImage() async {
final ByteData data = await rootBundle.load('images/marker.png');
return data.buffer.asUint8List();
}
void _onMapCreated(MapboxMapController controller) {
mapController = controller;
}
// Called when the map is created
void _onStyleLoaded() async {
// Log the map controller and coordinates
@ -152,15 +194,15 @@ class _MapboxpagesState extends State<Mapboxpages> with ShowErrorDialog {
// Ensure the coordinates are valid
if (latitude != 0.0 && longitude != 0.0) {
// Load marker image as Uint8List
final markerImage = await _loadMarkerImage();
final userMarkerImage = await _loadMarkerImage('images/marker.png');
// Register the image with Mapbox
await mapController!.addImage("custom-marker", markerImage);
await mapController.addImage('event-marker', userMarkerImage);
final symbolOptions = SymbolOptions(
geometry: LatLng(latitude, longitude),
iconImage: "custom-marker", // Use the registered custom marker
iconSize: 0.5, // Optional: Adjust size
iconImage: "event-marker", // Use the registered custom marker
iconSize: 0.4, // Optional: Adjust size
);
// Debugging symbol options
@ -181,21 +223,166 @@ class _MapboxpagesState extends State<Mapboxpages> with ShowErrorDialog {
}
}
Future<void> _drawRouteAndMarkers() async {
// Remove previous route line if it exists
if (currentRouteLine != null) {
await mapController.removeLine(currentRouteLine!);
currentRouteLine = null;
}
if (!isUserPositionInitialized) {
showErrorDialog(
context, "User position is not yet initialized. Try again.");
return;
}
if (mapController != null &&
userPosition != null &&
latitude != 0.0 &&
longitude != 0.0) {
final destination = LatLng(latitude, longitude);
// Register the custom images
// Add event marker
final userMarkerImage = await _loadMarkerImage('images/marker.png');
// Register the image with Mapbox
await mapController.addImage('user-marker', userMarkerImage);
await mapController.addSymbol(SymbolOptions(
geometry: userPosition,
iconImage: 'user-marker', // Custom icon for event
iconSize: 0.4,
));
// Fetch and draw route
await _fetchRoute(userPosition, destination, selectedMode);
if (routeCoordinates.isNotEmpty) {
currentRouteLine = await mapController.addLine(
LineOptions(
geometry: routeCoordinates,
lineColor: '#3b9ddd',
lineWidth: 5.0,
lineOpacity: 0.8,
),
);
_zoomToFitRoute(routeCoordinates);
}
} else {
showErrorDialog(context, "Invalid coordinates or user position.");
}
}
void _zoomToFitRoute(List<LatLng> coordinates) {
// Calculate the bounding box
double minLat = coordinates.first.latitude;
double maxLat = coordinates.first.latitude;
double minLng = coordinates.first.longitude;
double maxLng = coordinates.first.longitude;
for (LatLng coord in coordinates) {
if (coord.latitude < minLat) minLat = coord.latitude;
if (coord.latitude > maxLat) maxLat = coord.latitude;
if (coord.longitude < minLng) minLng = coord.longitude;
if (coord.longitude > maxLng) maxLng = coord.longitude;
}
// Define the bounds
LatLng southwest = LatLng(minLat, minLng);
LatLng northeast = LatLng(maxLat, maxLng);
mapController.moveCamera(
CameraUpdate.newLatLngBounds(
LatLngBounds(southwest: southwest, northeast: northeast),
left: 50, // Padding on the left
top: 50, // Padding on the top
right: 50, // Padding on the right
bottom: 50, // Padding on the bottom
),
);
}
// Load image from assets
Future<Uint8List> _loadMarkerImage(String assetPath) async {
final ByteData data = await rootBundle.load(assetPath);
return data.buffer.asUint8List();
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text(widget.place)),
body: isLoading
appBar: AppBar(
title: Text(widget.place),
actions: [
DropdownButton<String>(
value: selectedMode,
items: [
DropdownMenuItem(
value: 'walking',
child: Row(
children: [
Icon(Icons.directions_walk, color: Colors.blue),
SizedBox(width: 8),
Text('Walking'),
],
),
),
DropdownMenuItem(
value: 'cycling',
child: Row(
children: [
Icon(Icons.directions_bike, color: Colors.green),
SizedBox(width: 8),
Text('Cycling'),
],
),
),
DropdownMenuItem(
value: 'driving',
child: Row(
children: [
Icon(Icons.directions_car, color: Colors.red),
SizedBox(width: 8),
Text('Driving'),
],
),
),
],
onChanged: (mode) {
setState(() {
selectedMode = mode!;
});
},
)
],
),
body: Stack(
children: [
isLoading
? Center(child: CircularProgressIndicator())
: MapboxMap(
accessToken: mapboxAccessToken, // Your Mapbox API key
onMapCreated: _onMapCreated,
accessToken: mapboxAccessToken,
onMapCreated: (controller) {
mapController = controller;
},
onStyleLoadedCallback: _onStyleLoaded,
initialCameraPosition: CameraPosition(
target: LatLng(latitude, longitude),
zoom: 14.0,
),
),
Positioned(
bottom: 20,
right: 20,
child: FloatingActionButton(
onPressed: _drawRouteAndMarkers,
child: Icon(Icons.directions),
tooltip: 'Get Directions and Markers',
),
),
],
),
);
}
}