Map Overlay¶
The Map SDK supports the following overlays using Annotations:
- Marker
- Polyline
- Polygon
Marker¶
A Marker is an annotation that displays an icon at a specific geographical location on the map. By default, a marker uses a predefined icon, but you can customize it by using the IconFactory to create an icon from any provided image. To add a marker, specify a LatLng position and call addMarker. Since the marker icon is centered on this position, it’s common to add padding around the image to align it visually as needed.
Markers are interactive by design — they respond to click events out of the box and are often paired with event listeners to show InfoWindows. An InfoWindow appears automatically when the marker has either a title or snippet assigned, providing additional context or details.
Add Marker¶
To add the marker with default icon
Symbol symbol = await controller.addSymbol(SymbolOptions(geometry: LatLng(25.321684, 82.987289)));
Custom Marker¶
To add the marker with custom Icon
/// Adds an asset image to the currently displayed style
Future<void> addImageFromAsset(String name, String assetName) async {
final ByteData bytes = await rootBundle.load(assetName);
final Uint8List list = bytes.buffer.asUint8List();
return controller.addImage(name, list);
}
await addImageFromAsset("icon", "assets/symbols/custom-icon.png");
Symbol symbol = await controller.addSymbol(SymbolOptions(geometry: LatLng(25.321684, 82.987289), iconImage: "icon"));
Remove Marker¶
To remove the marker
controller.removeSymbol(symbol);
Polyline¶
A Polyline is a map feature that represents an open series of connected coordinates drawn as a continuous line.
Add polyline¶
To draw a polyline on Map
Line line = await controller.addLine(LineOptions(geometry: latlng, lineColor: "#3bb2d0", lineWidth: 4));
Remove Polyline¶
To remove polyline from Map
controller.removeLine(line);
Polygon¶
A Polygon is a closed shape formed by connecting a series of coordinates, creating a filled area on the map.
Add Polygon¶
To add a polygon on Map
Fill fill = await controller.addFill(FillOptions(geometry: latlng, fillColor: "#3bb2d0"));
Remove Polygon¶
To remove a polygon
controller.removeFill(fill);
For any queries and support, please contact:
Email us at apisupport@mappls.com
Support
Need support? contact us!
