1. Home
  2. Forum
  3. Flutter
  4. setState() not working on SfMaps

setState() not working on SfMaps

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 is the code for plotting different markers for tracking the location history of a vehicle. 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, it's still showing the old set of markers before updating the list.


5 Replies
IR Indumathi Ravi Syncfusion Team November 21, 2022 04:32 PM UTC

Hi Neha,


In the SfMaps widget, the markers will not get updated by calling the setState method on the button click based on the updated list.

For adding, deleting, updating, and clearing the markers in the SfMaps widget, you can set the instance MapTileLayerControllers for the MapTileLayer and use its methods such as insertMarker, updateMarkers, removeMarkerAt, and clearMarkers to dynamically add, delete or update the markers in the chart.

We have also created a simple maps sample with a tile layer in which we have added some markers in the maps by default using a list whose items consist of the marker’s latitude and longitude values and have placed a button below the maps widget, and in its onPressed event, we have randomly added some additional latitude and longitude values for the marker that is to be added newly to the list and called the insertMarker method with the index of the newly added marker values in the list. As a result, each time you click the button, a new marker will be added to the maps at random.

We have attached the sample below for reference. Please check and get back to us if you require further assistance.

Also, appended the user guide documentation below for adding, updating, removing, and clearing the markers dynamically in the SfMaps widget for reference.


Regards,

Sriram Kiran


Attachment: f178944_17af843.zip

NE Neha November 30, 2022 05:28 AM UTC

Hi,

Thank you so much for your reply. I tried out your sample and am almost getting what I have to do. But I still have an error that I can't use insertMarkers() function inside a loop. I have demonstrated what I'm trying to do using the sample you provided in your previous reply. I've also put the error screenshot. Please find the attached.

Screenshot (140).png



Attachment: sfforum_(2)_c7ea2b93.zip

PG Praveen Gopalsamy Syncfusion Team December 1, 2022 12:40 PM UTC

Hi Neha,


We would like to let you know that the markerBuilder will be called for the respective index once the insertMarker method is called. So, you have to add the new marker details in the gpsStoppageHistory list. We have modified and attached the given sample based on it. Please check and let us know if you need any further assistance with this.


Also, check the following user guide documentation link to know more about inserting markers dynamically.

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


Regards,
Praveen G.


Attachment: i178944_SfMaps_25ce9bc2.zip

NE Neha December 2, 2022 03:08 PM UTC

Thank you for your reply, I've been able to update my markers accordingly, but a small bug is still left. Here I use the last index of the list to plot a different marker. Since the returned list is a future, we have to update the count of the markers with the new length of the returned list after a particular delay. Initially, the markers count is 5, and after the updation of the gpsStopHistory list is updated, the length is 7. The variable used to store the count of markers is getting updated, but the update is not getting shown on the map. 

For example, the initial count of markers is 5 and when we load the map, the 5th marker is different from the rest of the markers. Hence after updating the list, the count of markers becomes 7, and the 7th marker is supposed to be a different marker, but when we click, the 5th marker is still the different one. I've also attached the modified sample. PFA.


Attachment: sfforum_(3)_153cf7f8.zip

YG Yuvaraj Gajaraj Syncfusion Team December 5, 2022 01:51 PM UTC

Hi Neha,


We have checked the sample that you shared in the last query and found that you assigned the markerCount after the  insertMarker code, due to this last marker is not updated properly. Whenever you call the insertMarker callback in the MapTileLayerController the markerbuilder will be called in the map, so we suggest you add the marker details to gpsStoppageHistory list in the updateStoppages method first, after that assign the markerCount based on the length of gpsStoppageHistory and then update the marker using the insertMarker callback. We have modified the sample and shared it below for your reference.



Regards,

Yuvaraj.



Attachment: f178944_ece2b9c8.zip

Loader.
Up arrow icon