Skip to content

mapController.rotateAroundPoint moves incorrectly when already rotated #2028

@tlserver

Description

@tlserver

What is the bug?

In v8, mapController.rotateAroundPoint only work if the map is having rotation = 0 before this opperation.

Originally posted by @tlserver in #1996 (comment)

How can we reproduce it?

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

class Testing extends StatefulWidget {
  @override
  State<Testing> createState() => _TestingState();
}

class _TestingState extends State<Testing> {
  final mapController = MapController();

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Test'),
      ),
      body: Stack(
        children: [
          FlutterMap(
            options: const MapOptions(
              initialCenter: LatLng(0, 0),
              initialZoom: 8,
              minZoom: 0,
              maxZoom: 19,
            ),
            mapController: mapController,
            children: [
              TileLayer(
                urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                userAgentPackageName: 'test',
                maxZoom: 19,
              ),
              const CircleLayer(
                circles: [CircleMarker(point: LatLng(0, 0), radius: 100)],
              ),
            ],
          ),
          Align(
            child: Transform.translate(
              offset: const Offset(0, 100),
              child: const FlutterLogo(),
            ),
          ),
          Positioned(
            right: 20,
            bottom: 20,
            child: FloatingActionButton(
              onPressed: () {
                setState(() {
                  mapController.rotateAroundPoint(
                    (mapController.camera.rotation + 90) % 360,
                    offset: const Offset(0, 100),
                  );
                });
              },
              child: const Icon(
                Icons.rotate_right,
                color: Colors.white,
              ),
            ),
          ),
        ],
      ),
    );
  }
}

In this code, it:

  1. init the map with lat = 0, lng = 0, rotate = 0, zoom = 8
  2. place a marker at lat = 0, lng = 0
  3. create a button to rotate the map by 90 degrees with offset (0,100):
                  mapController.rotateAroundPoint(
                    (mapCamera!.rotation + 90) % 360,
                    offset: const Offset(0, 100),
                  );

Reproduce step:

  1. click the button, it will rotate the map correct, since the map originaly having rotation = 0
  2. click the button one more times, it will move the map to an unknown position

Do you have a potential solution?

No response

Metadata

Metadata

Assignees

No one assigned

    Type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions