Map layer sync when moving camera isn't so good

[OfekWeinberger]

Hi,
I am working on an app (using flutter_map), and for a long time I want to migrate to vector tiles. To keep my code-base (which depend on flutter_map very deeply) I tried using the maplibre plugin. I have a vector base map (versatiles) and on top of it, I have an OpenSeaMap raster layer. When moving the map I notice a severe sync issue between the layers. Attached short video showing this issue. Any ideas?

Thanks for all the amazing work and progress here!

layer-sync-issue.mp4

[josxha]

Hey @OfekWeinberger,

always nice to see someone using the OpenSeaMap.😄
This delay between flutter and maplibre is a big limitation right now. There are some efforts going on to improve it. See the discussions

• Widget layer lagging #384
• Use bindings to the C++ mbgl / MapLibre Core (allows support for Windows, macOS, Linux) #234

But in your case, you might be fine by adding the raster openseamap layer to the maplibre style programmatically. A maplibre style doesn't have to be only vector data, you can render raster layers and even symbols more efficiently as well.

  Future<void> onStyleLoaded(StyleController style) async {
    await style.addSource(
      RasterSource(
        id: 'openseamap,
        tiles: ['https://tiles.openseamap.org/seamark/{z}/{x}/{y}.png'],
        maxZoom: 18,
        tileSize: 256,
      ),
    );
    await style.addLayer(
      RasterStyleLayer(
        id: 'openseamap',
        sourceId: 'openseamap',
      ),
    );
  }

[OfekWeinberger]

Oh, that's cool.

But I think it won't solve my problem. In my app I have on top of the vector & raster layers, a flame game widget (In which the actual logic of the app happens). I use the MapContoller and MapCamera of flutter map to sync the map's real-world coordinates and the virtual flame game coordinates - in flutter map, it actually works really well and 'sticks' the game objects to their real world position.

Thanks