BUG: retinaMode destroy display map and markers

[DmitriySimonov]

What is the bug?

retinaMode (retinaMode: true) breaks the display of the map, also breaks the display of markers on the map!

If disable retinaMode (retinaMode: false), then everything works fine.

I have attached a simple code example below, please run it and see for yourself!

flutter_map: ^8.1.1
Testing on Android real devices, the bug is reproducible
Testing on virtual device (Pixel 6a API 35), the bug is reproducible

Flutter doctor:

[✓] Flutter (Channel stable, 3.29.2, on Ubuntu 22.04.5 LTS 5.15.0-134-generic, locale ru_RU.UTF-8)
[✓] Android toolchain - develop for Android devices (Android SDK version 35.0.0)
[✓] Chrome - develop for the web
[✓] Linux toolchain - develop for Linux desktop
[✓] Android Studio (version 2024.2)
[✓] Connected device (3 available)
[✓] Network resources

How can we reproduce it?

import 'dart:async';

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

/// Created by Dmitriy Simonov on 01.04.2024.
/// Doc - https://docs.fleaflet.dev/
class RouteFlutterMapPage extends StatefulWidget {
  const RouteFlutterMapPage({
    super.key,
  });

  @override
  State<RouteFlutterMapPage> createState() => _RouteFlutterMapPageState();
}

class _RouteFlutterMapPageState extends State<RouteFlutterMapPage>
    with AutomaticKeepAliveClientMixin<RouteFlutterMapPage>, TickerProviderStateMixin {
  final MapController mapController = MapController();
  final List<Marker> markers = List.empty(growable: true);

  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context);
    return Scaffold(
      body: FlutterMap(
        mapController: mapController,
        options: MapOptions(
          initialCenter: LatLng(51.509364, -0.128928), // Center the map over London
          initialZoom: 9,
          keepAlive: true,
          onMapReady: () async {
            if (!mounted) return;
            await renderMarkers();
          },
        ),
        children: [
          TileLayer(
            retinaMode: true, // TODO BUG IS HERE!!!
            urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
            userAgentPackageName: 'com.example.app',
          ),
          MarkerLayer(
            rotate: true,
            markers: markers,
          ),
        ],
      ),
    );
  }

  Future<void> renderMarkers() async {
    double sizeMarker = 70;
    markers.clear();

    // Saint-Petersburg
    double? latLoad = 60;
    double? lngLoad = 30;
    final LatLng geoPointLoad = LatLng(latLoad, lngLoad);
    Marker markerLoad = Marker(
      point: geoPointLoad,
      height: sizeMarker,
      width: sizeMarker,
      alignment: Alignment.topCenter,
      child: FlutterLogo(),
    );
    setState(() {
      markers.add(markerLoad);
    });

    // Moscow
    double? latUnload = 55.750134;
    double? lngUnload = 37.622375;
    final LatLng geoPointUnload = LatLng(latUnload, lngUnload);
    Marker markerUnload = Marker(
      point: geoPointUnload,
      height: sizeMarker,
      width: sizeMarker,
      alignment: Alignment.topCenter,
      child: FlutterLogo(),
    );
    setState(() {
      markers.add(markerUnload);
    });
  }
}

Do you have a potential solution?

No response

[ibrierley]

Does OpenStreetMap actually support Retina Mode ?

[JaffaKetchup]

This looks like a duplicate of #2042. We do not recommend emulating retina mode in any case, but for the time being, it is broken: https://docs.fleaflet.dev/layers/tile-layer#emulating-retina-mode

[DmitriySimonov]

@JaffaKetchup Thank you for your prompt response