We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

setState() not working in SfMaps

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.

4 Replies

NR Natrayan Ramalingam Syncfusion Team November 14, 2022 09:29 AM

Hi Neha,

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



SK Sriram Kiran Senthilkumar Syncfusion Team November 15, 2022 08:03 AM

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.

NE Neha replied to Sriram Kiran Senthilkumar November 17, 2022 02:01 AM

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.

YG Yuvaraj Gajaraj Syncfusion Team November 20, 2022 05:02 AM

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



Attachment: f178781_af7c51.zip

Live Chat Icon For mobile
Up arrow icon