EF-09: Use new map library for web

hieutbui · Oct 18, 2024 · 0ae48bf · 0ae48bf
1 parent ac5c254
commit 0ae48bf
Show file tree

Hide file tree

Showing 8 changed files with 149 additions and 75 deletions.
diff --git a/.github/workflows/gh-pages.yml b/.github/workflows/gh-pages.yml
@@ -46,7 +46,7 @@ jobs:
           flutter clean
           flutter pub get
           flutter pub run build_runner build --delete-conflicting-outputs
-          flutter build web --release --verbose --source-maps --dart-define=MAPBOX_URL_TEMPLATE=${{ secrets.MAPBOX_URL_TEMPLATE }} --base-href="/${GITHUB_REPOSITORY##*/}/$FOLDER/"
+          flutter build web --release --verbose --source-maps --dart-define=MAPBOX_URL_TEMPLATE=${{ secrets.MAPBOX_URL_TEMPLATE }} --dart-define=MAPBOX_ACCESS_TOKEN=${{ secrets.MAPBOX_ACCESS_TOKEN }} --base-href="/${GITHUB_REPOSITORY##*/}/$FOLDER/"
       
       - name: Configure environments
         id: configure

diff --git a/lib/config/env_loader.dart b/lib/config/env_loader.dart
@@ -1,9 +1,15 @@
 import 'package:flutter_dotenv/flutter_dotenv.dart';
 
 class EnvLoader {
+  static const compileTimeEnv = {
+    'MAPBOX_URL_TEMPLATE': String.fromEnvironment('MAPBOX_URL_TEMPLATE'),
+    'MAPBOX_ACCESS_TOKEN': String.fromEnvironment('MAPBOX_ACCESS_TOKEN'),
+  };
+
   static const String envFileName = '.env';
 
   static final String mapURLTemplate = _loadEnv('MAPBOX_URL_TEMPLATE');
+  static final String mapAccessToken = _loadEnv('MAPBOX_ACCESS_TOKEN');
 
   static String _loadEnv(name) => dotenv.get(name);
 }
diff --git a/lib/main.dart b/lib/main.dart
@@ -3,6 +3,7 @@ import 'package:ecoparking_flutter/config/env_loader.dart';
 import 'package:ecoparking_flutter/config/themes.dart';
 import 'package:ecoparking_flutter/di/global/get_it_initializer.dart';
 import 'package:ecoparking_flutter/widgets/theme_builder.dart';
+import 'package:flutter/foundation.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_dotenv/flutter_dotenv.dart';
 import 'package:flutter_localizations/flutter_localizations.dart';
