[BUG] Multiple markers create distortion while rotating the map

[jesussmile]

Platforms

Android

Version of flutter-maplibre

0.1.0

Bug Description

So, I wanted to stress test markers and created around 1000 markers. It is pretty smooth however when I rotate the map it gives weird distortion. The text inmarker is all over the place

Steps to Reproduce

Please used the code below

Expected Results

Smooth transition and labels of markers

Actual Results

Distortion of marker text

Code Sample

import 'package:flutter/material.dart';
import 'package:http/http.dart' as http;
import 'package:maplibre/maplibre.dart';
import 'package:maplibre_example/layers_symbol_page.dart';
import 'dart:math';

@immutable
class AnnotationsMarkerPage extends StatefulWidget {
  const AnnotationsMarkerPage({super.key});

  static const location = '/annotations/marker';

  @override
  State<AnnotationsMarkerPage> createState() => _AnnotationsMarkerPageState();
}

class _AnnotationsMarkerPageState extends State<AnnotationsMarkerPage> {
  final _points = <Point>[];
  late final MapController _controller;
  bool _imageLoaded = false;

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

  void _generateRandomPoints() {
    final random = Random();
    for (int i = 0; i < 1000; i++) {
      final lat = -90.0 +
          random.nextDouble() * 180.0; // Latitude between -90.0 and 90.0
      final lon = -180.0 +
          random.nextDouble() * 360.0; // Longitude between -180.0 and 180.0
      _points.add(Point(coordinates: Position(lon, lat)));
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: const Text('Marker Annotations')),
      body: MapLibreMap(
        options: MapOptions(initZoom: 2, initCenter: Position(0.0, 0.0)),
        onEvent: (event) async {
          switch (event) {
            case MapEventMapCreated():
              _controller = event.mapController;
            case MapEventStyleLoaded():
              // add marker image to map
              final response =
                  await http.get(Uri.parse(LayersSymbolPage.imageUrl));
              final bytes = response.bodyBytes;
              await _controller.addImage('marker', bytes);
              setState(() {
                _imageLoaded = true;
              });
            case MapEventClick():
              // add a new marker on click
              setState(() {
                _points.add(Point(coordinates: event.point));
              });
            default:
              // ignore all other events
              break;
          }
        },
        layers: [
          MarkerAnnotationLayer(
            points: _points,
            textField: 'Marker',
            textAllowOverlap: true,
            iconImage: _imageLoaded ? 'marker' : null,
            iconSize: 0.08,
            iconAnchor: IconAnchor.bottom,
            textOffset: const [0, 1],
          ),
        ],
      ),
    );
  }
}

[josxha]

Thanks for you bug report @jesussmile. I'll take a look at it.
Just to be sure, you tested with version 0.1.0 (not 0.0.1), right?

Edit: I'm able to reproduce the bug.

[josxha]

I found an issue for this bug in MapLibre Native:

• Text rendering issue in symbol layer when map is rotated/tilted maplibre/maplibre-native#2788

We can try to narrow down when these distortions occur to mitigate the bug as best as possible. This should be helpful to fix the bug but unfortunally there is currently nothing we can do.

#107 introduces a new Marker type. It won't be as performant but shouldn't have this bug. It only works on the flutter master channel at the moment, though.

[jesussmile]

So, I tried the other maplibre plugin where they were creating Marker Icon with flutter widgets. instead I just used the default SymbolOption and there was no text warping . Unsure how is it different from your package? I tried to look into your code too but it's too much for me I just couldn't find how the markers are rendered from the native side.

import 'dart:math';

import 'package:flutter/foundation.dart';
import 'package:flutter/material.dart';
import 'package:maplibre_gl/maplibre_gl.dart';

import 'page.dart';

const randomMarkerNum = 1000;

class CustomMarkerPage extends ExamplePage {
  const CustomMarkerPage({super.key})
      : super(const Icon(Icons.place), 'Custom marker');

  @override
  Widget build(BuildContext context) {
    return const CustomMarker();
  }
}

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

  @override
  State createState() => CustomMarkerState();
}

