I am using flutter_map in my app to show a map with Markers on it.
The issue I'm having is that when I zoom in/out, the Markers move, as opposed to staying rooted to their location. I have a CircleMarker around each Marker and it becomes obvious very quickly that they're not centered correctly (see images below).
How to correctly anchor the Marker icon so that it doesn't move around when I zoom in/out of the map?
Up close Marker:
Zoomed out Marker:
Zoomed out even farther Marker:
My code for making the Markers:
Marker marker = Marker(
point:
LatLng(alertLatitude, alertLongitude),
width: 50,
height: 50,
anchorPos: AnchorPos.align(AnchorAlign.center),
builder: (context) => Icon(
Icons.location_on_sharp,
size: 60,
color: Color(aquarium),
));
My code for making the FlutterMap:
FlutterMap(
mapController: _mapController,
options: MapOptions(
center: determineMapStartLocation(),
zoom: 14,
plugins: [MarkerClusterPlugin()],
onTap: (_, __) => _popupController.hideAllPopups(),
),
layers: [
TileLayerOptions(
minZoom: 1,
maxZoom: 20,
backgroundColor: Colors.white,
urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
subdomains: ['a', 'b', 'c'],
),
CircleLayerOptions(
circles: alertCirclesList,
),
MarkerClusterLayerOptions(
maxClusterRadius: 190,
disableClusteringAtZoom: 12,
size: Size(90, 90),
fitBoundsOptions: FitBoundsOptions(
padding: EdgeInsets.all(50),
),
markers: _alertMarkers,
...
)]);