[BUG] Markers with rotate: true do not adjust their anchor

[AsturaPhoenix]

What is the bug?

Markers (and info windows implemented as markers) with rotate: true to counter map rotation float around unexpectedly when the map is rotated. This seems to be because the rotation does not include the anchor offset, which is thus applied in the rotated space.

What is the expected behaviour?

Marker geometry at the anchor position remains stationary in the map space when the map is rotated. That is, if the marker geometry is pointing at a particular map location and rotate: true, I expect the marker to continue pointing at that map location as the map is rotated.

How can we reproduce this issue?

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: FlutterMap(
            options: MapOptions(center: LatLng(0, 0)),
            children: [
              MarkerLayer(
                rotate: true,
                markers: [
                  Marker(
                    point: LatLng(0, 0),
                    width: 256,
                    height: 256,
                    anchorPos: AnchorPos.align(AnchorAlign.left),
                    builder: (context) => const ColoredBox(
                      color: Colors.lightBlue,
                      child: Align(
                        alignment: Alignment.centerRight,
                        child: Text('-->'),
                      ),
                    ),
                  ),
                  Marker(
                    point: LatLng(0, 0),
                    width: 256,
                    height: 256,
                    anchorPos: AnchorPos.align(AnchorAlign.right),
                    builder: (context) => const ColoredBox(
                      color: Colors.pink,
                      child: Align(
                        alignment: Alignment.centerLeft,
                        child: Text('<--'),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );

Do you have a potential solution?

A workaround could be to pass the resolved Anchor as rotateOrigin.

Fixes might include applying the anchor offset as a Transform, or fully using Transforms instead of Positioned widgets.

Can you provide any other information?

The effect is more pronounced as markers are larger. In the video below, it is particularly pronounced on the info window "markers", which are sized to a max size much larger than the info window itself.

rotation.mp4

Platforms Affected

Android, iOS, Web, Windows, MacOS, Linux, Other

Severity

Minimum: Allows normal functioning

Frequency

Consistently: Always occurs at the same time and location

Requirements

• I agree to follow this project's Code of Conduct
• My Flutter/Dart installation is unaltered, and flutter doctor finds no relevant issues
• I am using the latest stable version of this package
• I have checked the FAQs section on the documentation website
• I have checked for similar issues which may be duplicates

[AsturaPhoenix]

Here's what the minimum repro looks like with the rotateOrigin workaround, with two additional non-counterrotated markers in lieu of a tile layer for orientation.

rotation.fixed.mp4

The origin passed in here is the point opposite the anchor (width - left, height - top). The defaulting behavior of rotateAlignment slightly complicates this as well, as it needs to be set explicitly to null on the MarkerLayer.

Workaround code fragment, with the origins hardcoded for simplicity

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:latlong2/latlong.dart';

void main() => runApp(
      MaterialApp(
        home: Scaffold(
          body: FlutterMap(
            options: MapOptions(center: LatLng(0, 0)),
            children: [
              MarkerLayer(
                rotate: true,
                rotateAlignment: null,
                markers: [
                  Marker(
                    point: LatLng(-.05, 0),
                    rotate: false,
                    builder: (context) => const ColoredBox(color: Colors.black),
                  ),
                  Marker(
                    point: LatLng(.05, 0),
                    rotate: false,
                    builder: (context) => const ColoredBox(color: Colors.black),
                  ),
                  Marker(
                    point: LatLng(0, 0),
                    width: 256,
                    height: 256,
                    anchorPos: AnchorPos.align(AnchorAlign.left),
                    rotateOrigin: const Offset(256, 128),
                    builder: (context) => const ColoredBox(
                      color: Colors.lightBlue,
                      child: Align(
                        alignment: Alignment.centerRight,
                        child: Text('-->'),
                      ),
                    ),
                  ),
                  Marker(
                    point: LatLng(0, 0),
                    width: 256,
                    height: 256,
                    anchorPos: AnchorPos.align(AnchorAlign.right),
                    rotateOrigin: const Offset(0, 128),
                    builder: (context) => const ColoredBox(
                      color: Colors.pink,
                      child: Align(
                        alignment: Alignment.centerLeft,
                        child: Text('<--'),
                      ),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ),
      ),
    );

[JaffaKetchup]

Thanks for the report! We'll investigate.

[JaffaKetchup]

Hi @AsturaPhoenix,

Just to let you know, I did have a crack at implementing this for v5, but I couldn't get it to work correctly in all situations - I think I messed up with scaling/CRS translations somewhere, as the points vanished off to the other side of the world in some cases :D

Leaving this open.

[ElecSmurf]

Hi, is there any news on a solution for this fix?

[AsturaPhoenix]

@ElecSmurf In case you're blocked, you can work around this issue by specifying a rotateOrigin opposite the anchor and setting rotateAlignment: null on the MarkerLayer, as above.

Example in context.

[mdmm13]

Not sure this is what you're looking for, but I recall we had a similar issue ages ago where markers would float around the map during rotation. Fix was to design a marker that matches one of the default AlignmentDirectional alignments, like so: rotateAlignment: AlignmentDirectional.bottomCenter.

Now you can rotate freely and it keeps the markers anchored where they're needed.

[JaffaKetchup]

I also just found out that just setting rotateAlignment to the inverse of the anchor also works. A fix may arrive in v6.