Adding points from array to flutter_maps

Question

I am trying to add an array of locations to my map in Flutter. I am using the package flutter_maps which is from TomTom. However, I am encountering some problems in the process. The error comes in my loop "for (var mark in markers)". I am getting this error in my list "markers": The type 'Future<QueryBuilder>' used in the 'for' loop must implement Iterable.

Then, in Marker widget: The element type 'Set' can't be assigned to the list type 'Marker'.

It should be really simple to just loop the array and add every point , right? It seems is not the case. Can you give some guidance to set up properly this process?

import "package:flutter/material.dart";
import "package:flutter_map/flutter_map.dart";
import "package:http/http.dart" as http;
import "dart:convert" as convert;
import 'package:latlong2/latlong.dart';
import 'package:parse_server_sdk_flutter/parse_server_sdk.dart';

List<ParseObject> listaLocs = [];

class TomTomMap extends StatefulWidget {
  var lat;
  var long;

  TomTomMap({Key? key, required this.lat, required this.long})
      : super(key: key);

  @override
  State<TomTomMap> createState() => _TomTomMapState();
}

class _TomTomMapState extends State<TomTomMap> {
  MapController mapController = MapController();
  late Future<QueryBuilder<ParseObject>> markers;
  // ADD THIS

  @override
  void initState() {
    super.initState();
    startAsyncInit();
  }

  Future startAsyncInit() async {
    setState(() {
      markers = getAllDogsLocation();
      ;
    });
  }

  final String TOMTOM_APIKEY = "apikey";

  @override
  Widget build(BuildContext context) {
    //Future<QueryBuilder<ParseObject>> DogsLocation = getAllDogsLocation();
    final LatLng tomtomCenter = LatLng(widget.lat, widget.long);
    return MaterialApp(
      title: "TomTom Map",
      home: Scaffold(
        appBar: AppBar(title: Text('Dogs map')),
        body: Center(
            child: Stack(
          children: <Widget>[
            FlutterMap(
              options: MapOptions(center: tomtomCenter, zoom: 1.0),
              layers: [
                TileLayerOptions(
                  minNativeZoom: 1.0,
                  urlTemplate: "https://api.tomtom.com/map/1/tile/basic/main/"
                      "{z}/{x}/{y}.png?key={apiKey}",
                  attributionBuilder: (_) {
                    return Text("© OpenStreetMap contributors");
                  },
                  additionalOptions: {"apiKey": TOMTOM_APIKEY},
                ),
                MarkerLayerOptions(
                  markers: [
                    for (var mark in markers)
                      {
                        Marker(
                          width: 80.0,
                          height: 80.0,
                          point: mark,
                          builder: (ctx) => Container(
                            child: Icon(Icons.local_activity_rounded),
                          ),
                        ),
                      }
                  ],
                ),
              ],
            )
          ],
        )),
      ),
    );
  }
}

Future<QueryBuilder<ParseObject>> getAllDogsLocation() async {
  await Future.delayed(const Duration(seconds: 2), () {});
  QueryBuilder<ParseObject> queryTodo =
      QueryBuilder<ParseObject>(ParseObject('Todo'));
  queryTodo.includeObject(['latitude']);
  final ParseResponse apiResponse = await queryTodo.query();

  if (apiResponse.success && apiResponse.results != null) {
    // for (var point in apiResponse.results as List<ParseObject>) {
    //   listaLocs.add(point);
    // }
    return queryTodo;
  } else {
    throw Exception('Failed to load data');
  }
}

Answer 1

Here's the simple demo project on Flutter Maps With Multiple Markers

import 'package:flutter/material.dart';
import 'package:flutter_map/flutter_map.dart';
import 'package:flutter_map/plugin_api.dart';
import 'package:latlong2/latlong.dart'; // Only

class MapFlutter extends StatefulWidget {
  const MapFlutter({super.key});

  @override
  State<MapFlutter> createState() => _MapFlutterState();
}

class _MapFlutterState extends State<MapFlutter> {
  // var markers = <Marker>[];

  var marker = <Marker>[
    Marker(
      point: LatLng(21.2350089, 72.858609),
      builder: (context) {
        return getMarker();
      },
    ),
    Marker(
      point: LatLng(21.2357639, 72.8567261),
      builder: (context) {
        return getMarker();
      },
    ),
    Marker(
      point: LatLng(21.2357639, 72.8567261),
      builder: (context) {
        return getMarker();
      },
    ),
    Marker(
      point: LatLng(21.2350089, 72.858609),
      builder: (context) {
        return getMarker();
      },
    ),
  ];
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('Flutter Map'),
      ),
      body: FlutterMap(
        // mapController: ,
        mapController: MapController(),

        options: MapOptions(
          zoom: 13,
          center: LatLng(21.235293892731804, 72.85903282651766),
        ),
        children: [
          PolygonLayer(
            polygonCulling: true,
            polygons: [
              Polygon(
                points: [LatLng(21.235293892731804, 72.85903282651766), LatLng(21.235293892731804, 72.85903282651766)],
                color: Colors.blue,
              ),
              Polygon(
                points: [LatLng(21.235293892731804, 72.85903282651766), LatLng(21.235293892731804, 72.85903282651766)],
                color: Colors.blue,
              ),
              Polygon(
                points: [LatLng(21.235293892731804, 72.85903282651766), LatLng(21.235293892731804, 72.85903282651766)],
                color: Colors.blue,
              ),
              Polygon(
                points: [LatLng(21.235293892731804, 72.85903282651766), LatLng(21.235293892731804, 72.85903282651766)],
                color: Colors.blue,
              ),
            ],
          ),
          TileLayer(
            urlTemplate: "https://tile.openstreetmap.org/{z}/{x}/{y}.png",
            userAgentPackageName: 'dev.fleaflet.flutter_map.example',
          ),
          MarkerLayer(
            markers: marker,
          ),
        ],
      ),
    );
  }
}

getMarker() {
  return ClipRRect(
    borderRadius: BorderRadius.circular(100),
    child: Image.network(
      'https://cdn-icons-png.flaticon.com/512/1946/1946770.png',
      // Icons.pin_drop_outlined,
      height: 30,
      fit: BoxFit.cover, // color: Colors.red,
    ),
  );
}

Add Flutter Packages