Question 77758 in Flutter Question posted in
The official Flutter documentation can be found here.

How to keep map marker icons move when zooming in/out of map – Flutter

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:

enter image description here

Zoomed out Marker:

enter image description here

Zoomed out even farther Marker:

enter image description here

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,
          ...
        )]);
Tags:

2

Answers


  1. 0

    looks like your alignment is off

    
  Marker marker = Marker(
  point:
      LatLng(alertLatitude, alertLongitude),
  width: 50,
  height: 50,
  anchorPos: AnchorPos.align(AnchorAlign.bottom/*AnchorAlign.center*/), //change center to bottom
  builder: (context) => Icon(
        Icons.location_on_sharp,
        size: 60,
        color: Color(aquarium),
      ));

    if this isnt exactly working i’d fiddle with AnchorPos.exact(Anchor(left:x,right:y)) until it seems right

    Login or Signup to reply.
  2. 0

    I tried using google_maps_flutter, I hope it will help.

    Used marker with position params.

    Marker(markerId: MarkerId((i).toString()),
  position: LatLng(double.parse(data[i].latitude ?? '0'), 
  double.parse(data[i].longitude ?? '0')));
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search