markerBuilder property
Returns the MapMarker for the given index.
Markers which be used to denote the locations on the map.
It is possible to use the built-in symbols or display a custom widget at a specific latitude and longitude on a map.
The MapLayer.markerBuilder callback will be called number of times equal to the value specified in the MapLayer.initialMarkersCount property. The default value of the of this property is null.
For rendering the custom widget for the marker, pass the required widget for child in MapMarker constructor.
late List<Model> _data;
late MapShapeSource _mapSource;
@override
void initState() {
_data = const <Model>[
Model('Brazil', -14.235004, -51.92528),
Model('Germany', 51.16569, 10.451526),
Model('Australia', -25.274398, 133.775136),
Model('India', 20.593684, 78.96288),
Model('Russia', 61.52401, 105.318756)
];
_mapSource = MapShapeSource.asset(
'assets/world_map.json',
shapeDataField: 'name',
dataCount: _data.length,
primaryValueMapper: (int index) => _data[index].country,
);
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: Center(
child: Container(
height: 350,
child: Padding(
padding: EdgeInsets.only(left: 15, right: 15),
child: SfMaps(
layers: <MapLayer>[
MapShapeLayer(
source: _mapSource,
initialMarkersCount: 5,
markerBuilder: (BuildContext context, int index){
return MapMarker(
latitude: _data[index].latitude,
longitude: _data[index].longitude,
);
},
),
],
),
),
)
),
);
}
class Model {
const Model(this.country, this.latitude, this.longitude);
final String country;
final double latitude;
final double longitude;
}
See also:
- MapShapeLayerController, for dynamically updating the markers.
- MapMarker, to create a map marker.
Implementation
final MapMarkerBuilder? markerBuilder;