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

user_12103613 0
Viewed 2902

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.

mapbox-android mapbox flutter-web flutter
2 Answers

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'
                  }),
user_135021910 
MapboxMap(
     styleString: "*****",
     myLocationEnabled: true,
     rotateGesturesEnabled: false,
     scrollGesturesEnabled: false,
     tiltGesturesEnabled: false,
     onMapCreated: (MapboxMapController controller){
        _controller = controller;
     },
     initialCameraPosition: CameraPosition(
       target: LatLng(***,***), zoom: 15),
     ),
user_92890120
Related