Mapy on Flutter [PL]

Transcript

1. Mapy a Flutter Wojciech Warwas https://flickr.com/photos/sunsetnoir/49299041361 Aktualne możliwości i plany na przyszłość
2. Do czego używamy map w aplikacjach mobilnych? https://pixabay.com/photos/navigation- car-drive-road-gps-1048294/ https://www.flickr.com/photos/mapbox/7178387030 https://www.flickr.com/photos/60681945@N00/5349797480/ https://pixabay.com/photos/smartphone-location-lg-navigation-2198559/ Nawigacja Lokalizacja Trasy Punkty i obszary na mapie
3. Do czego używamy map w aplikacjach mobilnych? https://pixabay.com/photos/navigation- car-drive-road-gps-1048294/ https://www.flickr.com/photos/mapbox/7178387030 https://www.flickr.com/photos/60681945@N00/5349797480/ https://pixabay.com/photos/smartphone-location-lg-navigation-2198559/ Nawigacja Lokalizacja Trasy Punkty i obszary na mapie
4. Jak obecnie wyglądają mapy na flutterze?
5. Czego potrzebujemy do wyświetlenia map? Provider danych Metody wyświetlania
6. Provider danych Google Maps MapBox HERE maps OpenStreet Map Własny hosting Azure Sygic
7. Provider danych Google Maps MapBox HERE maps OpenStreet Map Własny hosting Sygic Czego potrzebujemy do wyświetlenia map? Metody wyświetlania Azure
8. Metody wyświetlania Google Maps Mapbox (unofficial) Flutter_here_maps (unofficial) flutter_map Map
9. Metody wyświetlania Google Maps Mapbox (unofficial) Flutter_here_maps (unofficial) flutter_map Map Jako Widok natywny Jako Flutter Widget
10. Metody wyświetlania Google Maps Mapbox (unofficial) Flutter_here_maps (unofficial) flutter_map Map Jako Widok natywny Jako Flutter Widget
11. Widoki natywne: ograniczenia Wiele wcześniejszych ograniczeń zostało poprawionych w wersji 2 widoków platformy Android: Nadal kilka problemów z tekstem i accessibility Konieczność implementacji dla każdej platformy z osobna Rysowanie nad widokiem natywnym Obsługa klawiatury wywoływana przez widok natywny Transformacje rysowania widoku: wielkości, położenia, kolorowania
12. Google maps cechy Animowanie kamery Wykrywanie interakcji: click, long click, camera idle Dodawanie do mapy markerów (bitmapa), circle, polygon i polyline Brak oficjalnego wsparcia dla clusteringu markerów Gotowa implementacja lokalizacji użytkownika Ograniczenia identyczne jak w przypadku natywnych SDK (np. Brak gradientów w polyline) Wsparcie dla styli Szczątkowa dokumentacja
13. <application android:name="io.flutter.app.FlutterApplication" android:label=“***” android:icon="@mipmap/ic_launcher"> <meta-data android:name="com.google.android.geo.API_KEY" android:value=“A************************************s”/> android/app/src/main/AndroidManifest.xml
14. <application android:name="io.flutter.app.FlutterApplication" android:label=“***” android:icon="@mipmap/ic_launcher"> <meta-data android:name="com.google.android.geo.API_KEY" android:value=“A************************************s”/> android/app/src/main/AndroidManifest.xml @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: GoogleMap( mapType: MapType.normal, myLocationEnabled: true, myLocationButtonEnabled: true, onMapCreated: (GoogleMapController controller) { _controller = controller; }, initialCameraPosition: GoogleMapsPage._initialCamera, ), ), );
15. Flutter map cechy Rysowane w całości przez Fluttera Brak kodu natywnego i jego ograniczeń Dodawanie do mapy markerów, circle, polygon, polyline i bitmap Wsparcie dla pluginów: clustering, lokalizacja usera i inne Obsługa wszystkich wspieranych platform Brak przywiązania do providera danych Brak domyślnie kilku podstawowych funkcji jak obracanie mapy, lokalizacja użytkownika Szczątkowa dokumentacja
16. @override Widget build(BuildContext context) { return Scaffold( body: FlutterMap( options: MapOptions( center: center, ), layers: [ TileLayerOptions( urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', subdomains: ['a', 'b', 'c'], ), ], ), ); }
17. @override Widget build(BuildContext context) { return Scaffold( body: FlutterMap( options: MapOptions( center: center, ), layers: [ TileLayerOptions( urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', subdomains: ['a', 'b', 'c'], ), ], ), ); } MarkerLayerOptions( markers: [ Marker( width: 80.0, height: 80.0, point: LatLng(50.264314, 19.023824), builder: (ctx) => Container( child: FlutterLogo(), ), ), ], ),
21. Stylowanie Google maps - wymaga stworzenia stylu na
 https://mapstyle.withgoogle.com/, pobraniu jako JSON, i ustawieniu w kontrolerze Flutter maps - należy dostarczyć link do ostylowanych tile lub wykorzystać WMS layer
22. import 'package:flutter/services.dart' show rootBundle; String _mapStyle; rootBundle.loadString('assets/gmaps_style.txt').then((string) { _mapStyle = string; });
23. import 'package:flutter/services.dart' show rootBundle; String _mapStyle; rootBundle.loadString('assets/gmaps_style.txt').then((string) { _mapStyle = string; }); @override void initState() { super.initState(); }
24. String _mapStyle; @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: GoogleMap( mapType: MapType.normal, myLocationEnabled: true, myLocationButtonEnabled: true, onMapCreated: (GoogleMapController controller) { _controller = controller; }, initialCameraPosition: GoogleMapsStylesPage._initialCamera, ), ), ); _controller.setMapStyle(_mapStyle);
25. String _mapStyle; @override Widget build(BuildContext context) { return Scaffold( body: SafeArea( child: GoogleMap( mapType: MapType.normal, myLocationEnabled: true, myLocationButtonEnabled: true, onMapCreated: (GoogleMapController controller) { _controller = controller; }, initialCameraPosition: GoogleMapsStylesPage._initialCamera, ), ), ); _controller.setMapStyle(_mapStyle);
26. Flutter web a mapy Jedynie flutter_map pozwala na renderowanie map w trybie web Wymaga wyłączenia cachowania tile Posiada ograniczony zakres interakcji (brak pinch to zoom)
27. Jak obecnie wyglądają mapy na flutterze? W ciągłym developmencie Można używać na produkcji* Brak nawigacji Słaba dokumentacja
28. Inne SDK wyświetlające mapy nieoficjalny proof of concept, nie opublikowane na pub.dev, platform views wersja 0.1 pojawiła się tydzień temu, wciąż brakuje wielu funkcji Here maps - Map - Wersja 0.0.5, większość podstawowych funkcjonalności jest przeportowana, platform views Mapbox -
29. Wojciech Warwas https://flickr.com/photos/sunsetnoir/49299041361 Q&A @wojciech_warwas @obiwanzenobi
30. https://flickr.com/photos/sunsetnoir/49299041361 Linki / Bibliografia https://developers.google.com/maps/documentation/javascript/coordinates https://en.wikipedia.org/wiki/World_Geodetic_System https://medium.com/flutter-community/implement-real-time-location-updates-on-google-maps-in-flutter-235c8a09173e https://github.com/flutter/plugins/tree/master/packages/google_maps_flutter/google_maps_flutter https://github.com/flutter/flutter/wiki/Android-Platform-Views https://github.com/johnpryan/flutter_map https://en.wikipedia.org/wiki/Web_Map_Service