Chizcurlz
Chizcurlz

Reputation: 13

[Flutter - Mapbox GL]How to add Symbol on initial map load?

I tried adding a Map marker using the mapController's addSymbol method but apparently the marker does not show on the map

void _onMapCreated(MapboxMapController controller) async {
  mapController = controller;

  deviceMarker = await mapController!.addSymbol(SymbolOptions(
      geometry: LatLng(deviceLongitude, deviceLatitude),
      iconImage: "assets/map_marker_device.png",
      iconSize: 0.1,
      iconOffset: const Offset(0, -150)));
}

Upvotes: 1

Views: 1311

Answers (1)

Robert Herhold
Robert Herhold

Reputation: 404

You need to load the image first and then manually provide it to the controller; the string you pass to iconImage is arbitrary and just identifies the image you give it in MapboxMapController .addImage

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

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

  controller.addImage('marker', markerImage);

  await controller.addSymbol(SymbolOptions(
      iconSize: 0.1,
      iconImage: "marker",
      geometry: location,
      iconOffset: const Offset(0, -150)));
  
}

Upvotes: 1

Related Questions