Use Mapbox tiles for web map

lib/screens/mapflow_shell.dart

@@ -8,6 +8,12 @@ import 'package:latlong2/latlong.dart';
 import '../models/place_models.dart';
 import '../state/place_controller.dart';
 
+const _mapboxAccessToken = String.fromEnvironment('MAPBOX_ACCESS_TOKEN');
+const _mapboxStyle = String.fromEnvironment(
+  'MAPBOX_STYLE',
+  defaultValue: 'mapbox/streets-v12',
+);
+
 class MapflowShell extends ConsumerWidget {
   const MapflowShell({super.key});
 
@@ -45,10 +51,7 @@ class _MapContent extends ConsumerWidget {
               maxZoom: 18,
             ),
             children: [
-              TileLayer(
-                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                userAgentPackageName: 'com.mapflow.app',
-              ),
+              const _BaseMapTileLayer(),
               MarkerLayer(
                 markers: [
                   for (final place in state.recommendations)
@@ -65,11 +68,7 @@ class _MapContent extends ConsumerWidget {
                     ),
                 ],
               ),
-              const RichAttributionWidget(
-                attributions: [
-                  TextSourceAttribution('OpenStreetMap contributors'),
-                ],
-              ),
+              const _MapAttribution(),
             ],
           ),
           SafeArea(
@@ -131,10 +130,8 @@ class _MapLoading extends StatelessWidget {
               initialZoom: 14.2,
             ),
             children: [
-              TileLayer(
-                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                userAgentPackageName: 'com.mapflow.app',
-              ),
+              const _BaseMapTileLayer(),
+              const _MapAttribution(),
             ],
           ),
           const Center(child: CircularProgressIndicator()),
@@ -160,10 +157,8 @@ class _MapError extends StatelessWidget {
               initialZoom: 14.2,
             ),
             children: [
-              TileLayer(
-                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
-                userAgentPackageName: 'com.mapflow.app',
-              ),
+              const _BaseMapTileLayer(),
+              const _MapAttribution(),
             ],
           ),
           SafeArea(
@@ -187,6 +182,54 @@ class _MapError extends StatelessWidget {
   }
 }
 
+class _BaseMapTileLayer extends StatelessWidget {
+  const _BaseMapTileLayer();
+
+  static const _osmUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';
+
+  @override
+  Widget build(BuildContext context) {
+    if (_mapboxAccessToken.isEmpty) {
+      return TileLayer(
+        urlTemplate: _osmUrl,
+        userAgentPackageName: 'com.mapflow.app',
+      );
+    }
+
+    return TileLayer(
+      urlTemplate:
+          'https://api.mapbox.com/styles/v1/$_mapboxStyle/tiles/512/{z}/{x}/{y}@2x'
+          '?access_token=$_mapboxAccessToken',
+      tileDimension: 512,
+      zoomOffset: -1,
+      maxNativeZoom: 22,
+      userAgentPackageName: 'com.mapflow.app',
+    );
+  }
+}
+
+class _MapAttribution extends StatelessWidget {
+  const _MapAttribution();
+
+  @override
+  Widget build(BuildContext context) {
+    if (_mapboxAccessToken.isEmpty) {
+      return const RichAttributionWidget(
+        attributions: [
+          TextSourceAttribution('OpenStreetMap contributors'),
+        ],
+      );
+    }
+
+    return const RichAttributionWidget(
+      attributions: [
+        TextSourceAttribution('Mapbox', prependCopyright: false),
+        TextSourceAttribution('OpenStreetMap contributors'),
+      ],
+    );
+  }
+}
+
 class _TraitBar extends ConsumerWidget {
   const _TraitBar({required this.selectedTrait});