How to import a map style template from mapbox to flutter using flutter_map?

Question

I'm trying to add a map in my flutter app through flutter_map package. I tried to import this mapbox style : https://api.mapbox.com/styles/v1/tomjohn/cj5yp5pln0cqb2ruhy6w99j91.html?title=true&access_token=pk.eyJ1IjoidG9tam9obiIsImEiOiJxQ2RydWRNIn0.mYKLvmkrBlBKiQZdhNa31A#10.39/55.8548/-4.1836

by doing this :

FlutterMap(
              options: new MapOptions(
                center: new LatLng(51.5, -0.09),
                zoom: 13.0,
              ),
              layers: [
                new TileLayerOptions(
                  urlTemplate: "https://api.tiles.mapbox.com/v4/"
                      "{id}/{z}/{x}/{y}@2x.png?access_token={accessToken}",
                ),
                new MarkerLayerOptions(
                  markers: [
                    new Marker(
                      width: 80.0,
                      height: 80.0,
                      point: new LatLng(51.5, -0.09),
                      builder: (ctx) =>
                      new Container(
                        child: new FlutterLogo(),
                      ),
                    ),
                  ],
                ),
              ],
            ),

But it is throwing this exception :

Exception: Could not instantiate image codec.

The code that you have provided does not load the style you have mentioned. What would you like to achieve? Load a mapbox map with the style you mentioned, or add another TileLayer? — Moritz, May 18 '20 at 08:07

score 3 · Answer 1 · edited Jul 03 '20 at 02:23

To import mapbox tile:

In your mapbox style sharing option (under developer resources), choose "Third party" and select "CARTO" in dropdown button. Then you can copy the link and paste it as urlTemplate.

After that, add this:

TileLayerOptions(
                  urlTemplate:<PASTE_URL_HERE>,
                  additionalOptions: {
                    'accessToken': <YOUR_ACCESS_TOKEN>,
                    'id': 'mapbox.mapbox-streets-v8'
                  }),

score 0 · Answer 2 · answered Jan 18 '21 at 09:21

MapboxMap(
     styleString: "*****",
     myLocationEnabled: true,
     rotateGesturesEnabled: false,
     scrollGesturesEnabled: false,
     tiltGesturesEnabled: false,
     onMapCreated: (MapboxMapController controller){
        _controller = controller;
     },
     initialCameraPosition: CameraPosition(
       target: LatLng(***,***), zoom: 15),
     ),

How to import a map style template from mapbox to flutter using flutter_map?

2 Answers2