How to draw custom shapes on Flutter Maps?
Using Flutter Maps, you can easily draw custom shapes on the maps.
Step 1: Add the Syncfusion® Flutter Maps package to your dependencies in the pubspec.yaml file and initialize the Maps with necessary properties. Add a MapTileLayer to the list of layers in SfMaps. In the MapTileLayer.urlTemplate property, the URL of the tile’s provider must be set.
late _CustomZoomPanBehavior _mapZoomPanBehavior;
@override
void initState() {
_mapZoomPanBehavior = _CustomZoomPanBehavior();
super.initState();
}
@override
Widget build(BuildContext context) {
return Scaffold(
body: SfMaps(
layers: [
MapTileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
zoomPanBehavior: _mapZoomPanBehavior,
),
],
),
);
}
Step 2: Create a custom class that extends the MapZoomPanBehavior, and assign it to the MapTileLayer.zoomPanBehavior property. Now, override the onZooming, onPanning, and Paint methods in the custom class. Please refer to this documentation to learn more about overriding methods in the MapZoomPanBehavior.
Step 3: When interacting, you will receive the zooming or panning details on the respective methods. Following that, the paint method is called. You can paint the custom shapes using the canvas in this render object into the given context at the given offset.
The following example explains how to draw crosshair when zooming and a line when panning in the Maps.
class _CustomZoomPanBehavior extends MapZoomPanBehavior {
final Path path = Path();
Offset _focalPoint = Offset.zero;
bool _isPanning = false;
@override
void onZooming(MapZoomDetails details) {
_focalPoint = details.localFocalPoint!;
if (_isPanning) {
_isPanning = false;
path.reset();
}
super.onZooming(details);
}
@override
void onPanning(MapPanDetails details) {
_focalPoint = details.localFocalPoint!;
if (_isPanning) {
path.lineTo(_focalPoint.dx, _focalPoint.dy);
} else {
_isPanning = true;
path.moveTo(_focalPoint.dx, _focalPoint.dy);
}
super.onPanning(details);
}
@override
void paint(PaintingContext context, Offset offset) {
final Size? size = this.renderBox.size;
if (_focalPoint == Offset.zero || size == null) {
return;
}
final Paint paint = Paint()
..color = Colors.red
..strokeWidth = 1
..style = PaintingStyle.stroke;
context.canvas.save();
context.canvas.translate(offset.dx, offset.dy);
context.canvas.drawLine(Offset(_focalPoint.dx, 0.0),
Offset(_focalPoint.dx, size.height), paint);
context.canvas.drawLine(
Offset(0.0, _focalPoint.dy), Offset(size.width, _focalPoint.dy), paint);
if (_isPanning) {
context.canvas.drawPath(path, paint);
}
context.canvas.restore();
super.paint(context, offset);
}
}
Output
Check the following links for more features in Syncfusion® Flutter Maps:
Live samples
Blogs related to Maps
- Introduction to Flutter Maps
- Add live location tracking to your app using Flutter Maps
- Easily Visualize OpenStreetMaps and Bing Maps in Flutter
- Display routes and highlight regions in Flutter Maps
- Add animated and interactive custom Map markers in Flutter Maps
Conclusion
I hope you enjoyed learning about how to draw custom shapes on Flutter Maps.
You can refer to our Flutter Maps feature tour page to know about its other groundbreaking feature representations and documentation, and how to quickly get started for configuration specifications.
For current customers, you can check out our components from the License and Downloads page. If you are new to Syncfusion®, you can try our 30-day free trial to check out our other controls.
If you have any queries or require clarifications, please let us know in the comments section below. You can also contact us through our support forums, Direct-Trac, or feedback portal. We are always happy to assist you!
