How to add and animate lines in maps at load time ?

3 mins read

In Syncfusion® Flutter Maps, you can add lines, arcs, and polylines with customized animations by following these steps:

Step 1: Add syncfusion_flutter_maps packages to your pubspec.yaml file.

Line

Initialize the line points and animation in the initState() method.

late DataModel _linePoint;
late List<MapLatLng> _markerData;
late AnimationController _animationController;
late Animation<double> _animation;
 
@override
void initState() {
  _linePoint = DataModel(MapLatLng(12.9941, 80.1709), MapLatLng(19.09651, 72.8745));
  _markerData = <MapLatLng>[
    MapLatLng(19.09651, 72.8745),
    MapLatLng(12.9941, 80.1709),
  ];
 
  _animationController = AnimationController(
    duration: Duration(milliseconds: 1500),
    vsync: this,
  );
 
  _animation = CurvedAnimation(
    parent: _animationController,
    curve: Curves.easeInOut,
  );
 
  _animationController.forward(from: 0);
  super.initState();
}

Add MapLineLayer to the MapTileLayer sublayers property and set the line points to the MapLineLayer lines property. You can customize animation by using the MapLineLayer.animation property.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Maps line animation')),
    body: SfMaps(
      layers: [
        MapTileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          initialZoomLevel: 5,
          initialFocalLatLng: MapLatLng(20.9734, 78.6569),
          initialMarkersCount: _markerData.length,
          markerBuilder: (BuildContext context, int index) {
            return MapMarker(
              latitude: _markerData[index].latitude,
              longitude: _markerData[index].longitude,
              iconType: MapIconType.circle,
              iconColor: Colors.white,
              iconStrokeWidth: 1.5,
              iconStrokeColor: Colors.black,
              size: Size(10, 10),
              child: index != 0
                  ? Icon(Icons.flight, color: Colors.red, size: 20)
                  : null,
            );
          },
          sublayers: [
            MapLineLayer(
              lines: <MapLine>[
                MapLine(
                  from: _linePoint.from,
                  to: _linePoint.to,
                  color: Colors.blue,
                  width: 3,
                )
              ].toSet(),
              animation: _animation,
            )
          ],
        ),
      ],
    ),
  );
}
 
class DataModel {
  DataModel(this.from, this.to);
 
  MapLatLng from;
  MapLatLng to;
}

Screenshot

Syncfusion maps lines

Arcs

Initialize the arc points and animation in the initState() method.

late DataModel _arcPoint;
late List<MapLatLng> _markerData;
late AnimationController _animationController;
late Animation<double> _animation;
 
@override
void initState() {
  _arcPoint = DataModel(MapLatLng(12.9941, 80.1709), MapLatLng(19.09651, 72.8745));
  _markerData = <MapLatLng>[
    MapLatLng(19.09651, 72.8745),
    MapLatLng(12.9941, 80.1709),
  ];
 
  _animationController = AnimationController(
    duration: Duration(milliseconds: 1500),
    vsync: this,
  );
 
  _animation = CurvedAnimation(
    parent: _animationController,
    curve: Curves.easeInOut,
  );
 
  _animationController.forward(from: 0);
  super.initState();
}

Add MapArcLayer to the MapTileLayer sublayers property and set the arc points to the MapArcLayer.arc property. You can customize animation by using the MapArcLayer.animation property.

@override
Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Maps arc animation')),
    body: SfMaps(
      layers: [
        MapTileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          initialZoomLevel: 5,
          initialFocalLatLng: MapLatLng(20.9734, 78.6569),
          initialMarkersCount: _markerData.length,
          markerBuilder: (BuildContext context, int index) {
            return MapMarker(
              latitude: _markerData[index].latitude,
              longitude: _markerData[index].longitude,
              iconType: MapIconType.circle,
              iconColor: Colors.white,
              iconStrokeWidth: 1.5,
              iconStrokeColor: Colors.black,
              size: Size(10, 10),
              child: index != 0
                  ? Icon(Icons.flight, color: Colors.red, size: 20)
                  : null,
            );
          },
          sublayers: [
            MapArcLayer(
              arcs: <MapArc>[
                MapArc(
                    from: _arcPoint.from,
                    to: _arcPoint.to,
                    color: Colors.blue,
                    width: 3,
                    heightFactor: 0.2,
                    controlPointFactor: 0.5)
              ].toSet(),
              animation: _animation,
            )
          ],
        ),
      ],
    ),
  );
}
 
class DataModel {
  DataModel(this.from, this.to);
 
  MapLatLng from;
  MapLatLng to;
}

Screenshot

Syncfusion maps acrs

Polyline

Initialize the polyline points and animation in the initState() method.

late List<MapLatLng> _polylines;
late AnimationController _animationController;
late Animation<double> _animation;
 
@override
void initState() {
  _polylines = <MapLatLng>[
    MapLatLng(12.9941, 80.1709),
    MapLatLng(19.09651, 72.8745),
    MapLatLng(28.5562, 77.1000),
  ];
 
  _animationController = AnimationController(
    duration: Duration(milliseconds: 1500),
    vsync: this,
  );
 
  _animation = CurvedAnimation(
    parent: _animationController,
    curve: Curves.easeInOut,
  );
 
  _animationController.forward(from: 0);
  super.initState();
}

Add MapPolylineLayer to the MapTileLayer sublayers property and set the polyline points to the MapPolylineLayer.polylines property. You can customize animation by using the MapPolylineLayer.animation property.

@override
 Widget build(BuildContext context) {
  return Scaffold(
    appBar: AppBar(title: Text('Maps polyline animation')),
    body: SfMaps(
      layers: [
        MapTileLayer(
          urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
          initialZoomLevel: 5,
          initialFocalLatLng: MapLatLng(20.9734, 78.6569),
          initialMarkersCount: _polylines.length,
          markerBuilder: (BuildContext context, int index) {
            return  MapMarker(
              latitude: _polylines[index].latitude,
              longitude: _polylines[index].longitude,
              iconType: MapIconType.circle,
              iconColor: Colors.white,
              iconStrokeWidth: 1.5,
              iconStrokeColor: Colors.black,
              size: Size(10, 10),
              child: index == 0
                  ? Icon(Icons.flight, color: Colors.red, size: 20)
                  : null,
            );
          },
          sublayers: [
            MapPolylineLayer(
              polylines: List<MapPolyline>.generate(
                2,
                (int index) {
                  return MapPolyline(
                    points: _polylines,
                    color: Colors.blue,
                    width: 3,
                  );
                },
              ).toSet(),
              animation: _animation,
            ),
          ],
        ),
      ],
    ),
  );
}
 
class DataModel {
  DataModel(this.from, this.to);
 
  MapLatLng from;
  MapLatLng to;
}

Screenshot

Syncfusion maps polylines

Check the following links for more features in Syncfusion® Flutter Maps:

Live samples

Blogs about Flutter Maps

Did you find this information helpful?

Yes

Comments (0)

How to add and animate lines in maps at load time ?

Access denied