[Question] usage of MapOptions and the onPositionChanged

[AlexandreRoba]

Hi all, I've been looking at this issue for two hours and cannot find an answer. Any help will be appreciated.

This is the widget I have:

class _PropertiesMap extends StatelessWidget {
  final double width;
  final double mapZoom;
  final LatLng mapCenter;
  final Function(LatLng, double) onViewChanged;
  final Function(PropertyListItem) onPropertySelected;

  _PropertiesMap(
      {@required this.width,
      @required this.mapCenter,
      @required this.mapZoom,
      @required this.onViewChanged});

  @override
  Widget build(BuildContext context) {
    print('mapCenterOnBuild:${this.mapCenter}'); //FIRST PRINT
    final mapOptions = MapOptions(
        zoom: this.mapZoom,
        onPositionChanged: (position) {
          if (position.center != null && position.zoom != null)
            onViewChanged(position.center, position.zoom);
          print('mapCenterOnEvent:${this.mapCenter}');//SECOND PRINT
        },
        center: this.mapCenter);
    return Stack(fit: StackFit.expand, children: <Widget>[
      FlutterMap(
        options: mapOptions,
        layers: [
          TileLayerOptions(
              urlTemplate:
                  "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
              additionalOptions: {
                'accessToken':'<Token>',
                'id': 'mapbox.streets'
              }),
        ],
      ),
    ]);
  }

When I run this this is the log i'm getting:

flutter: mapCenterOnBuild:LatLng(latitude:50.809377804666546, longitude:4.385948815972581)
flutter: [INFO] LoggingMiddleware: {Action: HomeSearchMapViewChanged{center:LatLng(latitude:50.80901622467792, longitude:4.386177696935404),zoom:13.0}, <…>
flutter: mapCenterOnEvent:LatLng(latitude:50.8267303, longitude:4.3738753)
flutter: [INFO] LoggingMiddleware: {Action: HomeSearchMapViewChanged{center:LatLng(latitude:50.808582326321385, longitude:4.38646380010344),zoom:13.0}, <…>
flutter: mapCenterOnEvent:LatLng(latitude:50.8267303, longitude:4.3738753)
flutter: mapCenterOnBuild:LatLng(latitude:50.808582326321385, longitude:4.38646380010344)
flutter: [INFO] LoggingMiddleware: {Action: HomeSearchMapViewChanged{center:LatLng(latitude:50.80832921763732, longitude:4.386692681066263),zoom:13.0}, <…>
flutter: mapCenterOnEvent:LatLng(latitude:50.8267303, longitude:4.3738753)
flutter: mapCenterOnBuild:LatLng(latitude:50.80832921763732, longitude:4.386692681066263)
flutter: [INFO] LoggingMiddleware: {Action: HomeSearchMapViewChanged{center:LatLng(latitude:50.80800378946193, longitude:4.387036003820169),zoom:13.0}, <…>
flutter: mapCenterOnEvent:LatLng(latitude:50.8267303, longitude:4.3738753)
flutter: mapCenterOnBuild:LatLng(latitude:50.80800378946193, longitude:4.387036003820169)
flutter: [INFO] LoggingMiddleware: {Action: HomeSearchMapViewChanged{center:LatLng(latitude:50.80793147123002, longitude:4.387093226025383),zoom:13.0}, <…>
flutter: mapCenterOnEvent:LatLng(latitude:50.8267303, longitude:4.3738753)
flutter: mapCenterOnBuild:LatLng(latitude:50.80793147123002, longitude:4.387093226025383)

My question is how can I get a different location from the First print and the second?
I'm getting for example LatLng(latitude:50.80832921763732, longitude:4.386692681066263) on the build and always the same from the onEvent LatLng(latitude:50.8267303, longitude:4.3738753).
It looks like the Event is raised on the initial instance on the map? Is this possible? but then what happens to the following renredered maps?

Thanks for any help you could give me.

Alex.

[johnpryan]

Hi Alex,

Thanks for filing an issue. Just to clarify - you are looking for the first onPositionChanged callback to execute only when the map position has actually changed from the initial position?

As a workaround, you could try ignoring the first event if the location is the same as the starting position:

class _PropertiesMap extends StatelessWidget {
  final double width;
  final double mapZoom;
  final LatLng mapCenter;
  final Function(LatLng, double) onViewChanged;
  final Function(PropertyListItem) onPropertySelected;
  // The starting center position of the map
  final Latlng _firstMapCenter;
  // Whether or not the map has moved via `onPositionChanged`
  final bool _mapHasMoved = false;

  _PropertiesMap(
      {@required this.width,
      @required this.mapCenter,
      @required this.mapZoom,
      @required this.onViewChanged}) : _firstMapCenter = mapCenter;

  @override
  Widget build(BuildContext context) {
    print('mapCenterOnBuild:${this.mapCenter}'); //FIRST PRINT
    final mapOptions = MapOptions(
        zoom: this.mapZoom,
        onPositionChanged: (position) {
          // Ignore if this is the first event
       	  if (!_mapHasMoved && position == _firstMapCenter) {
       	    return;
       	  }
          if (position.center != null && position.zoom != null) {
            onViewChanged(position.center, position.zoom);
            _mapHasMoved = true;
          }
          print('mapCenterOnEvent:${this.mapCenter}');//SECOND PRINT
        },
        center: this.mapCenter);
    return Stack(fit: StackFit.expand, children: <Widget>[
      FlutterMap(
        options: mapOptions,
        layers: [
          TileLayerOptions(
              urlTemplate:
                  "https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
              additionalOptions: {
                'accessToken':'<Token>',
                'id': 'mapbox.streets'
              }),
        ],
      ),
    ]);
  }

[AlexandreRoba]

Excellent that was what I wanted to do 👍