Open
Description
Platforms
android
Version of flutter maplibre_gl
0.21.0
Bug Description
Rendering of map is broken on some devices as reported by some users.
Screen_Recording_20250320_130600.mp4
User with this particular video is on Samsung Galaxy S20+ running Android 13. Other users device information are pending.
Second weird rendering: On Android 9 all markers are upside down on android since updating from 0.20.0 to 0.21.0 without any code changes but not on newer devices.
Steps to Reproduce
I cannot reproduce that on my devices Samsung Galaxy 9 (Android 9), Samsung Galaxy S04s (Android 13), XCover5 (Android 13) but i'll have access to other devices using browserstack soon.
Expected Results
show map with markers.
Actual Results
flickering unusable rendering.
Code Sample
_onStyleLoaded() async {
if (mapController == null) return;
mapController!.setSymbolIconAllowOverlap(true);
mapController!.onSymbolTapped.add(_onSymbolTapped);
mapController!.onFeatureTapped.add(_onPolygonTapped);
mapController!.addListener(_onMapControllerSomethingChanged);
if (widget.bounds != null) {
await Future.delayed(Duration(milliseconds: 500));
mapController!.animateCamera(CameraUpdate.newLatLngBounds(widget.bounds!));
} else {
}
//
await _addMarkerSymbols(force: true);
await _addPolygonLayers(force: true, sourceId: "polygon_layer");
await _addPolylineLayers(force: true, sourceId: "polyline_layer");
}
Future<bool> _addMarkerSymbols({bool force = false}) async {
if (_markerSymbolsAdded && force == false) return true;
if (mapController == null) return false;
if (_markersBinary.isEmpty) return false;
for (int i = 0; i < _markersBinary.length; i++) {
Uint8List bin = _markersBinary[i];
await mapController!.addImage(_markers[i].id, bin);
}
_markerSymbolsAdded = true;
return true;
}
// build method
MapLibreMap(
initialCameraPosition: CameraPosition(
target: LatLng(widget.center.latitude, widget.center.longitude),
zoom: max(1, widget.initialZoom),
),
styleString: "https://tiles.droidmaps.de/styles/osm-liberty/style.json",
onMapCreated: _onMapCreated,
compassEnabled: true,
myLocationEnabled: true,
onCameraIdle: _onMapControllerSomethingChanged,
myLocationRenderMode: MyLocationRenderMode.compass,
compassViewPosition: CompassViewPosition.topRight,
compassViewMargins: const Point(0, 30),
attributionButtonMargins: const Point(10, 10),
onStyleLoadedCallback: _onStyleLoaded,
onMapClick: (point, coordinates) {
_draggableScrollableSheetController.animateTo(0.17,
duration: const Duration(milliseconds: 500), curve: Curves.easeInOut);
},
dragEnabled: false,
trackCameraPosition: true,
)