Question 240177 in Flutter Question posted in
The official Flutter documentation can be found here.

How to add attribution to mapbox with fluttermap

i am using fluttermap with MapBox tiles. This is my map:

        FlutterMap(
          options: MapOptions(
            center:
                userLocation ?? bikePosition ?? LatLng(46.94809, 7.44744),
            zoom: 8.0,
            minZoom: 4.0,
            maxZoom: 18.0,
            interactiveFlags: InteractiveFlag.all & ~InteractiveFlag.rotate,
          ),
          nonRotatedChildren: [
            isSatellite
                ? TileLayer(
                    urlTemplate:
                        "https://api.mapbox.com/styles/v1/twinnerag/cllnbkuiw000c01pe82l86m0s/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoidHdpbm5lcmFnIiwiYSI6ImNsbG1ib3FmdDFoZWEzY3Q2ODRoamloN2UifQ.FVQHAk7oy1RCyvlDqeZW5A",
                  )
                : TileLayer(
                    urlTemplate:
                        "https://api.mapbox.com/styles/v1/twinnerag/cllnbhfsb000b01nz01rg3kby/tiles/256/{z}/{x}/{y}@2x?access_token=pk.eyJ1IjoidHdpbm5lcmFnIiwiYSI6ImNsbG1ib3FmdDFoZWEzY3Q2ODRoamloN2UifQ.FVQHAk7oy1RCyvlDqeZW5A"),
            MarkerLayer(
              markers: [
                if (bike != null)
                  if (bike.lastLat != null && bike.lastLong != null)
                    Marker(
                      width: 40.0,
                      height: 40.0,
                      point: bikePosition,
                      builder: (ctx) => Container(
                        alignment: Alignment.centerLeft,
                        width: 200,
                        padding: const EdgeInsets.only(left: 4.5),
                        decoration: BoxDecoration(
                          color: Colors.white,
                          borderRadius: BorderRadius.circular(100),
                        ),
                        child: const Icon(
                          CustomIcons.bike_icon,
                          size: 18,
                          color: CustomColors.copper,
                        ),
                      ),
                    ),
                if (userLocation != null)
                  Marker(
                    width: 20.0,
                    height: 20.0,
                    point: userLocation!,
                    builder: (ctx) => Container(
                      width: 0.1,
                      decoration: BoxDecoration(
                        color: CustomColors.gray_secondary,
                        borderRadius: BorderRadius.circular(100),
                        border: Border.all(
                          color: CustomColors.copper,
                          width: 3,
                        ),
                      ),
                    ),
                  ),
              ],
            ),
          ],
        )

In the mapbox docs, it says that user have to pay attribution twice, with the Logo and the text. Is there a way to add it to my FlutterMap?

I think there may be a export function in studio.mapbox.com, that allows you to use the tile with all logos etc, but I haven’t found it yet. Does anybody know how I can add it?

Tags:

2

Answers


  1. 0

    to add a attribution, you need the attribution Layer:

    nonRotatedChildren: [
  SimpleAttributionWidget(
    source: Text('OpenStreetMap contributors'),
  ),
],

    here a link to attribution documentation of flutter map

    also the TileLayer should not be in the nonRotatedChildren

    Login or Signup to reply.
  2. 0

    The docs has information about attribution at https://docs.fleaflet.dev/layers/attribution-layer, and there is also information on Mapbox integration at https://docs.fleaflet.dev/tile-servers/using-mapbox.

    As said in that second link, in order to meet Mapbox’s fairly strict requirements, you should use RichAttributionWidget, not SimpleAttributionWidget. RAW allows the display of an icon/image permanently, and text once the user has opened the attribution box: AFAIK this meets Mapbox’s requirements. For more information about how to set this up (it’s quite simple), see https://docs.fleaflet.dev/layers/attribution-layer#richattributionwidget: you’ll want a TextSourceAttribution, as well as a LogoSourceAttribution.

    The provided RAW may not fit your app’s style/design, in which case, you can add any widget to the list of children, and to anchor it to a corner of the map, use Align (wrapped in a SizedBox.expand if necessary).

    (Additionally, as dstreissi said, you should not use nonRotatedChildren to prevent rotation of the map, instead use InteractiveFlags: https://docs.fleaflet.dev/usage/options#permanent-rules)

    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search