setState() not working in SfMaps

[Neha]

I have set the markers based on a list, which can be changed when the user clicks a button. On clicking the button, the list gets updated and setState() gets called. On debugging, the build function gets called, which in turn is supposed to rebuild the SfMaps widget, but it's not getting affected by the setState().

Please help. Thanks in advance.

[Natrayan Ramalingam]

Hi Neha,

Currently, we are validating your query and will update the complete details in one business day.

Regards,

Natrayan

[Sriram Kiran Senthilkumar]

For updating markers in the map, you can use the MapShapeLayerController available in the SfMaps widget. The MapShapeLayerController has several methods such as,

1. insertMarker - To add a marker dynamically into the map widget.
2. updateMarkers - To update existing markers dynamically in the map widget.
3. removeMarkerAt – To remove the marker at any index dynamically in the map widget.
4. clearMarkers – To clear all the markers dynamically in the map widget.

We have also attached user guide documentation for adding, updating, removing, and clearing the markers in the maps widget dynamically using the MapShapeLayerController in the Maps widget.

• https://help.syncfusion.com/flutter/maps/markers#adding-markers-dynamicallyhttps://help.syncfusion.com/flutter/maps/markers#updating-the-existing-markers
• https://help.syncfusion.com/flutter/maps/markers#deleting-a-marker
• https://help.syncfusion.com/flutter/maps/markers#clearing-the-markers

[Neha]

SfMaps(
layers: [
                                MapTileLayer(
                                  controller: _mapTileLayerController,
                                  urlTemplate:
                                      'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
                                  zoomPanBehavior: _mapZoomPanBehavior,
                                  initialMarkersCount:
                                      gpsStoppageHistory.length,
                                  markerBuilder:
                                      (BuildContext context, int index) {
                                    print(
                                        "gps stops length is ${gpsStoppageHistory.length}, $index");
                                    if (index ==
                                        gpsStoppageHistory.length - 1) {
                                      return MapMarker(
                                          latitude: gpsStoppageHistory[index]
                                              .latitude,
                                          longitude: gpsStoppageHistory[index]
                                              .longitude,
                                          child: Image.asset(
                                              'assets/icons/truckPin.png',
                                              height: 80));
                                    } else {
                                      return MapMarker(
                                        latitude:
                                            gpsStoppageHistory[index].latitude,
                                        longitude:
                                            gpsStoppageHistory[index].longitude,
                                        iconType: MapIconType.circle,
                                        child: CircleAvatar(
                                          backgroundColor: red,
                                          foregroundColor: white,
                                          child: Center(
                                              child:
                                                  Text((index + 1).toString())),
                                        ),
                                      );
                                    }
                                  },
                                  sublayers: [
                                    MapPolylineLayer(
                                      polylines: {
                                        MapPolyline(
                                          points: polylineCoordinates2,
                                          color:
                                              Color.fromRGBO(0, 102, 255, 1.0),
                                          width: 6.0,
                                        )
                                      },
                                    ),
                                  ],
                                ),
                              ],
                            ),

This was the code I was mentioning before, here the data source which is used to plot markers is gpsStoppageHistory, which is a list mapped from an API, and when I click a button, this list is updated with some additional values, and then setState() is called. Hence after the setState() function, the map is supposed to use the updated value of the gpsStoppageHistory, but the value is not getting updated in the map, its still showing the old set of markers before updating the list.

[Yuvaraj Gajaraj]

Hi Neha,

We have tried to add the marker location dynamically to the existing marker list and update the recently added marker using the insertMarker and it is working properly. The reported issue is not reproduced at our end, and we have shared the sample below which is used for testing at our end. If you still facing issues, please revert us by modifying the attached sample with the replication procedure.

UG: https://help.syncfusion.com/flutter/maps/markers#adding-markers-dynamically

Regards,

Yuvaraj.

Attachment: f178781_af7c51.zip