Update map center

[zigapk]

Hi there,

first of all, thank you for such a great widget that enabled our transition to Flutter. I have a question/feature request: I've integrated user's position into the map as a marker (which seems to work fine). However, I'd like to have have a button for moving the map's center to the the current user's location. But simply setting map's center won't work. So I'm interested in any suggestions about the options I have (might include modifying flutter_map code).

Thank you for your support,
Ziga Patacko Koderman

[johnpryan]

Good catch!

Yes this is definitely something we want to support. I am thinking the best API for this is to optionally include a "controller" (similar to a TextField's TextEditingController) that allows users to programmatically change things that are stateful, like the current zoom level and position.

This is opposed to things stateless things like markers, which can be updated with a setState() on the parent widget.

[avioli]

I've forked the plugin and exposed the MapState (which in Flutter lingo should be called a controller) and then:

...
class _LocationPickerDialogState extends State<_LocationPickerDialog> {
  MapState _mapState;

  Location _location;
  double _zoom;

  Location get center {
    LatLng center = _mapState.center;
    if (center == null) return null;
    return new Location(
      latitude: center.latitude,
      longitude: center.longitude,
    );
  }

  @override
  void initState() {
    super.initState();

    final location = widget.initialLocation ?? Location.zero;

    _mapState = new MapState(new MapOptions(
      center: location.latLng,
      zoom: _zoom,
    ));

    _mapState.onMoved.listen((_) {
      final location = center;
      if (location != null) {
        setState(() {
          _location = center;
        });
      }
    });
  }

  Widget _buildPicker() {
    return new FlutterMap(
      mapState: _mapState,
      layers: [
        new TileLayerOptions(
          urlTemplate: widget.urlTemplate,
          additionalOptions: widget.additionalOptions,
        ),
        _getMarkerLayerOptions(),
      ],
    );
  }
...

This way I can query all the MapState props or even move the map programatically - win win.

Awesome widget guys.

[johnpryan]

pull requests welcome!

[avioli]

https://github.com/apptreesoftware/flutter_map/pull/24

[johnpryan]

closed by #25 - thanks for the help!

[gimox]

please add a example or documentation!!!

[johnpryan]

@gimox can you file a separate issue for documentation? thanks!

[gimox]

Ok

[zhen1991]

Hi !
I have a question about zooming in and zooming out the flutter map !
I create two button one for zooming in and another for zooming out and im using
mapController.move(LatLng(lat,lng),zoom);
and its working fine but every time i click the button so it will zoomin to the ceter and zoom out to the cenetr too!
So i am wondering if there a method only doing zoom function with out latlng??
thnx for helping:)

[gimox]

try this:

 final MapController controller;
...

 FlutterMap(
                mapController: controller,
...

controller.move(controller.center, controller.zoom + 1); // zoom in
controller.move(controller.center, controller.zoom - 1); // zoom out

[zhen1991]

@gimox
Thank you so much :)

[ollyde]

@gimox mapController is always null for me.

[saadismail]

@OllyDixon
Initialize it without any parameters: final MapController mapController = new MapController();

Btw I have been scratching my head for like 4 hours to change map's center by calling setState and just before giving up I found this. Thank you so much @avioli

[ukadawit]

Thankyou It worked for me

[masudsarker093]

@johnpryan thanks for your great effort. I am facing a problem to save this map after adding pin/marker. Can you help me to save this map with new marker latitude and longitude?

[mathulan]

thank you very much!!!

[kimitoshikuro]

@OllyDixon
Initialize it without any parameters: final MapController mapController = new MapController();

Btw I have been scratching my head for like 4 hours to change map's center by calling setState and just before giving up I found this. Thank you so much @avioli

hello @OllyDixon how did you manage to reload center and zoom on flutter map i'm stuck on it since 3days !!

[JaffaKetchup]

@OllyDixon
Initialize it without any parameters: final MapController mapController = new MapController();
Btw I have been scratching my head for like 4 hours to change map's center by calling setState and just before giving up I found this. Thank you so much @avioli

hello @OllyDixon how did you manage to reload center and zoom on flutter map i'm stuck on it since 3days !!

mapController.move(LatLng(position.latitude, position.longitude), 15);
You might need to put it inside a setState((){});

Also, thanks for the help from this thread!
Luka S

[a2liro]

try this:

 final MapController controller;
...

 FlutterMap(
                mapController: controller,
...

controller.move(controller.center, controller.zoom + 1); // zoom in
controller.move(controller.center, controller.zoom - 1); // zoom out

It's work fine for me. Thanks!