Text in marker

[MaximVod]

Hello! Thanks for your plugin There is some problem. I'm using version ^0.50.0-alpha.4, since the stable version won't start for me, for this reason: uint8list pngbytes = bytedata.buffer.asuint8list();

But since ^0.50.0-alpha.4 works there are some difficulties. In my design, on the placemark marker, in addition to the icon, there is also text. If I leave only one icon (it is in the form of an iconWidget), then everything is fine. If I put more text, then everything blurs (I attach a screen). And even if I leave one text, everything also blurs. I understand that this is connected by a width limit. Can this somehow be corrected?

here's code:

OSMFlutter(
            controller: mapController,
            trackMyPosition: true,
            androidHotReloadSupport: true,
            initZoom: 14,
            minZoomLevel: 3,
            maxZoomLevel: 19,
            stepZoom: 1.0,
            userLocationMarker: UserLocationMaker(
              personMarker: const MarkerIcon(
                icon: Icon(
                  Icons.location_history_rounded,
                  color: Colors.red,
                  size: 48,
                ),
              ),
              directionArrowMarker: const MarkerIcon(
                icon: Icon(
                  Icons.double_arrow,
                  size: 48,
                ),
              ),
            ),
            markerOption: MarkerOption(
              defaultMarker: const MarkerIcon(
                icon: Icon(
                  Icons.person_pin_circle,
                  color: Colors.blue,
                  size: 56,
                ),
              ),
            ),
            onGeoPointClicked: (geoPoint) async {
            },
            staticPoints: points
          ),

here's marker widget code:

class MarkerIconPoint extends StatelessWidget{

  final String pointName;

  const MarkerIconPoint({Key? key, required this.pointName}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Assets.images.mapPoint.svg(
        height: 40.h, width: 40.w
    );
  }

}

here's a blurry:

here's a normal:

[jesussmile]

Here's one way of doing it

    await osmController!.addMarker(
            pointManual1!,

            markerIcon: MarkerIcon(
              iconWidget: Container(
                height: 120.0,
                width: 150,
                child: Center(
                  child: Column(
                    children: [
                      Text(
                        "Your Text Here",
                        style: TextStyle(
                            fontSize: 20,
                            color: Colors.purple,
                            fontWeight: FontWeight.bold),
                      ),
                      SvgPicture.asset(
                        "assets/drop_off.svg",
                        height: 80,
                      ),
                    ],
                  ),

                  //),
                ),
              ),
            ),

[liodali]

if you want you can share your UI desire to provide you solution

[georgno]

For anyone else in need.

If its blurry on iOS, just wrap it with a Container and give it width and height as OP said.

[NivinCNC]

Here's one way of doing it

    await osmController!.addMarker(
            pointManual1!,

            markerIcon: MarkerIcon(
              iconWidget: Container(
                height: 120.0,
                width: 150,
                child: Center(
                  child: Column(
                    children: [
                      Text(
                        "Your Text Here",
                        style: TextStyle(
                            fontSize: 20,
                            color: Colors.purple,
                            fontWeight: FontWeight.bold),
                      ),
                      SvgPicture.asset(
                        "assets/drop_off.svg",
                        height: 80,
                      ),
                    ],
                  ),

                  //),
                ),
              ),
            ),

In my case i made a marker with text in which the text updates for la loop a different geo points but all the markers are with the last updated text any solution?`MarkerIcon customMarker(String title) { print('Creating custom marker for $title'); return MarkerIcon( iconWidget: SizedBox( height: 120.0, width: 150, child: Center( child: Column( children: [ Text( title, style: const TextStyle( fontSize: 10, color: Colors.purple, fontWeight: FontWeight.bold, ), ), const Icon( Icons.person_pin_circle, color: Colors.red, size: 30, ), ], ), ), ), ); }

@override Future mapIsReady(bool isReady) async { try { if (isReady) { final snapshot = await databaseReference.get(); if (snapshot.value != null) { Map<String, dynamic> employees = Map<String, dynamic>.from(snapshot.value as Map); if (employees.isNotEmpty) { double? latitude = employees.values.first['latitude'] as double?; double? longitude = employees.values.first['longitude'] as double?; if (latitude != null && longitude != null) { controller .moveTo(GeoPoint(latitude: latitude, longitude: longitude)); } } employees.forEach((key, value) async { if (value['latitude'] != null && value['longitude'] != null && value['EmployeeName'] != null) { double latitude = value['latitude']; double longitude = value['longitude']; String employeeName = value['EmployeeName']; GeoPoint geoPoint = GeoPoint(latitude: latitude, longitude: longitude); employeeLocations[key] = geoPoint; await controller.addMarker( geoPoint, markerIcon: customMarker(employeeName), ); } else { print('Skipping employee $key due to missing data.'); } }); } } } catch (e) { print("Stack $e "); } }`

[liodali]

i want to add support for text with icon or maybe text only for some cases