CODEWITHSUNDEEP
fluttermapboxflutter-webmapbox-android
Ramesh Dalvi
Ramesh Dalvi

Reputation: 51

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

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.

Upvotes: 4

Views: 5316

Answers (2)

Amir Khaledian
Amir Khaledian

Reputation: 113

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

Upvotes: 0

carlos dugeass
carlos dugeass

Reputation: 31

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'
                  }),

Upvotes: 3

Related Questions