Only last map built is usable when there are multiple instances

[LjubiTech-Maxko]

When creating multiple map instances all map controllers are working with the data from the map which was created last. The issue can be observed with the following reproduction code.

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

void main() {
  runApp(const MyApp());
}

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

  @override
  Widget build(BuildContext context) {
    return const MaterialApp(
      home: MyHomePage(),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({super.key});

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> {
  late final PageController _pageController;

  void _switchPage(int page) {
    _pageController.jumpToPage(_page);
  }

  @override
  void initState() {
    super.initState();
    _pageController = PageController();
  }

  @override
  void dispose() {
    _pageController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: const Text('Mapbox Example')),
        body: Stack(
          children: [
            PageView(
              controller: _pageController,
              physics: const NeverScrollableScrollPhysics(),
              children: const [
                MapPage(),
                MapPage(),
                MapPage(),
              ],
            ),
            Align(
              alignment: Alignment.bottomCenter,
              child: Row(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  PageSwitch(page: 0, bgColor: Colors.red, onTap: _switchPage),
                  PageSwitch(page: 1, bgColor: Colors.green, onTap: _switchPage),
                  PageSwitch(page: 2, bgColor: Colors.blue, onTap: _switchPage),
                ],
              ),
            ),
          ],
        ),
      ),
    );
  }
}

class MapPage extends StatefulWidget {
  const MapPage({Key? key}) : super(key: key);

  @override
  State<MapPage> createState() => _MapPageState();
}

class _MapPageState extends State<MapPage> with AutomaticKeepAliveClientMixin {
  late final MapboxMap _map;

  void _mapCreated(MapboxMap map) {
    _map = map;
  }

  void _getCameraState() async {
    final CameraState camState = await _map.getCameraState();
    print(camState.encode());
  }

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Stack(
      clipBehavior: Clip.none,
      fit: StackFit.expand,
      children: [
        MapWidget(
          resourceOptions: ResourceOptions(accessToken: <add access token>),
          onMapCreated: _mapCreated,
        ),
        Align(
          alignment: Alignment.centerRight,
          child: GestureDetector(
            onTap: _getCameraState,
            child: Container(
              width: 50,
              height: 50,
              color: Colors.blue,
            ),
          ),
        ),
      ],
    );
  }
}

class PageSwitch extends StatelessWidget {
  const PageSwitch({
    Key? key,
    required this.page,
    required this.bgColor,
    required this.onTap,
  }) : super(key: key);

  final int page;
  final Color bgColor;
  final void Function(int) onTap;

  @override
  Widget build(BuildContext context) {
    return GestureDetector(
      onTap: () => onTap(page),
      child: SizedBox(
        width: 50,
        height: 50,
        child: DecoratedBox(
          decoration: BoxDecoration(color: bgColor),
          child: Center(child: Text('$page')),
        ),
      ),
    );
  }
}

Copy the code to main.dart file and run the app.

Steps to reproduce:

1. Scroll the map to a random point and click the blue rectangle on the right to get the CameraState.
2. Click the green rectangle on the bottom to switch to the second map and repeat the first step.
3. Click the blue rectangle on the bottom to switch to third map and repeat the first step.

And then go to the first or the second map and click again the blue rectangle to get the CameraState and it will be the state from the map which was created last. This is happening with every action that can be done on the map.

[dawid-niedzwiecki]

Same issue

[yunikkk]

@LjubiTech-Maxko thanks for the report, looking into this one.

[LjubiTech-Maxko]

@yunikkk I tried to do some debuggin and the thing that caught my attention is the documentation for setMessageHandler for BasicMessageChannel which states:

Overrides any existing handler registration for (the name of) this channel.

Is it possible that the creation of the new map instances and setup of channels overrides the previous one because of the same name?

[dawid-niedzwiecki]

Is there a known ETA? This issue is currently blocking our release :(

[LjubiTech-Maxko]

@yunikkk After some tests with assigning different ids at the end of the name for basic message channel i can confirm that this is in fact the issue.

[yunikkk]

@yunikkk After some tests with assigning different ids at the end of the name for basic message channel i can confirm that this is in fact the issue.

Hey @LjubiTech-Maxko, thanks for checking, I had the same suspicion that the id's for PlatformChannels should be the issue. Fix should be straightforward, I'll post updates here.

[dawid-niedzwiecki]

@yunikkk After some tests with assigning different ids at the end of the name for basic message channel i can confirm that this is in fact the issue.

Hey @LjubiTech-Maxko, thanks for checking, I had the same suspicion that the id's for PlatformChannels should be the issue. Fix should be straightforward, I'll post updates here.

any updates? :D

[yunikkk]

any updates? :D

The work on this bug is in progress, I'll share updates as soon as it'll be ready :)

[dawid-niedzwiecki]

Thanks a lot!

any updates? :D

The work on this bug is in progress, I'll share updates as soon as it'll be ready :)