mirror of
https://bitbucket.org/FransoletThomas/tablet-app.git
synced 2025-12-06 08:31:19 +00:00
support MapBox (WIP)
This commit is contained in:
Thomas Fransolet
parent
2cffb772c3
commit
fbfd7e26b7
@ -2,3 +2,4 @@ org.gradle.jvmargs=-Xmx1536M
|
|||||||
android.useAndroidX=true
|
android.useAndroidX=true
|
||||||
android.enableJetifier=true
|
android.enableJetifier=true
|
||||||
android.enableR8=true
|
android.enableR8=true
|
||||||
|
SDK_REGISTRY_TOKEN=sk.eyJ1IjoidGZyYW5zb2xldCIsImEiOiJjbHRpcTF1d28wYmxmMmxwNjRleXpodGY0In0.qr-jo1vAb08bL3WRDEB4pw
|
||||||
299
lib/Screens/Map/map_box_view.dart
Normal file
299
lib/Screens/Map/map_box_view.dart
Normal file
@ -0,0 +1,299 @@
|
|||||||
|
import 'dart:async';
|
||||||
|
import 'dart:typed_data';
|
||||||
|
import 'package:enum_to_string/enum_to_string.dart';
|
||||||
|
import 'package:flutter/foundation.dart';
|
||||||
|
import 'package:flutter/material.dart';
|
||||||
|
import 'package:google_maps_flutter/google_maps_flutter.dart';
|
||||||
|
import 'package:manager_api/api.dart';
|
||||||
|
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart' as mapBox;
|
||||||
|
import 'package:provider/provider.dart';
|
||||||
|
import 'package:tablet_app/Components/multi_select_container.dart';
|
||||||
|
import 'package:tablet_app/Models/map-marker.dart';
|
||||||
|
import 'package:tablet_app/Screens/Map/map_context.dart';
|
||||||
|
import 'package:html/parser.dart' show parse;
|
||||||
|
import 'package:tablet_app/Screens/Map/map_view.dart';
|
||||||
|
import 'package:tablet_app/constants.dart';
|
||||||
|
|
||||||
|
class MapBoxView extends StatefulWidget {
|
||||||
|
final MapDTO? mapDTO;
|
||||||
|
final Uint8List? selectedMarkerIcon;
|
||||||
|
final String? language;
|
||||||
|
const MapBoxView({
|
||||||
|
Key? key,
|
||||||
|
this.mapDTO,
|
||||||
|
this.selectedMarkerIcon,
|
||||||
|
this.language,
|
||||||
|
}) : super(key: key);
|
||||||
|
|
||||||
|
@override
|
||||||
|
_MapBoxViewState createState() => _MapBoxViewState();
|
||||||
|
}
|
||||||
|
|
||||||
|
class AnnotationClickListener extends mapBox.OnPointAnnotationClickListener {
|
||||||
|
late List<MapMarker> markersList;
|
||||||
|
late MapContext mapContext;
|
||||||
|
|
||||||
|
AnnotationClickListener({
|
||||||
|
required this.markersList,
|
||||||
|
required this.mapContext,
|
||||||
|
});
|
||||||
|
|
||||||
|
@override
|
||||||
|
void onPointAnnotationClick(mapBox.PointAnnotation annotation) {
|
||||||
|
try{
|
||||||
|
var markerToShow = markersList.firstWhere((ml) => ml.id.toString() == annotation.textField);
|
||||||
|
mapContext.setSelectedMarker(markerToShow);
|
||||||
|
} catch(e) {
|
||||||
|
print("ISSSUE setSelectedMarker");
|
||||||
|
print(e);
|
||||||
|
}
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
class _MapBoxViewState extends State<MapBoxView> {
|
||||||
|
late mapBox.MapboxMap? mapboxMap;
|
||||||
|
late mapBox.PointAnnotationManager? pointAnnotationManager;
|
||||||
|
|
||||||
|
_onMapCreated(mapBox.MapboxMap mapboxMap, MapContext mapContext) {
|
||||||
|
this.mapboxMap = mapboxMap;
|
||||||
|
|
||||||
|
mapboxMap.annotations.createPointAnnotationManager().then((pointAnnotationManager) async {
|
||||||
|
this.pointAnnotationManager = pointAnnotationManager;
|
||||||
|
|
||||||
|
var options = <mapBox.PointAnnotationOptions>[];
|
||||||
|
pointsToShow!.forEach((point) {
|
||||||
|
var textSansHTML = parse(point.title!.firstWhere((translation) => translation.language == widget.language).value);
|
||||||
|
var mapMarker = new MapMarker(
|
||||||
|
id: point.id,
|
||||||
|
title: parse(textSansHTML.body!.text).documentElement!.text,
|
||||||
|
description: point.description!.firstWhere((translation) => translation.language == widget.language).value,
|
||||||
|
longitude: point.longitude,
|
||||||
|
latitude: point.latitude,
|
||||||
|
contents: point.contents
|
||||||
|
);
|
||||||
|
markersList.add(mapMarker);
|
||||||
|
if (mapMarker.latitude != null && mapMarker.longitude != null) {
|
||||||
|
/*markers.add(Marker(
|
||||||
|
draggable: false,
|
||||||
|
markerId: MarkerId(mapMarker.latitude! + mapMarker.longitude!),
|
||||||
|
position: LatLng(
|
||||||
|
double.tryParse(mapMarker.latitude!)!,
|
||||||
|
double.tryParse(mapMarker.longitude!)!,
|
||||||
|
),
|
||||||
|
icon: widget.selectedMarkerIcon != null ? BitmapDescriptor.fromBytes(widget.selectedMarkerIcon!) : BitmapDescriptor.defaultMarker,
|
||||||
|
/*icon: BitmapDescriptor.defaultMarkerWithHue(
|
||||||
|
BitmapDescriptor.hueYellow,
|
||||||
|
),*/
|
||||||
|
onTap: () {
|
||||||
|
//setState(() {
|
||||||
|
print("coucou tapped");
|
||||||
|
/*mapContext.setSelectedMarker(
|
||||||
|
new MapMarker(
|
||||||
|
title: mapMarker.title,
|
||||||
|
contents: mapMarker.contents,
|
||||||
|
description: mapMarker.description,
|
||||||
|
longitude: mapMarker.longitude,
|
||||||
|
latitude: mapMarker.latitude,
|
||||||
|
)
|
||||||
|
);*/
|
||||||
|
//});
|
||||||
|
},
|
||||||
|
infoWindow: InfoWindow.noText));*/
|
||||||
|
}
|
||||||
|
print("ADD POINT TO MAPPPPPPPPPPPP");
|
||||||
|
print(widget.selectedMarkerIcon);
|
||||||
|
options.add(mapBox.PointAnnotationOptions(
|
||||||
|
geometry: mapBox.Point(
|
||||||
|
coordinates: mapBox.Position(
|
||||||
|
double.tryParse(mapMarker.longitude!)!,
|
||||||
|
double.tryParse(mapMarker.latitude!)!,
|
||||||
|
)).toJson(),
|
||||||
|
iconSize: 1.3,
|
||||||
|
textField: mapMarker.id.toString(),
|
||||||
|
textOpacity: 0.0,
|
||||||
|
iconOffset: [0.0, 0.0],
|
||||||
|
symbolSortKey: 10,
|
||||||
|
iconColor: 0,
|
||||||
|
iconImage: widget.selectedMarkerIcon == null ? "car-15": null,
|
||||||
|
image: widget.selectedMarkerIcon, //widget.selectedMarkerIcon,
|
||||||
|
)); // ,
|
||||||
|
});
|
||||||
|
/*options.add(mapBox.PointAnnotationOptions(
|
||||||
|
geometry: mapBox.Point(
|
||||||
|
coordinates: mapBox.Position(
|
||||||
|
0.381457,
|
||||||
|
6.687337,
|
||||||
|
)).toJson(), image: widget.selectedMarkerIcon));*/
|
||||||
|
print(options.length);
|
||||||
|
pointAnnotationManager.createMulti(options);
|
||||||
|
|
||||||
|
/*var carOptions = <mapBox.PointAnnotationOptions>[];
|
||||||
|
for (var i = 0; i < 20; i++) {
|
||||||
|
carOptions.add(mapBox.PointAnnotationOptions(
|
||||||
|
geometry: mapBox.Point(
|
||||||
|
coordinates: mapBox.Position(
|
||||||
|
double.tryParse(mapMarker.longitude!)!,
|
||||||
|
double.tryParse(mapMarker.latitude!)!,
|
||||||
|
)).toJson(), iconImage: "car-15"));
|
||||||
|
}*/
|
||||||
|
//pointAnnotationManager.createMulti(carOptions);
|
||||||
|
pointAnnotationManager.addOnPointAnnotationClickListener(AnnotationClickListener(mapContext: mapContext, markersList: markersList));
|
||||||
|
});
|
||||||
|
}
|
||||||
|
|
||||||
|
ConfigurationDTO? configurationDTO;
|
||||||
|
//Completer<GoogleMapController> _controller = Completer();
|
||||||
|
//Set<Marker> markers = {};
|
||||||
|
List<GeoPointDTO>? pointsToShow = [];
|
||||||
|
List<String>? selectedCategories = [];
|
||||||
|
bool init = false;
|
||||||
|
|
||||||
|
/*Set<Marker> getMarkers(language, mapContext) {
|
||||||
|
markers = {};
|
||||||
|
|
||||||
|
pointsToShow!.forEach((point) {
|
||||||
|
var textSansHTML = parse(point.title!.firstWhere((translation) => translation.language == language).value);
|
||||||
|
var mapMarker = new MapMarker(
|
||||||
|
id: point.id,
|
||||||
|
title: parse(textSansHTML.body!.text).documentElement!.text,
|
||||||
|
description: point.description!.firstWhere((translation) => translation.language == language).value,
|
||||||
|
longitude: point.longitude,
|
||||||
|
latitude: point.latitude,
|
||||||
|
contents: point.contents
|
||||||
|
);
|
||||||
|
if (mapMarker.latitude != null && mapMarker.longitude != null) {
|
||||||
|
markers.add(Marker(
|
||||||
|
draggable: false,
|
||||||
|
markerId: MarkerId(mapMarker.latitude! + mapMarker.longitude!),
|
||||||
|
position: LatLng(
|
||||||
|
double.tryParse(mapMarker.latitude!)!,
|
||||||
|
double.tryParse(mapMarker.longitude!)!,
|
||||||
|
),
|
||||||
|
icon: widget.selectedMarkerIcon != null ? BitmapDescriptor.fromBytes(widget.selectedMarkerIcon!) : BitmapDescriptor.defaultMarker,
|
||||||
|
/*icon: BitmapDescriptor.defaultMarkerWithHue(
|
||||||
|
BitmapDescriptor.hueYellow,
|
||||||
|
),*/
|
||||||
|
onTap: () {
|
||||||
|
//setState(() {
|
||||||
|
mapContext.setSelectedMarker(
|
||||||
|
new MapMarker(
|
||||||
|
title: mapMarker.title,
|
||||||
|
contents: mapMarker.contents,
|
||||||
|
description: mapMarker.description,
|
||||||
|
longitude: mapMarker.longitude,
|
||||||
|
latitude: mapMarker.latitude,
|
||||||
|
)
|
||||||
|
);
|
||||||
|
//});
|
||||||
|
},
|
||||||
|
infoWindow: InfoWindow.noText));
|
||||||
|
}
|
||||||
|
});
|
||||||
|
return markers;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
@override
|
||||||
|
void initState() {
|
||||||
|
pointsToShow = widget.mapDTO!.points;
|
||||||
|
selectedCategories = widget.mapDTO!.categories!.map((categorie) => categorie.label!.firstWhere((element) => element.language == widget.language).value!).toList();
|
||||||
|
super.initState();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
void dispose() {
|
||||||
|
// TODO: implement dispose
|
||||||
|
super.dispose();
|
||||||
|
}
|
||||||
|
|
||||||
|
@override
|
||||||
|
Widget build(BuildContext context) {
|
||||||
|
final mapContext = Provider.of<MapContext>(context);
|
||||||
|
Size size = MediaQuery.of(context).size;
|
||||||
|
|
||||||
|
if(!init) {
|
||||||
|
print("getmarkers in build");
|
||||||
|
//getMarkers(widget.language, mapContext);
|
||||||
|
init = true;
|
||||||
|
}
|
||||||
|
//MapTypeApp? mapTypeApp = MapTypeApp.fromJson(widget.mapDTO!.mapType!.value);
|
||||||
|
//print(mapTypeApp.toString());
|
||||||
|
|
||||||
|
MapType type = MapType.hybrid;
|
||||||
|
//if(kIsWeb) {
|
||||||
|
if(widget.mapDTO!.mapType != null) {
|
||||||
|
switch(widget.mapDTO!.mapType!.value) {
|
||||||
|
case 0:
|
||||||
|
type = MapType.none;
|
||||||
|
break;
|
||||||
|
case 1:
|
||||||
|
type = MapType.normal;
|
||||||
|
break;
|
||||||
|
case 2:
|
||||||
|
type = MapType.satellite;
|
||||||
|
break;
|
||||||
|
case 3:
|
||||||
|
type = MapType.terrain;
|
||||||
|
break;
|
||||||
|
case 4:
|
||||||
|
type = MapType.hybrid;
|
||||||
|
break;
|
||||||
|
}
|
||||||
|
}
|
||||||
|
|
||||||
|
/*} else {
|
||||||
|
print("is OTHEER");
|
||||||
|
type = EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString()) != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())! : MapType.hybrid;
|
||||||
|
}*/
|
||||||
|
|
||||||
|
|
||||||
|
//MapType type = EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString()) != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())! : MapType.hybrid;
|
||||||
|
return Stack(
|
||||||
|
children: [
|
||||||
|
Center(
|
||||||
|
child: mapBox.MapWidget(
|
||||||
|
key: ValueKey("mapWidget"),
|
||||||
|
styleUri: mapBox.MapboxStyles.STANDARD, // TODO update // widget.mapDTO!.mapType != null ? EnumToString.fromString(MapType.values, widget.mapDTO!.mapType.toString())!: MapType.hybrid,
|
||||||
|
onMapCreated: (maBoxMap) {
|
||||||
|
_onMapCreated(maBoxMap, mapContext);
|
||||||
|
},
|
||||||
|
onTapListener: (listener) {
|
||||||
|
// close on tap
|
||||||
|
mapContext.setSelectedMarker(new MapMarker(longitude: null, latitude: null, title: '', contents: null, description: ''));
|
||||||
|
},
|
||||||
|
cameraOptions: mapBox.CameraOptions(
|
||||||
|
center: mapBox.Point(coordinates: mapBox.Position(4.865105, 50.465503)).toJson(), //TODO add element in manager // MDLF 50.416639, 4.879169 / Namur 50.465503, 4.865105
|
||||||
|
zoom: widget.mapDTO!.zoom != null ? widget.mapDTO!.zoom!.toDouble() : 12),
|
||||||
|
)
|
||||||
|
),
|
||||||
|
Positioned(
|
||||||
|
bottom: 35,
|
||||||
|
left: 10,
|
||||||
|
child: SizedBox(
|
||||||
|
width: size.width * 0.55,
|
||||||
|
child: MultiSelectContainer(
|
||||||
|
label: null,
|
||||||
|
color: kBackgroundGrey,
|
||||||
|
initialValue: selectedCategories!,
|
||||||
|
isMultiple: true,
|
||||||
|
values: widget.mapDTO!.categories!.map((categorie) => categorie.label!.firstWhere((element) => element.language == widget.language).value!).toList(),
|
||||||
|
onChanged: (value) {
|
||||||
|
var tempOutput = new List<String>.from(value);
|
||||||
|
print(tempOutput);
|
||||||
|
if(init) {
|
||||||
|
setState(() {
|
||||||
|
selectedCategories = tempOutput;
|
||||||
|
pointsToShow = widget.mapDTO!.points!.where((point) => tempOutput.any((tps) => point.categorie?.label?.firstWhere((lab) => lab.language == widget.language).value == tps) || point.categorie == null).toList();
|
||||||
|
//markers = getMarkers(widget.language, mapContext);
|
||||||
|
pointAnnotationManager!.deleteAll();
|
||||||
|
mapContext.notifyListeners();
|
||||||
|
});
|
||||||
|
}
|
||||||
|
},
|
||||||
|
),
|
||||||
|
),
|
||||||
|
),
|
||||||
|
],
|
||||||
|
);
|
||||||
|
}
|
||||||
|
|
||||||
|
}
|
||||||
@ -4,6 +4,7 @@ import 'package:firebase_core/firebase_core.dart';
|
|||||||
import 'package:flutter/foundation.dart';
|
import 'package:flutter/foundation.dart';
|
||||||
import 'package:flutter/material.dart';
|
import 'package:flutter/material.dart';
|
||||||
import 'package:manager_api/api.dart';
|
import 'package:manager_api/api.dart';
|
||||||
|
import 'package:mapbox_maps_flutter/mapbox_maps_flutter.dart';
|
||||||
import 'package:path_provider/path_provider.dart';
|
import 'package:path_provider/path_provider.dart';
|
||||||
import 'package:provider/provider.dart';
|
import 'package:provider/provider.dart';
|
||||||
import 'package:tablet_app/client.dart';
|
import 'package:tablet_app/client.dart';
|
||||||
@ -25,6 +26,8 @@ void main() async {
|
|||||||
localContext = await DatabaseHelper.instance.getData();
|
localContext = await DatabaseHelper.instance.getData();
|
||||||
}
|
}
|
||||||
|
|
||||||
|
MapboxOptions.setAccessToken("pk.eyJ1IjoidGZyYW5zb2xldCIsImEiOiJjbHRpcGNvZDYwYWhkMnFxdmF0ampveW10In0.7xHN0NGvUfQu5ThS3RGJRw"); // TODO put in json file or resource file
|
||||||
|
|
||||||
Directory? appDocumentsDirectory = Platform.isIOS ? await getApplicationDocumentsDirectory() : await getDownloadsDirectory();
|
Directory? appDocumentsDirectory = Platform.isIOS ? await getApplicationDocumentsDirectory() : await getDownloadsDirectory();
|
||||||
String localPath = appDocumentsDirectory!.path;
|
String localPath = appDocumentsDirectory!.path;
|
||||||
|
|
||||||
|
|||||||
@ -34,6 +34,8 @@ dependencies:
|
|||||||
google_maps_flutter_web: ^0.5.4+3 # Specific WEB
|
google_maps_flutter_web: ^0.5.4+3 # Specific WEB
|
||||||
youtube_player_iframe: ^4.0.4 # Handle mobile and web here => TO TEST
|
youtube_player_iframe: ^4.0.4 # Handle mobile and web here => TO TEST
|
||||||
|
|
||||||
|
mapbox_maps_flutter: ^1.0.0
|
||||||
|
|
||||||
flare_flutter: ^3.0.2
|
flare_flutter: ^3.0.2
|
||||||
provider: ^6.0.5
|
provider: ^6.0.5
|
||||||
http: ^1.2.0
|
http: ^1.2.0
|
||||||
|
|||||||
Loading…
x
Reference in New Issue
Block a user