CODEWITHSUNDEEP
flutterfluttermap
newbie
newbie

Reputation: 11

Display multiple points in map using flutter map

Im a newbie in flutter. I'm making a project and I want to know how can I render the list of points using latlong plugin from flutter inside flutter map. I was able to render the first point but unable to show the other points in the list. Can you please guide me or correct my code.

Widget _mapBuilder(BuildContext context) {
  final List<LatLng> _mapPoints = [
    LatLng(9.7, 123.1),
    LatLng(10.7, 124.9),
    LatLng(11.7, 125.05)
];
 return FlutterMap(
 options: MapOptions(
  center: _mapPoints[1],
  zoom: 16.0,
 ),
 layers: [
   TileLayerOptions(
    urlTemplate: "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
    subdomains: ['a', 'b', 'c'],
    attributionBuilder: (_) {
      return const Text("© OpenStreetMap contributors");
    },
  ),
  MarkerLayerOptions(markers: [
    for (var point in _mapPoints) ...[
      Marker(
        width: 15.0,
        height: 15.0,
        point: point,
        builder: (ctx) => Container(
          decoration: BoxDecoration(
              color: Colors.green,
              borderRadius: BorderRadius.circular(50.0),
              border: Border.all(color: Colors.white, width: 2)),
        ),
      ),
    ]
  ]),
 ],
);

Upvotes: 1

Views: 1188

Answers (1)

Abhishek kumar
Abhishek kumar

Reputation: 21

You can create markers list like this and use that list in Markers parameters required in marker layer.

      final List<LatLng> _mapPoints = [
      LatLng(12.9, 77.8),
      LatLng(12.1, 77.2),
      LatLng(12.5,77.4),
    ];
    for (LatLng i in _mapPoints){
      lister.add(Marker(point: i, builder:(ctx) =>
          Container(child: Column(
            children: [
              Icon(Icons.add,size: 40,),
              Text("data",style:  TextStyle(fontSize: 12),)
            ],
          ),
          )));
    }

Upvotes: 0

Related Questions