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

Answer 1

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