How to synchronize the onSelectionChanged () property and markerBuilder constructor

[Kotrotko]

My Flutter app needs to select an area on the map and only show markers on the selected area. Ideally, I should do it on OSM, but first I decided to try it on json maps. To solve this problem, I'm trying to synchronize the onSelectionChanged () property and constructor markerBuilder of MapShapeLayer widget. Unfortunately, my knowledge is not enough to do this. I want to understand if it is possible to solve my problem using syncfusion_flutter_maps package. Maybe I should use a different approach. I would appreciate any help.

Here is my snippet. It works, but onSelectionChanged() and markerBuilder work independently.

```

layers: [

  MapShapeLayer(
      source: _markedSource,
      initialMarkersCount: 1,
      selectedIndex: selectedIndex,
      onSelectionChanged: (int index) {
        setState(() {
          selectedIndex = index;
        });
      },
      markerBuilder: (BuildContext context, int index) {
        return MapMarker(
            latitude: _markedData[index].latitude,
            longitude: _markedData[index].longitude,
            iconColor: Colors.red);
      }),
],

```

[Lakshmi Radha Krishnan]

Hi Kotrotko,

 

Greetings from Syncfusion.

 

You can show marker on the selected shape by adding markers using the MapShapeLayerController.insertMarker option and remove all the markers using the MapShapeLayerController.clearMarkers option when deselecting the shape in the onSelectionChanged callback as shown in the below code snippet. 

 

Please refer the below link for dynamically adding, removing, updating and clearing markers. 

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

 

Code snippet:

 

class MapsMarkerSelection extends StatefulWidget {

  @override

  _MapsMarkerSelectionState createState() => _MapsMarkerSelectionState();

}

  

  class _MapsMarkerSelectionState extends State<MapsMarkerSelection> {

  List<Model> _data;

  MapShapeSource _dataSource;

  MapShapeLayerController _controller;

  int _selectedIndex = -1;

  MapLatLng _markerPosition;

  

  @override

  void initState() {

    super.initState();

    _controller = MapShapeLayerController();

    _markerPosition = MapLatLng(-14.2350, -51.9253);

    _data = const <Model>[

      Model('Brazil', MapLatLng(-14.2350, -51.9253), Colors.green),

    ];

  

    _dataSource = MapShapeSource.asset(

      "assets/south_america.json",

      shapeDataField: "name",

      dataCount: _data.length,

      primaryValueMapper: (int index) => _data[index].state,

      shapeColorValueMapper: (int index) => _data[index].color,

    );

  }

  

  @override

  Widget build(BuildContext context) {

    return Scaffold(

      appBar: AppBar(title: Text('Marker selection')),

      body: Center(

        child: Container(

          height: 550,

          child: SfMaps(

            layers: [

              MapShapeLayer(

                source: _dataSource,

                selectedIndex: _selectedIndex,

                markerBuilder: (BuildContext context, int index) {

                  return MapMarker(

                    latitude: _markerPosition.latitude,

                    longitude: _markerPosition.longitude,

                    child: Icon(Icons.location_on),

                    size: Size(25, 25),

                  );

                },

                controller: _controller,

                onSelectionChanged: (int index) {

                  setState(() {

                    _selectedIndex = _selectedIndex == index ? -1 : index;

                    _selectedIndex == -1

                        ? _controller.clearMarkers()

                        : _controller.insertMarker(0);

                  });

                },

              ),

            ],

          ),

        ),

      ),

    );

  }

}

  

  class Model {

  const Model(this.state, this.latLng, this.color);

  

  final String state;

  final MapLatLng latLng;

  final Color color;

}

 

 

If you have any other specific requirement, kindly provide brief details about it.

 

Regards,

Lakshmi R.