@override
Widget build(BuildContext context) {
return FlutterMap(
options: MapOptions(
initialCenter: LatLng(_center.latitude, _center.longitude),
initialZoom: 9.2,
),
children: [
TileLayer(
urlTemplate: 'https://tile.openstreetmap.org/{z}/{x}/{y}.png', // For demonstration only
userAgentPackageName: "com.example", // Add your app identifier
),
MarkerLayer(
markers: widget.marker.map(
(e) {
return Marker(
width: 200,
height: 170,
rotate: true,
alignment: Alignment.topRight,
point: LatLng(e.latitude, e.longitude),
child: Visibility(visible: true, child: _Marker()),
);
},
).toList(),
// markers: widget.marker.map(
// (e) {
// return Marker(
// height: 5,
// width: 5,
// point: LatLng(e.latitude, e.longitude),
// child: DecoratedBox(
// decoration: BoxDecoration(shape: BoxShape.circle, color: Colors.red),
// ),
// );
// },
// ).toList(),
),
MarkerClusterLayerWidget(
options: MarkerClusterLayerOptions(
maxClusterRadius: 100,
size: const Size(40, 40),
alignment: Alignment.center,
padding: const EdgeInsets.all(150),
rotate: true,
spiderfyCluster: true,
zoomToBoundsOnClick: true,
showPolygon: false,
markerChildBehavior: true,
markers: widget.marker.map(
(e) {
return Marker(
width: 200,
height: 170,
rotate: true,
alignment: Alignment.topRight,
point: LatLng(e.latitude, e.longitude),
child: _Marker(),
);
},
).toList(),
builder: (context, markers) {
return DecoratedBox(
decoration: BoxDecoration(
shape: BoxShape.circle,
color: Colors.red,
),
child: Center(
child: Text(
markers.length.toString(),
style: const TextStyle(color: Colors.white),
),
),
);
},
maxZoom: 15,
centerMarkerOnClick: false,
),
),
],
);
}
I've noticed that Marker widgets created by the
MarkerClusterLayerWidgetare removed too early from the viewport.This only happens for the right screen side.
The example below shows, that the
MarkerLayerfromflutter_mapworks correct:Example Code
_Marker Widget
This video shows the behavior of the cluster layer:
cluster_layer_only.mp4
In this video, the cluster layer and the default tile layer are enabled both at the same time
so that the marker of both layer are overlapping.
The difference in opacity shows, that one marker is removed while the other correctly stays on screen.
both_layer.mp4