fleaflet / flutter_map

A versatile mapping package for Flutter. Simple and easy to learn, yet completely customizable and configurable, it's the best choice for mapping in your Flutter app.
https://pub.dev/packages/flutter_map
BSD 3-Clause "New" or "Revised" License
2.76k stars 863 forks source link

[BUG] Map is shown only when I move it #1944

Closed PollyGlot closed 3 months ago

PollyGlot commented 3 months ago

What is the bug?

I have already read a few of the issuses (ex. #1563 & #23) but anything could fix my problem.

I've got this problem with the latest version of the package 7.0.2. I have my markers shown but tiles are loaded only when I move the map. Even with the fix proposed here it doesn't work.

Here is my flutter doctor :

flutter doctor --verbose
[!] Flutter (Channel [user-branch], 3.22.3, on macOS 14.5 23F79 darwin-arm64, locale fr-FR)
    ! Flutter version 3.22.3 on channel [user-branch] at /Users/pollyglot/dev/flutter
      Currently on an unknown channel. Run `flutter channel` to switch to an official channel.
      If that doesn't fix the issue, reinstall Flutter by following instructions at
      https://flutter.dev/docs/get-started/install.
    ! Upstream repository unknown source is not a standard remote.
      Set environment variable "FLUTTER_GIT_URL" to unknown source to dismiss this error.
    • Framework revision b0850beeb2 (il y a 3 semaines), 2024-07-16 21:43:41 -0700
    • Engine revision 235db911ba
    • Dart version 3.4.4
    • DevTools version 2.34.3
    • If those were intentional, you can disregard the above warnings; however it is recommended to
      use "git" directly to perform update checks and upgrades.

[✓] Android toolchain - develop for Android devices (Android SDK version 34.0.0)
    • Android SDK at /Users/pollyglot/Library/Android/sdk
    • Platform android-34, build-tools 34.0.0
    • Java binary at: /Applications/Android Studio.app/Contents/jbr/Contents/Home/bin/java
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)
    • All Android licenses accepted.

[✓] Xcode - develop for iOS and macOS (Xcode 15.4)
    • Xcode at /Applications/Xcode.app/Contents/Developer
    • Build 15F31d
    • CocoaPods version 1.15.2

[✓] Chrome - develop for the web
    • Chrome at /Applications/Google Chrome.app/Contents/MacOS/Google Chrome

[✓] Android Studio (version 2024.1)
    • Android Studio at /Applications/Android Studio.app/Contents
    • Flutter plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/9212-flutter
    • Dart plugin can be installed from:
      🔨 https://plugins.jetbrains.com/plugin/6351-dart
    • Java version OpenJDK Runtime Environment (build 17.0.11+0-17.0.11b1207.24-11852314)

[✓] VS Code (version 1.92.1)
    • VS Code at /Applications/Visual Studio Code.app/Contents
    • Flutter extension version 3.94.0

How can we reproduce it?

I have my markers shown but tiles are loaded only when I move the map.

Here is what I have :

FlutterMap(
        mapController: mapController,
        options: MapOptions(
          // France as focus by default
          initialCenter: const LatLng(46.71109, 1.7191036),
          interactionOptions: const InteractionOptions(
            flags: InteractiveFlag.all & ~InteractiveFlag.rotate,
          ),
          onMapReady: () => mapController
            ..fitCamera(
              CameraFit.bounds(
                bounds: LatLngBounds.fromPoints([
                  if (proposal?.params?.receiver.location?.coordinates != null)
                    LatLng(
                      proposal!.params!.receiver.location!.coordinates[1],
                      proposal!.params!.receiver.location!.coordinates[0],
                    ),
                  if (proposal?.params?.sender.location?.coordinates != null)
                    LatLng(
                      proposal!.params!.sender.location!.coordinates[1],
                      proposal!.params!.sender.location!.coordinates[0],
                    ),
                ]),
                padding: const EdgeInsets.all(36),
              ),
            )
            // Fix proposed in the thread
            ..move(
              mapController.camera.center,
              mapController.camera.zoom + 0.0001,
            ),
        ),
        children: <Widget>[
          TileLayer(
            urlTemplate: 'https://tiles.yper.fr/default/{z}/{x}/{y}.png',
            userAgentPackageName: 'fr.yper.ypershopper',
            // fallbackUrl: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          ),
          MarkerLayer(
            markers: [
              if (proposal?.params?.sender.location?.coordinates != null)
                Marker(
                  width: 38,
                  height: 46,
                  point: LatLng(
                    proposal!.params!.sender.location!.coordinates[1],
                    proposal!.params!.sender.location!.coordinates[0],
                  ),
                  child: Stack(
                    children: [
                      YperSvg(YperAssets.res.assets.pickupMarker.path),
                      Padding(
                        padding: const EdgeInsets.only(bottom: 16.0),
                        child: Center(
                          child: Text(
                            "1",
                            style: Theme.of(context)
                                .textTheme
                                .titleLarge
                                ?.copyWith(
                                  fontWeight: FontWeight.w800,
                                  color: YperTheme.secondary400,
                                ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
              if (proposal?.params?.receiver.location?.coordinates != null)
                Marker(
                  width: 38,
                  height: 46,
                  point: LatLng(
                    proposal!.params!.receiver.location!.coordinates[1],
                    proposal!.params!.receiver.location!.coordinates[0],
                  ),
                  child: Stack(
                    children: [
                      YperSvg(YperAssets.res.assets.receiverMarker.path),
                      Padding(
                        padding: const EdgeInsets.only(bottom: 16.0),
                        child: Center(
                          child: Text(
                            "2",
                            style: Theme.of(context)
                                .textTheme
                                .titleLarge
                                ?.copyWith(
                                  fontWeight: FontWeight.w800,
                                  color: Colors.white,
                                ),
                          ),
                        ),
                      ),
                    ],
                  ),
                ),
            ],
          ),
        ],
      ),

Do you have a potential solution?

No response

Platforms

Android 14, iOS 17.4

Severity

Obtrusive: Prevents normal functioning but causes no errors in the console

PollyGlot commented 3 months ago

Reading this PR (#1691) I have replaced onMapReady parameter with initialCameraFit.

Even if it fixes my problem I would like to have a bit of explication here if you mind ! Thank you !