Always got HttpException 400

[readyiman]

Osm url https://tile.openstreetmap.org/{z}/{x}/{y}.png returns error like HttpException: Invalid statusCode: 400, uri = https://tile.openstreetmap.org/%7Bz%7D/%7Bx%7D/%7By%7D.png. Same result with mapbox.

[xclud]

Can you share the code for the whole function? The one that generates the address.

[readyiman]

 late final _controller = MapController(
    location: LatLng(
      Angle.degree(initialCameraPosition.target.latitude),
      Angle.degree(initialCameraPosition.target.longitude),
    ),
  );
  late final _tilesUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    return MapLayout(
      controller: _controller,
      builder: (context, transformer) {
        return TileLayer(
          builder: (context, x, y, z) {
            final tilesInZoom = pow(2.0, z).floor();

            while (x < 0) {
              x += tilesInZoom;
            }
            while (y < 0) {
              y += tilesInZoom;
            }

            x %= tilesInZoom;
            y %= tilesInZoom;

            return CachedNetworkImage(
              imageUrl: _tilesUrl,
              httpHeaders: {'User-Agent': packageInfo.packageName},
              fit: BoxFit.cover,
            );
          },
        );
      },
    );
  }

[xclud]

Can you try another title provider? Did you check the tile addresses in your browser?

[readyiman]

I use exactly same url on flutter map, it works.

[xclud]

Can you ditch httpHeaders and try again?

This is a problem with your configuration or a problem with CachedNetworkImage. Map does not download any thing from any url.

[xclud]

Ah the problem is with your url.

late final _tilesUrl = 'https://tile.openstreetmap.org/{z}/{x}/{y}.png';

The url can't be a fixed string. It needs to be interpolated with z, x and y. Do not forget the $ sign before z, x and y. $z, $x and $y are correct.