class CustomMarkerState extends State<CustomMarker> {
  final _rnd = Random();

  late MapLibreMapController _mapController;
  final _symbols = <Symbol>[];
  final _coordinates = <LatLng>[]; // Store coordinates here

  void _onMapCreated(MapLibreMapController controller) {
    _mapController = controller;
    controller.addListener(() {
      if (controller.isCameraMoving) {
        _updateMarkerPosition();
      }
    });
  }

  void _onStyleLoadedCallback() {
    debugPrint('onStyleLoadedCallback');
  }

  void _onMapLongClickCallback(Point<double> point, LatLng coordinates) {
    _addMarker(coordinates);
  }

  void _onCameraIdleCallback() {
    _updateMarkerPosition();
  }

  void _updateMarkerPosition() {
    // Update marker positions if necessary
  }

  void _addMarker(LatLng coordinates) {
    setState(() {
      _mapController
          .addSymbol(
        SymbolOptions(
          geometry: coordinates,
          iconImage: 'assets/symbols/custom-marker.png',
          iconSize: 1.0,
          iconRotate: 0.0,
          iconOffset: Offset(0.0, 0.0),
          iconAnchor: 'center',
          textField: 'Marker',
          textSize: 15.0,
          textMaxWidth: 8.0,
          textLetterSpacing: 0.1,
          textJustify: 'center',
          textAnchor: 'top',
          textRotate: 0.0,
          textTransform: 'none',
          textOffset: Offset(0.0, 1.0),
          iconOpacity: 1.0,
          iconColor: '#FF0000',
          iconHaloColor: '#FFFFFF',
          iconHaloWidth: 1.0,
          iconHaloBlur: 1.0,
          textOpacity: 1.0,
          textColor: '#000000',
          textHaloColor: '#FFFFFF',
          textHaloWidth: 1.0,
          textHaloBlur: 1.0,
          zIndex: 0,
          draggable: false,
        ),
      )
          .then((symbol) {
        _symbols.add(symbol);
      });
    });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: MapLibreMap(
        trackCameraPosition: true,
        zoomGesturesEnabled: false,
        onMapCreated: _onMapCreated,
        onMapLongClick: _onMapLongClickCallback,
        onCameraIdle: _onCameraIdleCallback,
        onStyleLoadedCallback: _onStyleLoadedCallback,
        initialCameraPosition:
            const CameraPosition(target: LatLng(35.0, 135.0), zoom: 3),
        iosLongClickDuration: const Duration(milliseconds: 200),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: () {
          // Generate random markers if not already generated
          if (_coordinates.isEmpty) {
            for (var i = 0; i < randomMarkerNum; i++) {
              final lat =
                  _rnd.nextDouble() * 180 - 90; // Latitude range: -90 to 90
              final lng =
                  _rnd.nextDouble() * 360 - 180; // Longitude range: -180 to 180
              _coordinates.add(LatLng(lat, lng));
            }

            // Add markers using stored coordinates
            for (var i = 0; i < _coordinates.length; i++) {
              _addMarker(_coordinates[i]);
            }
          }
        },
        child: const Icon(Icons.add),
      ),
    );
  }
}

Screen_Recording_20241029_000739.mp4

[josxha]

Unsure how is it different from your package?

The reason maplibre/flutter-maplibre-gl is not affected is that it uses an outdated MapLibre SDK. The linked issue states that this bug was introduced after 11.0.2. It would be possible as a workaround to downgrade the SDK to 11.0.2-pre0 and roll with that.

[josxha]

The issue I linked mentions that this rendering issues only occur if one of these properties is set to true:

text-allow-overlap = true
icon-allow-overlap = true
icon-ignore-placement = true

If you set textAllowOverlap to false, the problem is mitigated.

Aufzeichnung.2024-10-29.080713.mp4

[josxha]

This bug should be fixed on the main branch now. @jesussmile could you check as well, please?

24-11-09-10-42-11.mp4

[jesussmile]

Yes works great! I had to set this at times to get it working though iconAllowOverlap: true, iconRotate: 0,