Adding a new sub-layer dynamically to an existing SfMap widget

[Alexandre]

Dear, 

Is-it possible to add a sublayer (e.g., a MapPolygonLayer) dynamically (after the map being loaded) when a user clicks on a button for example ? 

I am looking for the equivalent of the method "insertMarker()" but for Polygon instead of Markers. 

Thank you very much for your help, 

Regards, 

Alexandre

[Yuvaraj Gajaraj]

Hi Alexandre,

Greetings from Syncfusion.

Your requirement can be achieved by having a list of polygon layers and assigning it to polygons property in the MapPolygoneLayer. You can dynamically add the additional polygon values in that existing list inside the setState in the button click, it will update the map dynamically. This step is the same for both the shape and tile layer.

We have shared the code snippet and sample below for your requirement.

Code snippet:

// Initialization

late List<List<MapLatLng>> _polygons;

@override

void initState() {

_polygons = [

[

const MapLatLng(55.7558, 37.6173),

const MapLatLng(53.7596, 87.1216),

const MapLatLng(61.5240, 105.3188),

],

[

const MapLatLng(64.2823, -135.0000),

const MapLatLng(51.2538, -85.3232),

const MapLatLng(48.4284, -123.3656),

]

];

super.initState();

}

// In build method

SfMaps(

layers: <MapLayer>[

MapTileLayer(

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

sublayers: [

MapPolygonLayer(

polygons: List<MapPolygon>.generate(

_polygons.length,

(int index) {

return MapPolygon(

points: _polygons[index],

);

},

).toSet(),

)

],

),

],

),

// In button click adding polygon in existing list and update in view

ElevatedButton(

child: const Text('Add'),

onPressed: () {

setState(() {

_polygons.add(<MapLatLng>[

const MapLatLng(27.6648, -81.5158),

const MapLatLng(32.3078, -64.7505),

const MapLatLng(18.2208, -66.5901),

]);

});

},

)

Regards,

Yuvaraj.

Attachment: f179770_83c7d94b.zip