Flutter : Integration Flutter_map

Viewed 698

I have following this Tutorial to implement flutter_map and try it with example source code in Flutter_map documentation. I already create Styles and Tilesets

1 2

When i running the app , i get this error :

Exception caught by image resource service
The following _Exception was thrown resolving an image codec:
Exception: Could not instantiate image codec.

When the exception was thrown, this was the stack
#0      _futurize  (dart:ui/painting.dart:4428:5)
#1      instantiateImageCodec  (dart:ui/painting.dart:1726:10)
#2      PaintingBinding.instantiateImageCodec 
package:flutter/…/painting/binding.dart:88
#3      CachedNetworkImageProvider._loadAsync 
package:cached_network_image/…/image_provider/_image_provider_io.dart:86
<asynchronous suspension>
...
Image provider: CachedNetworkImageProvider("https://api.mapbox.com/styles/v1/zeffry/ckbf1o8vc2f281ilfl46z986n.html?fresh=true&title=copy&access_token=pk.eyJ1IjoiemVmZnJ5IiwiYSI6ImNrYmV6dnAxMTA3OWgyeGtjMDIybzhrajEifQ.6L2dh0WUdlqCXomQ91WspQ", scale: 1.0) 
 Image key: CachedNetworkImageProvider("https://api.mapbox.com/styles/v1/zeffry/ckbf1o8vc2f281ilfl46z986n.html?fresh=true&title=copy&access_token=pk.eyJ1IjoiemVmZnJ5IiwiYSI6ImNrYmV6dnAxMTA3OWgyeGtjMDIybzhrajEifQ.6L2dh0WUdlqCXomQ91WspQ", scale: 1.0): CachedNetworkImageProvider("https://api.mapbox.com/styles/v1/zeffry/ckbf1o8vc2f281ilfl46z986n.html?fresh=true&title=copy&access_token=pk.eyJ1IjoiemVmZnJ5IiwiYSI6ImNrYmV6dnAxMTA3OWgyeGtjMDIybzhrajEifQ.6L2dh0WUdlqCXomQ91WspQ", scale: 1.0)

I missed something ?

Reproduce Code

class WelcomeScreen extends StatelessWidget {
  static const routeNamed = "/welcome-screen";
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Stack(
        fit: StackFit.expand,
        children: [
          FlutterMap(
            options: MapOptions(
              center: LatLng(51.5, -0.09),
              zoom: 13.0,
            ),
            layers: [
              TileLayerOptions(
                urlTemplate:
                    "https://api.mapbox.com/styles/v1/zeffry/ckbf1o8vc2f281ilfl46z986n.html?fresh=true&title=copy&access_token=pk.eyJ1IjoiemVmZnJ5IiwiYSI6ImNrYmV6dnAxMTA3OWgyeGtjMDIybzhrajEifQ.6L2dh0WUdlqCXomQ91WspQ",
                additionalOptions: {
                  'accessToken':
                      'pk.eyJ1IjoiemVmZnJ5IiwiYSI6ImNrYmV6dnAxMTA3OWgyeGtjMDIybzhrajEifQ.6L2dh0WUdlqCXomQ91WspQ',
                  'id': 'mapbox.mapbox-streets-v8'
                },
              ),
              MarkerLayerOptions(
                markers: [
                  Marker(
                    width: 80.0,
                    height: 80.0,
                    point: LatLng(51.5, -0.09),
                    builder: (ctx) => Container(
                      child: FlutterLogo(),
                    ),
                  ),
                ],
              ),
            ],
          ),
        ],
      ),
    );
  }
}

Flutter_map version : ^0.8.2

1 Answers

I think you need to be sure to select CARTO as the type under the Third Party option. This generates a other URL which is the correct one to use.

  1. Go to Share
  2. Check under Third Party

Check this:

See the image

Related