Render when urlTemplate changes

[Marko]

Hi,

I have an issue with maps not rendering when urlTemplate parameter changes. In an application multiple map vendor are supported. On button click user can change from one vendor to another (OpenStreet to Google or similar).

Although url changes new map is not rendered despite calling setState function.

Please assist.

  @override
  Widget build(BuildContext context) {
    return SfMaps(
      layers: [
        MapTileLayer(
          urlTemplate: widget.url,
          initialMarkersCount: 1,
          initialZoomLevel: 15,
          initialFocalLatLng: MapLatLng(45.3271, 14.4422),
          controller: layerController,
          markerBuilder: (context, index) {
            return MapMarker(
              latitude: widget.latitude,
              longitude: widget.longitude,
              child: Icon(Icons.agriculture_sharp, color: Colors.deepOrange),
            );
          },
        ),
      ],
    );
  }


    @override
  void didUpdateWidget(MapWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    if (widget.url != oldWidget.url) {
      setState(() {});
    }
  }


Kind regards,

Marko

[Naveen Kesavaraj]

Hi,
 

In Syncfusion Flutter maps, the urlTemplate property only updates at load time, as this is part of the default behavior of SfMaps. There is no built-in support for dynamic updates. When switching between map vendors, simply calling `setState` will not trigger the map to re-render with the new URL template.

However, you can achieve this by assigning a unique key to the  SfMaps widget based on the URL value. By implementing something like `key: ValueKey(widget.url)` on your  SfMaps widget, you force Flutter to treat it as a completely new widget whenever the URL changes, ensuring that the map properly renders with the updated template.

 

class _MapScreenState extends State<MapScreen> {

  final List<String> mapUrls = [

    'https://tile.openstreetmap.org/{z}/{x}/{y}.png',

    // You can add more map URLs here if needed.

  ];

}

 

 

 @override

  Widget build(BuildContext context) {

    return SfMaps(

      key: ValueKey(widget.url),
}

This approach effectively manages the switching between different map providers in your application. Additionally, I have shared a sample and demo for your reference.

Regards,
Naveen K.

Attachment: forum_197140_19d71e80.zip

[Marko]

Thank you

[Chrispine Agunja Imbo]

Hi Marko, 

You are welcome. Please feel free to contact us if you need any further assistance.

Regards,

Chris