[sample code] Using Custom markers
Closed this issue · 1 comments
fvisticot commented
I need to display custom marker when cluster is not multiple.
In that case I would like to display my own widget based on Image and Text.
I have tried to use the MarkerGenerator widget as follow:
But the marker for simple cluster is not displayed.
Any idea ?
Future<Marker> Function(Cluster) get _markerBuilder => (cluster) async {
var beacon;
if (!cluster.isMultiple) {
beacon = cluster.items.first as Beacon;
final productImage = await ProductsRepository.instance
.imageFromProductName(beacon.product.name);
final beaconMarker = Container(
width: 120,
height: 120,
child: Stack(
children: <Widget>[
Align(
alignment: Alignment.center,
child: Image.asset(
'assets/images/marker.png',
),
),
Align(
alignment: Alignment.center,
child: Container(
padding: EdgeInsets.only(bottom: 10),
width: 80,
height: 80,
child: productImage
))
],
),
);
final markerCompleter = Completer<Marker>();
MarkerGenerator([beaconMarker], (bitmaps) {
final marker = Marker(
markerId: MarkerId(cluster.getId()),
position: cluster.location,
infoWindow: InfoWindow(
title: beacon.name,
),
icon: BitmapDescriptor.fromBytes(bitmaps.first),
);
markerCompleter.complete(marker);
}).generate(context);
return markerCompleter.future;
} else {
return Marker(
markerId: MarkerId(cluster.getId()),
position: cluster.location,
icon: await _getMarkerBitmap(125, text: cluster.count.toString()),
);
}
};
JayPerfetto commented
Marker generator wont work - I tried it myself, you have to use custom painting - start with his example project and just extend from there - he uses the custom painter to do a white circle then an orange inner, and then another white center - he also uses the text painter to render the count. This should give you all the tools you need to either draw a custom shape with text in it, or get your bitmapDescriptor from a png in your assets folder