CODEWITHSUNDEEP
androidflutterdartmobile-developmentfluttermap
usafutb0l3r
usafutb0l3r

Reputation: 69

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

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

Upvotes: 3

Views: 1178

Answers (2)

Mukund Jogi
Mukund Jogi

Reputation: 1395

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')));

Upvotes: 0

HannesH
HannesH

Reputation: 986

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

Upvotes: 2

Related Questions