How to group the markers based on zoom level ?
In Syncfusion® Flutter Maps, you can group the markers based on the zoom level of the maps.
Step 1: Add the markers in load time and initialize the MapTileLayerController and MapZoomPanBehavior in the initState() method.
User guide: https://help.syncfusion.com/flutter/maps/markers#adding-markers
late MapTileLayerController _tileController;
late MapZoomPanBehavior _zoomPanBehavior;
late List<MarkerDataModel> _markerData;
@override
void initState() {
_tileController = MapTileLayerController();
_zoomPanBehavior = MapZoomPanBehavior(
zoomLevel: 1,
focalLatLng: MapLatLng(20.5937, 78.9629),
);
_markerData = <MarkerDataModel>[
MarkerDataModel(latitude: 28.7041, longitude: 77.1025)
];
super.initState();
}
Step 2: Set the MapTileLayerController instance to the MapTileLayer.controller property and the marker data collection’s length to the initialMarkersCount property, then return the customized MapMarker using the markerBuilder callback.
SfMaps(
layers: [
MapTileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
initialMarkersCount: _markerData.length,
controller: _tileController,
markerBuilder: (BuildContext context, int index) {
return MapMarker(
latitude: _markerData[index].latitude!,
longitude: _markerData[index].longitude!,
child: Icon(Icons.location_on),
size: Size(30, 30),
);
},
),
],
),
Step 3: Now group the marker based on the zoom level using the values returned in the onWillZoom callback.
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(title: Text('Update marker position based on zoom level')),
body: Center(
child: SfMaps(
layers: [
MapTileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png',
initialMarkersCount: _markerData.length,
controller: _tileController,
markerBuilder: (BuildContext context, int index) {
return MapMarker(
latitude: _markerData[index].latitude!,
longitude: _markerData[index].longitude!,
child: Icon(Icons.location_on),
size: Size(30, 30),
);
},
onWillZoom: (MapZoomDetails details) {
_markerData.clear();
if (details.newZoomLevel! <= 3) {
_markerData.add(
MarkerDataModel(latitude: 20.5937, longitude: 78.9629));
_tileController.clearMarkers();
_tileController.insertMarker(0);
}
if (details.newZoomLevel! >= 4) {
_markerData.add(
MarkerDataModel(latitude: 11.1271, longitude: 78.6569));
_markerData.add(
MarkerDataModel(latitude: 17.3850, longitude: 78.4867));
_markerData.add(
MarkerDataModel(latitude: 19.0760, longitude: 72.8777));
_markerData.add(
MarkerDataModel(latitude: 20.9517, longitude: 85.0985));
_markerData.add(
MarkerDataModel(latitude: 23.0225, longitude: 72.5714));
_markerData.add(
MarkerDataModel(latitude: 26.8467, longitude: 80.9462));
_markerData.add(
MarkerDataModel(latitude: 28.7041, longitude: 77.1025));
_markerData.add(
MarkerDataModel(latitude: 22.5726, longitude: 88.3639));
_markerData.add(
MarkerDataModel(latitude: 25.0961, longitude: 85.3131));
_markerData.add(
MarkerDataModel(latitude: 22.9734, longitude: 78.6569));
_tileController.clearMarkers();
for (int i = 0; i < _markerData.length; i++) {
_tileController.insertMarker(i);
}
}
return true;
},
zoomPanBehavior: _zoomPanBehavior,
),
],
),
),
);
}
It is applicable for both tile layer and shape layer.
Output:
The following screenshot illustrates the output when zoom level is 1.
The following screenshot illustrates the output when zoom level is 4.
Check the below links for more features in Syncfusion® Flutter Maps,
Live samples,
