Flutter_map: Marker Position does not seem to change with the provided value

Created on 15 Oct 2019  路  5Comments  路  Source: fleaflet/flutter_map

I am trying to change the position of the marker based on the current user.

    import 'package:flutter/material.dart';
    import 'package:flutter/widgets.dart';
    import 'package:flutter_map/plugin_api.dart';
    import '../widgets/plugin_layer_options.dart';
    import '../widgets/my_custom_plugin.dart';
    import 'package:latlong/latlong.dart';
    import '../widgets/getLocation.dart';

    class MapsPluginLayer extends StatefulWidget {
      final MyCustomPluginOptions options;
      final MapState map;
      final Stream<Null> stream;

      MapsPluginLayer(this.options, this.map, this.stream);

      @override
      _MapsPluginLayerState createState() => _MapsPluginLayerState();
    }

    class _MapsPluginLayerState extends State<MapsPluginLayer> {
      MapController controller = MapController();

      @override
      Widget build(BuildContext context) {
        var customPlugin = MyCustomPluginOptions(context: context);
        return FutureBuilder(
          future: customPlugin.getLocation(),
          initialData: LatLng(0, 0),
          builder: (context, AsyncSnapshot snapshot) {
            LatLng value = snapshot.data;
            print('Data of Snapshot ${value}');


            widget.map
                .move(LatLng(value.latitude, value.longitude), widget.map.zoom);

            return FlutterMap(
              options: MapOptions(
                center: LatLng(value.latitude, value.longitude),
              ),
              layers: [
                MarkerLayerOptions(markers: [
                  Marker(
                      point: LatLng(value.latitude, value.longitude),
                      builder: (context) {
                        print("Marker is prinitng...");
                        return Container(
                            height: 30.0,
                            width: 30.0,
                            child: Icon(
                              Icons.location_on,
                              color: Colors.redAccent,
                            ));
                      }),
                ])
              ],
            );
          },
        );
      }
    }

`
The marker initially shows at (0,0) but when the future resolves and we get the data in snapshot.data, the map moves to the corresponding location, but the marker doesn't show up. I also tried setting up another marker at a static position, it also didn't seem to work.

All 5 comments

@igaurab , I assume this is not an issue of this library, but of your code (the formatting doesn't make it easy to read, can you format the whole of it and make sure all necessary code is shown?).

@moovida yes :) , basically what i am trying to achieve is to get the current location of the user from the customPlugin.getLocation() and update the marker and camera positions accordingly. It is a part of flutter_map plugin that i am working on.

This is the getLocation() function
`

    class MyCustomPluginOptions extends LayerOptions {
      LatLng latLng;
      BuildContext context;
      GetLocation loc = GetLocation();

      MyCustomPluginOptions({this.context});

      Future<LatLng> getLocation() async {
        await loc.getLocation().then((onValue) {
          latLng = onValue;
          print('The latitide is  ${latLng.latitude}');
        });
        return latLng;
      }
    }

`

@igaurab I had the same usecase, and for regular incoming location points (GPS for example) using FutureBuilder was no choice, because the map was flickering at every location update.
I chose to initialize the position of the map in the initState (then calling setState). At that point the location updates worked properly for me.

@moovida thanks to you, i have managed to make the plugin that tracks the current user location and displays a marker in the flutter map. @johnpryan @moovida please have a look at it.

Was this page helpful?
0 / 5 - 0 ratings