CODEWITHSUNDEEP
flutterlocationgoogle-maps-markersfluttermap
Salar Azad
Salar Azad

Reputation: 300

Marker on flutter_map is not accurate

I started using flutter_map with 'openstreetmap' map tile instead of Google Maps, everything is great and working perfectly beside having the marker locations inaccurate when the map is zoomed out, it is like floating on top of the map and not on the map exactly.

initial markers:

final markers = <Marker>[
      Marker(
        width: 50,
        height: 50,
        point: LatLng(35.505733, 23.427344),
        builder: (ctx) => Image.asset('assets/maps/newLocation.png'),
        rotate: false,
      ),
      Marker(
        width: 50,
        height: 50,
        point: LatLng(35.166754, 24.109758),
        builder: (ctx) => Image.asset('assets/maps/currentLocation.png'),
        rotate: false,
      ),
      Marker(
        width: 50,
        height: 50,
        point: LatLng(35.387568, 25.091811),
        builder: (ctx) => Image.asset('assets/maps/oldLocation.png'),
        rotate: false,
      ),
];

flutter_map code:

FlutterMap(
            mapController: mapController,
            options: MapOptions(
              minZoom: 2,
              maxZoom: 19,
              zoom: 11,
              keepAlive: true,
              center: widget.NeworUpdate == 'New'
                  ? LatLng(defaultLat, defaultLong)
                  : LatLng(widget.locationLat, widget.locationLong),
              onMapReady: () {
                //
              },
              onPositionChanged: (position, hasGesture) {
                //
              },
            ),
            children: [
              TileLayer(
                urlTemplate: 'https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png',
                subdomains: ['a', 'b', 'c'],
              ),
              MarkerLayer(
                markers: markersList,
                rotate: false,
              ),

              
            ],
          );

can this be fixed somehow? thank you in advanced.

On Google Maps, the markers are very accurate even when the map is zoomed out, so maybe i'm missing a parameter or something here with flutter_map.

below are snapshots of the marker on two different zoom levels:

far:

https://raw.githubusercontent.com/salarazad/fluttermap/main/Screenshot_2023-02-23-11-04-00-32_7fc84826c70b95282e916f4d1d35df23.jpg

close:

https://raw.githubusercontent.com/salarazad/fluttermap/main/Screenshot_2023-02-23-11-04-07-61_7fc84826c70b95282e916f4d1d35df23.jpg

Upvotes: 2

Views: 2019

Answers (1)

Salar Azad
Salar Azad

Reputation: 300

It has been resolved, wrapping my Asset.image when adding my markers with a Center widget did the trick for me. Now they stay on same location when zooming out and in.

ps: setting "anchorPos: AnchorPos.align(AnchorAlign.center)" option In Marker was recommended but did not have an effect since its default value is in the center.

Upvotes: 3

Related Questions