How to update the markers dynamically using Flutter Maps?

4 mins read

In Flutter Maps, you can dynamically update the markers by following these steps.

Step 1: Add Syncfusion® Flutter Maps package to your dependencies in the pubspec.yaml file and initialize the Maps with the necessary properties. Please refer to this documentation for initializing the tile layer with markers.

late List<Model> _data;
late MapTileLayerController _controller;
 
@override
void initState() {
  _data = <Model>[
    Model(-14.235004, -51.92528, Icon(Icons.location_on_sharp)),
    Model(51.16569, 10.451526, Icon(Icons.location_on_sharp)),
    Model(-25.274398, 133.775136, Icon(Icons.location_on_sharp)),
    Model(61.52401, 105.318756, Icon(Icons.location_on_sharp))
  ];
  _controller = MapTileLayerController();
  super.initState();
}

Step 2: Next, set the MapTileLayerController to the MapTileLayer.controller property, which is used for adding, removing, deleting, updating the markers collection, and converting pixel points to latitude and longitude.

Note:

For MapShapeLayer, set the MapShapeLayerController to the MapShapeLayer.controller property to update the markers dynamically.

Step 3:

To add a marker in the existing marker collections, pass the index of the marker to be added in _controller.insertMarker() method. This method will call the MapTileLayer.markerBuilder() callback again, for the last added index.
To update the existing markers, pass the list of indices that needs to be updated in the _controller.updateMarkers() method. This method will call the MapTileLayer.markerBuilder() callback again, for the given indices.
To remove a marker from a specific index, pass the respective index in the _controller.removeMarkerAt() method. After removing the existing markers, the collection will be re-updated automatically.
To clear the entire markers, you can use the _controller.clearMarkers() method. This will remove entire marker collections from maps.

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: Column(
      children: [
        SfMaps(
          layers: <MapLayer>[
            MapTileLayer(
              urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
              initialFocalLatLng:
                  MapLatLng(36.27662812847283, 40.76405763626096),
              initialMarkersCount: _data.length,
              markerBuilder: (BuildContext context, int index) {
                return MapMarker(
                  latitude: _data[index].latitude,
                  longitude: _data[index].longitude,
                  child: _data[index].icon,
                );
              },
              controller: _controller,
            ),
          ],
        ),
        Wrap(
          spacing: 10,
          children: [
            ElevatedButton(
              child: Text('Add'),
              onPressed: () {
                _data.add(Model(20.593684, 78.96288, Icon(Icons.add_location)));
                int length = _data.length;
                if (length > 1) {
                  _controller.insertMarker(_data.length - 1);
                } else {
                  _controller.insertMarker(0);
                }
              },
            ),
            ElevatedButton(
              child: Text('Update'),
              onPressed: () {
                int length = _data.length;
                if (length > 0) {
                  _data[length - 1].icon = Icon(Icons.edit_location);
                  _controller.updateMarkers([length - 1]);
                }
              },
            ),
            ElevatedButton(
              child: Text('Remove'),
              onPressed: () {
                int index = _data.length - 1;
                if (index > 0) {
                  _data.removeAt(index);
                  _controller.removeMarkerAt(index);
                }
              },
            ),
            ElevatedButton(
              child: Text('Clear'),
              onPressed: () {
                _data.clear();
                _controller.clearMarkers();
              },
            ),
          ],
        ),
      ],
    ),
  );
}
 
class Model {
  Model(this.latitude, this.longitude, this.icon);
 
  final double latitude;
  final double longitude;
  Icon icon;
}

Thus, using the Syncfusion® Flutter Maps, we have dynamically updated the marker collections.

Output

Syncfusion Flutter maps markers

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

Live samples

Conclusion

I hope you enjoyed learning about how to update the markers dynamically using Flutter Maps.

You can refer to our Flutter Maps feature tour page to know about its other groundbreaking feature representations. You can also explore our Flutter Maps documentation to understand how to create and manipulate data.

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!

Did you find this information helpful?

Yes

Comments (0)

How to update the markers dynamically using Flutter Maps?

Output

Access denied