distance between two marker points

[Neelay]

How i can show the distance when drawing a line in the map as it takes 2 coordinates if we can show the distance in the middle of line ??

[Praveen Gopalsamy]

Hi Neelay, 

There is no direct support to show the distance at middle of the MapLine. But you can achieve you requirement by showing the distance at middle using the MapLineLayer.tooltipBuilder or calculating a center coordinate point between the given two coordinate points and placing a marker in it. We have attached the code snippet for your reference. 

  late List<_MarkerData> _markerData; 

  late MapZoomPanBehavior _zoomPanBehavior; 

 

  @override 

  void initState() { 

    _markerData = <_MarkerData>[ 

      const _MarkerData(MapLatLng(13.0827, 80.2707), Icons.circle_outlined), 

      const _MarkerData(MapLatLng(28.7041, 77.1025), Icons.location_on), 

      const _MarkerData(MapLatLng(20.8934, 78.6866)), 

    ]; 

    _zoomPanBehavior = MapZoomPanBehavior( 

        focalLatLng: const MapLatLng(20.8934, 78.6866), zoomLevel: 5); 

    super.initState(); 

  } 

 

  Widget _tooltipBuilder(BuildContext context, int index) { 

    return Padding( 

      padding: const EdgeInsets.only(left: 5.0, right: 5.0, top: 5.0), 

      child: SizedBox( 

        height: 40, 

        child: Column( 

          mainAxisSize: MainAxisSize.min, 

          children: const <Widget>[ 

            Text('Journey: Chennai - Delhi', 

                style: TextStyle( 

                    fontWeight: FontWeight.bold, color: Colors.white)), 

            Padding( 

              padding: EdgeInsets.only(top: 5.0), 

              child: Text('Distance: 1757 Km', 

                  style: TextStyle(color: Colors.white)), 

            ), 

          ], 

        ), 

      ), 

    ); 

  } 

 

  @override 

  Widget build(BuildContext context) { 

    return Scaffold( 

      body: Center( 

        child: SfMaps( 

          layers: <MapTileLayer>[ 

            MapTileLayer( 

              urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', 

              initialMarkersCount: _markerData.length, 

              zoomPanBehavior: _zoomPanBehavior, 

              markerBuilder: (BuildContext context, int index) { 

                return MapMarker( 

                  latitude: _markerData[index].latLng.latitude, 

                  longitude: _markerData[index].latLng.longitude, 

                  child: _markerData[index].icon != null 

                      ? Icon(_markerData[index].icon, 

                          color: Colors.red, size: 20) 

                      : Row( 

                          mainAxisSize: MainAxisSize.min, 

                          children: const <Widget>[ 

                            Icon(Icons.flight_takeoff), 

                            Padding( 

                              padding: EdgeInsets.only(left: 5.0), 

                              child: Text('1757 Km'), 

                            ), 

                          ], 

                        ), 

                ); 

              }, 

              tooltipSettings: const MapTooltipSettings( 

                  color: Color.fromRGBO(45, 45, 45, 1)), 

              sublayers: <MapSublayer>[ 

                MapLineLayer( 

                  lines: const <MapLine>{ 

                    MapLine( 

                      from: MapLatLng(13.0827, 80.2707), // Chennai 

                      to: MapLatLng(28.7041, 77.1025), // Delhi 

                      color: Colors.red, 

                      strokeCap: StrokeCap.round, 

                      width: 2.0, 

                    ) 

                  }, 

                  tooltipBuilder: _tooltipBuilder, 

                ) 

              ], 

            ), 

          ], 

        ), 

      ), 

    ); 

  } 

} 

 

class _MarkerData { 

  const _MarkerData(this.latLng, [this.icon]); 

  final MapLatLng latLng; 

  final IconData? icon; 

} 

We hope this will fulfill your requirement. Please let us know if you need any further assistance in this. 

  

Regards, 

Praveen G.