fluttermapbox

Flutter | how to add custom Icons in Mapbox's markers/symbol


I was wondering how one could use his own icons in a Flutter-Mapbox plugins' marker?

There's no default marker icon (no provided icon - no marker), and there's not enough documentation on how to use a custom image.

adding a symbol (marker) is as follows:

mapController.addSymbol(
      SymbolOptions(
           geometry:LatLng(0.0, 0.0), // location is 0.0 on purpose for this example
           iconImage: "pin"
         )
      );

whereas the IconImage, a String, is the field which should contain the data about the icon (obviously), but the given example repository doesn't clarify the needed parameters (url, path etc.).

Providing a path to the assets doesn't work (unlike other widgets). In the example, they provide the IconImage field the value airport-15, and when running the app, it actually works, but I can't seem to find the resources' location (it's not in @drawables or my assets folder, or any other place in the project)


Solution

  • You have to create a custom style on using MapBox Studio.

    1. Create a new dataset if not already exist
    2. Create tileset
    3. Create new style & select customize basic template
    4. Create new layer, give it a name for example my_sym and add newly created datasource
    5. Then click on type & change it to symbol
    6. Now click on my_sym two times. (first one will close the option menu & second one will open a new menu with symbol properties
    7. Click on icon tab & select new icon. You can also upload your own svg icon.
    8. Click on publish
    9. Click on share it will show you the urls.
    10. Copy the type of url & set styleString property.

    For more info follow steps here https://docs.mapbox.com/help/tutorials/add-points-pt-1/

    API reference: https://docs.mapbox.com/mapbox-gl-js/api/