liodali / osm_flutter

OpenStreetMap plugin for flutter
https://pub.dev/packages/flutter_osm_plugin
MIT License
240 stars 98 forks source link

I can't move on my maps #539

Closed misterprog-dev closed 4 months ago

misterprog-dev commented 4 months ago

Hello, I can't move around on the map, I see that the map remains fixed and I can't move around on it.

this my code :

var initPosition = GeoPoint(
                    latitude: 48.66,
                    longitude: 7.55,
                  );
                  MapController mapController =
                      MapController.withPosition(initPosition: initPosition);

OSMFlutter(
                                  mapIsLoading: SizedBox(
                                          width: 48,
                                          height: 48,
                                          child: const Loading())
                                      .centered(),
                                  controller: mapController,
                                  osmOption: const OSMOption(
                                      showDefaultInfoWindow: true,
                                      enableRotationByGesture: true,
                                      showZoomController: true,
                                      userTrackingOption: UserTrackingOption(
                                        enableTracking: true,
                                        unFollowUser: false,
                                      ),
                                      zoomOption:
                                          ZoomOption(initZoom: defaultZoom)),
                                  onMapIsReady: (bool value) async {
                                    if (value) {
                                      GeoPoint userGeoPoint = GeoPoint(
                                        latitude: 7.55,
                                        longitude: 7.55,
                                      );

                                      MarkerIcon personMarkerIcon = MarkerIcon(
                                        icon: Icon( Icons.person_pin_circle_rounded, color: primaryColor, size: baseline_6x, )
                                      );

                                      await mapController.addMarker(
                                        userGeoPoint,
                                        markerIcon: personMarkerIcon,
                                        iconAnchor: IconAnchor(
                                          anchor: Anchor.center,
                                          offset: (x: 0, y: 0),
                                        ),
                                      );

                                      }
                                    }
                                  },
                                ),

And I've got lots of errors in my console : E/FrameEvents(12871): updateAcquireFence: Did not find frame.

Help me resolve this, I'd be grateful!


[√] Flutter (Channel stable, 3.16.9 • Flutter version 3.16.9 • Dart version 3.2.6 • DevTools version 2.28.5 flutter_osm_plugin: ^0.60.5

liodali commented 4 months ago

can you provide us which platform you faced this and full example

misterprog-dev commented 4 months ago

@liodali the plateform is Android and this is my full example code :

import 'package:flutter/material.dart';
import 'package:flutter_osm_plugin/flutter_osm_plugin.dart';

void main() => runApp(const MyApp());

class MyApp extends StatelessWidget {
  const MyApp({super.key});
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Map testing',
      theme: ThemeData(
        primarySwatch: Colors.blue,
      ),
      home: const MyHomePage(title: 'Flutter Map testing'),
    );
  }
}

class MyHomePage extends StatelessWidget {
  final String title;
  const MyHomePage({super.key, required this.title});

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        // The title text which will be shown on the action bar
        title: Text(title),
      ),
      body: const MapView(),
    );
  }
}

class MapView extends StatelessWidget {
  const MapView({super.key});

  @override
  Widget build(BuildContext context) {
    double mapHeight = MediaQuery.of(context).size.height -
        (MediaQuery.of(context).padding.top +
            kToolbarHeight +
            kBottomNavigationBarHeight);

    var initPosition = GeoPoint(
      latitude: 48.66,
      longitude: 7.55,
    );
    MapController mapController =
        MapController.withPosition(initPosition: initPosition);

    return Row(children: [
      Expanded(
          child: SizedBox(
              height: mapHeight,
              child: Stack(children: [
                OSMFlutter(
                    mapIsLoading: const CircularProgressIndicator(),
                    controller: mapController,
                    osmOption: const OSMOption(
                        showDefaultInfoWindow: true,
                        enableRotationByGesture: true,
                        showZoomController: true,
                        userTrackingOption: UserTrackingOption(
                          enableTracking: true,
                          unFollowUser: false,
                        ),
                        zoomOption: ZoomOption(initZoom: 19.0)),
                    onMapIsReady: (bool value) async {
                      if (value) {
                        GeoPoint userGeoPoint = GeoPoint(
                          latitude: 7.55,
                          longitude: 7.55,
                        );

                        MarkerIcon personMarkerIcon = const MarkerIcon(
                            icon: Icon(
                          Icons.person_pin_circle_rounded,
                          color:  Color(0xFF3450A6),
                          size: 48.0,
                        ));

                        await mapController.addMarker(
                          userGeoPoint,
                          markerIcon: personMarkerIcon,
                          iconAnchor: IconAnchor(
                            anchor: Anchor.center,
                            offset: (x: 0, y: 0),
                          ),
                        );
                      }
                    })
              ])))
    ]);
  }
}

my pubspec.yaml :

name: map_test
description: A new Flutter project.

version: 1.0.0+1

environment:
  sdk: '>=3.0.3 <4.0.0'

dependencies:
  flutter:
    sdk: flutter
  flutter_osm_plugin: ^0.60.5

dev_dependencies:
  flutter_test:
    sdk: flutter
  flutter_lints: ^2.0.0

flutter:
  uses-material-design: true
misterprog-dev commented 4 months ago

Hello, @liodali I've seen my mistake, it's caused by enableTracking: true:

osmOption: const OSMOption(
                                      showDefaultInfoWindow: true,
                                      enableRotationByGesture: true,
                                      showZoomController: true,
                                      userTrackingOption: UserTrackingOption(
                                        enableTracking: true,
                                        unFollowUser: false,
                                      ),
                                      zoomOption:
                                          ZoomOption(initZoom: defaultZoom)
                                  ),

Do you know why the Map remains static because tracking has been activated ?

liodali commented 4 months ago

try to use our latest versio we did some fixes related to that as I remember the map was following the user location that collide with user interaction with the map

misterprog-dev commented 4 months ago

Thanks for these feedbacks. I will do a migration for this. Thank you for your availability.