I'm developing a Flutter app using flutter_map and have been using Mapbox for my map tiles.
Public Mapbox styles (such as mapbox/streets-v11) work perfectly in my app. However, I'm facing an issue with my custom style.
The situation is as follows:
Public styles work: Using a tile URL like:
/{z}/{x}/{y}?access_token=MY_TOKEN
my Flutter app displays a fully interactive map without any issues.
- Custom style details:
I created a custom style in Mapbox Studio and published it.
I used the Share → Third Parties → CARTO option to obtain a tile URL. The URL I received is: /{z}/{x}/{y}@2x?access_token=MY_TOKEN
When I test this URL in a browser (after replacing {z}, {x}, and {y} with concrete numbers), the returned image is just a blank/gray tile.
The HTML preview of my custom style (e.g.,.html?title=view&access_token=MY_TOKEN&zoomwheel=true&fresh=true#12.78/-15.83715/-48.0092)works fine and shows the map as expected.
- What I've tried:
- Verified that my access token is correct and has the necessary permissions.
- Experimented with removing the @2x suffix.
- Tried changing the tile size (switching from 256 to 512).
- Confirmed that the style is published and set to public in Mapbox Studio.
- Reviewed the style layers to ensure there’s a background layer and visible layers at the tested zoom levels.
My question is: Why does my custom Mapbox style render correctly in the HTML preview but return blank/gray tiles when accessed via the raster tile endpoint? Do I need to configure something differently in Mapbox Studio or my account for the custom style to work as tiles?
mapbox/streets-v11: (@2x?access_token=MY_TOKEN)
danielwagnerr/cm6r7o7zi010u01ry7cko0jcl: (@2x?access_token=MY_TOKEN)