Add custom marker to map in flutter with mapbox plugin

to provide a better ui to my app I need to display a small card with the user name and a small circle with the user picture or avatar.

Is there any way to do it with the flutter-mapbox-gl plugin?

Solution 1: pa.

The best solutions for that is inside mapbox-gl package example folder : https://github.com/tobrun/flutter-mapbox-gl/blob/master/example/lib/place_symbol.dart

here small example what you can do

Widget build(BuildContext context) {

  mapController.addSymbol(
  SymbolOptions(
    geometry: LatLng(-33.86711, 151.1947171),
    iconImage: "assets/images/ur_image.png",
  ),
); 
 return Scaffold(
  body: Center(
        child: SizedBox(
          width: double.infinity,
          height: 300.0,
          child: MapboxMap(
            styleString: themeControl.themeSet.mapStyle,
            onMapCreated: _onMapCreated,
            onStyleLoadedCallback: _onStyleLoaded,
            zoomGesturesEnabled: _zoomGesturesEnabled,
            myLocationEnabled: _myLocationEnabled,
            initialCameraPosition: const CameraPosition(
              target: LatLng(-33.852, 151.211),
              zoom: 11.0,
            ),
          ),
        ),
      ),
);}

Solution 2: hansaplast

After fighting with this for 2h that's what I came up with:

Add to widget tree:

Center(
  child: SizedBox(
    width: double.infinity,
    height: 300,
    child: MapboxMap(
      initialCameraPosition: CameraPosition(
        target: latLng,
        zoom: 13,
      ),
      onMapCreated: onMapCreated,
      accessToken: mapboxPublicToken,
    ),
  ),
)

Some remarks:

• latLng is e.g. LatLng(-33.852, 151.211)
• the SizedBox was needed for my case to avoid Horizontal viewport was given unbounded height error

Then to add the actual marker (which in my case should be just in the center of the map, same as the target of CameraPosition):

Future<Uint8List> loadMarkerImage() async {
  var byteData = await rootBundle.load("images/poi.png");
  return byteData.buffer.asUint8List();
}

void onMapCreated(MapboxMapController controller) async {
  var markerImage = await loadMarkerImage();

  controller.addImage('marker', markerImage);

  await controller.addSymbol(
    SymbolOptions(
      iconSize: 0.3,
      iconImage: "marker",
      geometry: latLng,
      iconAnchor: "bottom",
    ),
  );
}

A few remarks:

• I had no luck with the "built in" markers. This should be the list of supported markers but I couldn't get them to work
• images/poi.png in my case is just a 256x256 PNG image with transparent background
• for rootBundle to work you need to import 'package:flutter/services.dart'
• iconMarker tells how to position the marker. In my case it is kind of a pin icon 📍 so I want the "center bottom" to be where the lat/lng is.
• iconSize you need to find out the best size. In my case I needed to hot restart every time I did a change which was annoying…

I expanded this answer into a blog post to cover also some problems I faced during installation.