Flutter Syncfusion Map move marker programmatically from MapLatLng to another

Question

Thanks in advance for anyone that help with this question. I have one marker (blue) representing user current location of user, but thus is mock MapLatLng as the user will be able to tap on the map where they will like to go next next. I would like to know how I can programmatically move the blue to the red marker to mimic a travel. I am using flutter syncfusion map, thanks again for any feedback

Do you know how to update an existing marker's position and you need help with how to make it move to the other marker? Or you don't know how to update marker's position? — Peter Koltai, Oct 15 '22 at 09:13
@PeterKoltai thanks for responding. I know how to update the marker’s position using a mapcontroller but I need the LatLng position between point A and Point B so I can dynamically updates every second — Abdurraheem Abdulhakeem, Oct 15 '22 at 12:01
To do this precisely can be difficult. Check the [accepted answer here](https://stackoverflow.com/questions/22968841/how-to-move-a-marker-on-a-straight-line-between-two-coordinates-in-mapbox-js) for a simple but inaccurate way. Also check the [link provided in the answer](http://www.movable-type.co.uk/scripts/latlong.html) for detailed descriptions on how to calculate precisely. — Peter Koltai, Oct 15 '22 at 12:57

Praveen G · Answer 1 · 2022-10-18T11:16:28.447

You can use MapShapeLayerController.pixelToLatLng method to convert the tapped local position into the MapLatLng. To update the map zoomLevel and focalLatLng programmatically, set the new zoom level to the MapZoomPanBehavior.zoomLevel property and center position to the MapZoomPanBehavior.focalLatLng property. I have attached the code snippet for your reference.

  late MapZoomPanBehavior _zoomPanBehavior;
  late MapShapeLayerController _shapeLayerController;
  late MapShapeSource _mapShapeSource;
  late List<MapLatLng> _markers;

  @override
  void initState() {
    _mapShapeSource =
        const MapShapeSource.asset('assets/usa.json', shapeDataField: 'name');
    _shapeLayerController = MapShapeLayerController();
    _zoomPanBehavior = MapZoomPanBehavior();
    _markers = [const MapLatLng(40.26755819027706, -74.5658675759431)];
    super.initState();
  }

  @override
  void dispose() {
    _shapeLayerController.dispose();
    _markers.clear();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text(widget.title)),
      body: Stack(children: <Widget>[
        _buildMapsWidget(),
        GestureDetector(
          onTapUp: (details) {
            // Converting the tapped point into MapLatLng and adding the marker
            // in that position.
            final MapLatLng latLng =
                _shapeLayerController.pixelToLatLng(details.localPosition);
            _markers.add(latLng);
            _shapeLayerController.insertMarker(_markers.length - 1);
          },
        ),
        Align(
          alignment: Alignment.bottomCenter,
          child: ElevatedButton(
              onPressed: (() {
                // Programmatically change the zoomLevel and focalLatLng with animation.
                _zoomPanBehavior.zoomLevel = 3;
                _zoomPanBehavior.focalLatLng = const MapLatLng(39.466, -116.83);
              }),
              child: const Text('Nevada, USA')),
        )
      ]),
    );
  }

  Widget _buildMapsWidget() {
    return SfMaps(
      layers: <MapLayer>[
        MapShapeLayer(
          source: _mapShapeSource,
          showDataLabels: true,
          initialMarkersCount: _markers.length,
          markerBuilder: (context, index) {
            return MapMarker(
              latitude: _markers[index].latitude,
              longitude: _markers[index].longitude,
              child: const Icon(Icons.location_on, color: Colors.red),
            );
          },
          zoomPanBehavior: _zoomPanBehavior,
          controller: _shapeLayerController,
          dataLabelSettings: const MapDataLabelSettings(
              textStyle: TextStyle(color: Colors.black, fontSize: 10),
              overflowMode: MapLabelOverflow.hide),
        ),
      ],
    );
  }

Also, refer to the following knowledge base and user guide documentation links to know more about updating the markers and changing zoomLevel and focalLatLng dynamically.

KB links:

Add/Update markers - https://www.syncfusion.com/kb/13025/how-to-update-the-markers-dynamically-using-flutter-maps
Update latitude and longitude programmatically - https://www.syncfusion.com/kb/12366/how-to-zoom-and-pan-programmatically-in-flutter-maps

UG Links:

Add/Update markers - https://help.syncfusion.com/flutter/maps/markers#for-shape-layer
Update latitude and longitude programmatically - https://help.syncfusion.com/flutter/maps/zoom-pan#update-the-center-latitude-and-longitude-programmatically

Flutter Syncfusion Map move marker programmatically from MapLatLng to another

1 Answers1