flutter-mapbox-gl / maps

A Mapbox GL flutter package for creating custom maps
Other
1.03k stars 498 forks source link

The problem of prioritizing layers #1377

Closed mraslamiii closed 10 months ago

mraslamiii commented 10 months ago

I passed an geo json layer to the map

In the next step, I added an fill layer to the map like this:

           _mapboxMapController.addFillLayer(
               'indoor-building-source',

               feature['id'].toString(),
               FillLayerProperties.fromJson(properties));

Now I want to show some circles on these layers, but when I make the circles with this code:

          _mapboxMapController.addSymbol(
             SymbolOptions(
               iconImage: 'assets/pin.png', // Customize the icon image
               iconSize: 1.0, // Customize the icon size
               geometry: latLng, // Set the circle's coordinates
               textField: 'Your Circle Label', // Set the label for the circle
               textOffset: Offset(0, -30), // Adjust the label offset if needed
             ),
           );

The circles are placed under the layers!

How can I create circles on the top of geojson layer?

In addition

Using addSymbolLayer is not useful for me because I can't tell it to create a circle at a specific point

felix-ht commented 10 months ago

add the Fill layers as you did - after that create your own SymbolManager. This will cause it to draw over the fill layer.

    final manager = SymbolManager(controller);
    manager.add(Symbol(
        "someId",
        SymbolOptions(
          iconImage: 'assets/pin.png', // Customize the icon image
          iconSize: 1.0, // Customize the icon size
          geometry: latLng, // Set the circle's coordinates
          textField: 'Your Circle Label', // Set the label for the circle
          textOffset: Offset(0, -30), // Adjust the label offset if needed
        )));

Note that each symbol hast to have a unqiue id - (commonly an id you already use like an objectId from you DB)

mraslamiii commented 10 months ago

add the Fill layers as you did - after that create your own SymbolManager. This will cause it to draw over the fill layer.

    final manager = SymbolManager(controller);
    manager.add(Symbol(
        "someId",
        SymbolOptions(
          iconImage: 'assets/pin.png', // Customize the icon image
          iconSize: 1.0, // Customize the icon size
          geometry: latLng, // Set the circle's coordinates
          textField: 'Your Circle Label', // Set the label for the circle
          textOffset: Offset(0, -30), // Adjust the label offset if needed
        )));

Note that each symbol hast to have a unqiue id - (commonly an id you already use like an objectId from you DB)

thanks ! that's work !

mraslamiii commented 10 months ago

add the Fill layers as you did - after that create your own SymbolManager. This will cause it to draw over the fill layer.

    final manager = SymbolManager(controller);
    manager.add(Symbol(
        "someId",
        SymbolOptions(
          iconImage: 'assets/pin.png', // Customize the icon image
          iconSize: 1.0, // Customize the icon size
          geometry: latLng, // Set the circle's coordinates
          textField: 'Your Circle Label', // Set the label for the circle
          textOffset: Offset(0, -30), // Adjust the label offset if needed
        )));

Note that each symbol hast to have a unqiue id - (commonly an id you already use like an objectId from you DB)

Sorry ! What can I do if I want to update the symbol with this symbol manager?