@@ -11,7 +12,11 @@ import 'package:loggy/loggy.dart';
 Future<void> main() async {
   WidgetsFlutterBinding.ensureInitialized();
   GetItInitializer().setUp();
-  await dotenv.load(fileName: EnvLoader.envFileName);
+  if (kReleaseMode) {
+    await dotenv.load(mergeWith: EnvLoader.compileTimeEnv);
+  } else {
+    await dotenv.load(fileName: EnvLoader.envFileName);
+  }
   Loggy.initLoggy(
     logPrinter: const PrettyPrinter(
       showColors: true,

diff --git a/lib/pages/home/home.dart b/lib/pages/home/home.dart
@@ -13,7 +13,6 @@ import 'package:ecoparking_flutter/pages/home/widgets/parking_bottom_sheet_build
 import 'package:ecoparking_flutter/utils/bottom_sheet_utils.dart';
 import 'package:ecoparking_flutter/utils/logging/custom_logger.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_map/flutter_map.dart';
 import 'package:latlong2/latlong.dart';
 import 'package:location/location.dart';
 
@@ -117,37 +116,37 @@ class HomeController extends State<HomePage> with ControllerLoggy {
     return LatLng(locationData.latitude!, locationData.longitude!);
   }
 
-  List<Marker> convertParkingsToMarkers(
-    BuildContext context,
-    List<Parking> parkings,
-  ) {
-    return parkings.map((parking) {
-      return Marker(
-        point: LatLng(parking.latitude, parking.longitude),
-        child: GestureDetector(
-          onTap: () => onParkingMarkerPressed(context, parking),
-          child: Container(
-            width: HomeViewStyles.parkingMarkerOuterSize,
-            height: HomeViewStyles.parkingMarkerOuterSize,
-            decoration: HomeViewStyles.getParkingOuterMarkerDecoration(context),
-            child: Center(
-              child: Container(
-                width: HomeViewStyles.parkingMarkerInnerSize,
-                height: HomeViewStyles.parkingMarkerInnerSize,
-                decoration:
-                    HomeViewStyles.getParkingInnerMarkerDecoration(context),
-                child: Icon(
-                  Icons.local_parking,
-                  color: Theme.of(context).colorScheme.onErrorContainer,
-                  size: HomeViewStyles.parkingMarkerIconSize,
-                ),
-              ),
-            ),
-          ),
-        ),
-      );
-    }).toList();
-  }
+  // List<Marker> convertParkingsToMarkers(
+  //   BuildContext context,
+  //   List<Parking> parkings,
+  // ) {
+  //   return parkings.map((parking) {
+  //     return Marker(
+  //       point: LatLng(parking.latitude, parking.longitude),
+  //       child: GestureDetector(
+  //         onTap: () => onParkingMarkerPressed(context, parking),
+  //         child: Container(
+  //           width: HomeViewStyles.parkingMarkerOuterSize,
+  //           height: HomeViewStyles.parkingMarkerOuterSize,
+  //           decoration: HomeViewStyles.getParkingOuterMarkerDecoration(context),
+  //           child: Center(
+  //             child: Container(
+  //               width: HomeViewStyles.parkingMarkerInnerSize,
+  //               height: HomeViewStyles.parkingMarkerInnerSize,
+  //               decoration:
+  //                   HomeViewStyles.getParkingInnerMarkerDecoration(context),
+  //               child: Icon(
+  //                 Icons.local_parking,
+  //                 color: Theme.of(context).colorScheme.onErrorContainer,
+  //                 size: HomeViewStyles.parkingMarkerIconSize,
+  //               ),
+  //             ),
+  //           ),
+  //         ),
+  //       ),
+  //     );
+  //   }).toList();
+  // }
 
   void onSearchPressed() {
     loggy.warning('Search button pressed');

diff --git a/lib/pages/home/home_view.dart b/lib/pages/home/home_view.dart
@@ -1,12 +1,10 @@
 import 'package:ecoparking_flutter/config/env_loader.dart';
 import 'package:ecoparking_flutter/domain/state/markers/get_current_location_state.dart';
-import 'package:ecoparking_flutter/domain/state/markers/get_parkings_state.dart';
 import 'package:ecoparking_flutter/pages/home/home.dart';
 import 'package:ecoparking_flutter/pages/home/home_view_styles.dart';
 import 'package:ecoparking_flutter/pages/home/widgets/rounded_button/rounded_button.dart';
 import 'package:flutter/material.dart';
-import 'package:flutter_map/flutter_map.dart';
-import 'package:flutter_map_cancellable_tile_provider/flutter_map_cancellable_tile_provider.dart';
+import 'package:mapbox_gl/mapbox_gl.dart';
 
 class HomePageView extends StatelessWidget {
   final HomeController controller;
@@ -28,43 +26,51 @@ class HomePageView extends StatelessWidget {
               controller.convertLocationDataToLatLng(notifier.currentLocation);
           return Stack(
             children: [
-              FlutterMap(
-                options: MapOptions(
-                  initialCenter: center,
-                  initialZoom: HomeViewStyles.initialZoom,
+              // FlutterMap(
+              //   options: MapOptions(
+              //     initialCenter: center,
+              //     initialZoom: HomeViewStyles.initialZoom,
+              //   ),
+              //   children: [
+              //     TileLayer(
+              //       tileProvider: CancellableNetworkTileProvider(),
+              //       urlTemplate: EnvLoader.mapURLTemplate,
+              //     ),
+              //     MarkerLayer(
+              //       markers: [
+              //         Marker(
+              //           point: center,
+              //           child: const Icon(
+              //             Icons.location_on,
+              //             color: Colors.red,
+              //           ),
+              //         ),
+              //       ],
+              //     ),
+              //     ValueListenableBuilder(
+              //       valueListenable: controller.parkingNotifier,
+              //       builder: (context, notifier, child) {
+              //         if (notifier is GetParkingsSuccess) {
+              //           return MarkerLayer(
+              //             markers: controller.convertParkingsToMarkers(
+              //               context,
+              //               notifier.parkings,
+              //             ),
+              //           );
+              //         }
+              //         return child!;
+              //       },
+              //       child: const SizedBox.shrink(),
+              //     ),
+              //   ],
+              // ),
+              MapboxMap(
+                initialCameraPosition: CameraPosition(
+                  target: LatLng(center.latitude, center.longitude),
+                  zoom: HomeViewStyles.initialZoom,
                 ),
-                children: [
-                  TileLayer(
-                    tileProvider: CancellableNetworkTileProvider(),
-                    urlTemplate: EnvLoader.mapURLTemplate,
-                  ),
-                  MarkerLayer(
-                    markers: [
-                      Marker(
-                        point: center,
-                        child: const Icon(
-                          Icons.location_on,
-                          color: Colors.red,
-                        ),
-                      ),
-                    ],
-                  ),
-                  ValueListenableBuilder(
-                    valueListenable: controller.parkingNotifier,
-                    builder: (context, notifier, child) {
-                      if (notifier is GetParkingsSuccess) {
-                        return MarkerLayer(
-                          markers: controller.convertParkingsToMarkers(
-                            context,
-                            notifier.parkings,
-                          ),
-                        );
-                      }
-                      return child!;
-                    },
-                    child: const SizedBox.shrink(),
-                  ),
-                ],
+                styleString: EnvLoader.mapURLTemplate,
+                accessToken: EnvLoader.mapAccessToken,
               ),
               Positioned(
                 top: HomeViewStyles.topButtonRowPosition.top,

diff --git a/pubspec.lock b/pubspec.lock
@@ -22,6 +22,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "6.7.0"
+  archive:
+    dependency: transitive
+    description:
+      name: archive
+      sha256: cb6a278ef2dbb298455e1a713bda08524a175630ec643a242c399c932a0a1f7d
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.6.1"
   args:
     dependency: transitive
     description:
@@ -361,7 +369,7 @@ packages:
     source: sdk
     version: "0.0.0"
   flutter_map:
-    dependency: "direct main"
+    dependency: transitive
     description:
       name: flutter_map
       sha256: "2ecb34619a4be19df6f40c2f8dce1591675b4eff7a6857bd8f533706977385da"
@@ -490,6 +498,14 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "4.0.2"
+  image:
+    dependency: transitive
+    description:
+      name: image
+      sha256: "8e9d133755c3e84c73288363e6343157c383a0c6c56fc51afcc5d4d7180306d6"
+      url: "https://pub.dev"
+    source: hosted
+    version: "3.3.0"
   intl:
     dependency: transitive
     description:
@@ -634,6 +650,38 @@ packages:
       url: "https://pub.dev"
     source: hosted
     version: "0.1.2-main.4"
+  mapbox_gl:
+    dependency: "direct main"
+    description:
+      name: mapbox_gl
+      sha256: d78907338ff232e3cf6c1d6dba45e6a8814069496fd352e49bb1967d498f09af
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.16.0"
+  mapbox_gl_dart:
+    dependency: transitive
+    description:
+      name: mapbox_gl_dart
+      sha256: de6d03718e5eb05c9eb1ddaae7f0383b28acb5afa16405e1deed7ff04dd34f3d
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.2.1"
+  mapbox_gl_platform_interface:
+    dependency: transitive
+    description:
+      name: mapbox_gl_platform_interface
+      sha256: b7c1490b022e650afd20412bdf8ae45a1897118b7ce6049ef6c42df09193d4b2
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.16.0"
+  mapbox_gl_web:
+    dependency: transitive
+    description:
+      name: mapbox_gl_web
+      sha256: e77113bf95a4f321ff44938232517e0f2725aae991f0b283af1afaa7e7a58aca
+      url: "https://pub.dev"
+    source: hosted
+    version: "0.16.0"
   matcher:
     dependency: transitive
     description:

diff --git a/pubspec.yaml b/pubspec.yaml
@@ -50,7 +50,6 @@ dependencies:
   go_router: ^14.2.7
   universal_html: ^2.2.4
   get_it: ^7.7.0
-  flutter_map: ^7.0.2
   flutter_dotenv: ^5.1.0
   latlong2: ^0.9.1
   flutter_map_cancellable_tile_provider: ^3.0.0
@@ -61,6 +60,7 @@ dependencies:
   dartz: ^0.10.1
   getwidget: ^4.0.0
   syncfusion_flutter_datepicker: ^27.1.48
+  mapbox_gl: ^0.16.0
 
 dev_dependencies:
   flutter_test:

diff --git a/web/index.html b/web/index.html
@@ -31,6 +31,16 @@
 
   <title>ecoparking_flutter</title>
   <link rel="manifest" href="manifest.json">
+  <script src='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.js'></script>
+  <link href='https://api.mapbox.com/mapbox-gl-js/v2.8.2/mapbox-gl.css' rel='stylesheet' />
+
+  <style>
+    .mapboxgl-map {
+      position: relative;
+      width: 100%;
+      height: 100%;
+    }
+  </style>
 </head>
 <body>
   <script src="flutter_bootstrap.js" async></script>