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

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


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, 



1 Reply

YG Yuvaraj Gajaraj Syncfusion Team January 4, 2023 12:01 PM UTC

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;
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),

// In build method
layers: <MapLayer>[
urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
sublayers: [
polygons: List<MapPolygon>.generate(
(int index) {
return MapPolygon(
points: _polygons[index],
// In button click adding polygon in existing list and update in view
child: const Text('Add'),
onPressed: () {
setState(() {
const MapLatLng(27.6648, -81.5158),
const MapLatLng(32.3078, -64.7505),
const MapLatLng(18.2208, -66.5901),



Attachment: f179770_83c7d94b.zip

Live Chat Icon For mobile
Up arrow icon