How to filter symbols with .addSymbol mabox_gl flutter

Question

I have a bit of an issue. I am adding symbols to my map using the .addSymbol function

    Future<Symbol> addSymbol(SymbolOptions options, [Map<dynamic, dynamic>? data])

And when doing so the name of layer that's get added seems to be generated. The layer name can look like this:

    4jmVTazvBD_0

And if I then do

mapController.setFilter("4jmVTazvBD_0",true) // or false

Then it filter it. But since the layerId changes every time the app starts and adds the symbols its not possible.

When I add my symbols I first get them from backend and then I loop through every item in the response from backend and add them like this:

    mapController.addSymbol(
        SymbolOptions(
            draggable: true,
            iconImage: item?.properties?.image,
            geometry:
                LatLng(item!.location!.latitude!, item.location!.longitude!),
            iconSize: 1),
        {
          "type": item.properties?.type,
          "annotation": item,
          "id": item.id,
          "lat": item.location?.latitude,
          "lng": item.location?.longitude
        },
    );

Do some someone know how to filter them, just want to be able to toggle them visible or not.

My first approach*

I have tested to add a symbollayer and then add the object with points but nothing shows up.

I have tried the following with adding a symbolLayer: I have a list with maps that I save that looks like this:

    List<Map<String, dynamic>> features = [];
    Map<String, dynamic> _symbols = {};

First I setup some thing in the onStyleLoadedCallbak like this:

void _onStyleLoadedCallback() async { await mapController.addGeoJsonSource("points", _symbols);

await mapController.addSymbolLayer(
  "points",
  "symbols",
  SymbolLayerProperties(
    iconImage: "{type}",
    iconSize: 2,
    iconAllowOverlap: true,
  ),
);
}

addSymbolsToList(Annotations? item) {
if (features.any((element) => element["id"] == item?.id)) {
} else {
  features.add(
    {
      "type": "Feature",
      "id": item?.id,
      "properties": {
        "type": "pin_offline",
      },
      "geometry": {
        "type": "Point",
        "coordinates": [item?.location?.longitude, item?.location?.latitude]
      }
    },
  );
}

}

But the code I tested when creating a symbolLayer don't add my symbols.

How to filter symbols with .addSymbol mabox_gl flutter

0 Answers0