Hi Ralf,
Before diving into Mapbox-specific debugging, it’s worth confirming that the map works with the default
OpenStreetMap provider. If you see a grey map there too, the issue is unrelated to Mapbox (could be a JavaScript conflict, a caching plugin, or a theme issue).
Assuming the default provider works fine, a grey map with Mapbox usually comes down to one of three things:
- Style URL format
The plugin expects the Mapbox protocol URL, not the browser URL. In Mapbox Studio, click “Share” on your style and copy the Style URL. it should look like this:
mapbox://styles/your-username/your-style-id
If you copied the page URL from your browser (starting with https://), that won’t work.
- Access token
Make sure you’re using a public token (starts with pk.), not a secret one. You can find and create tokens at mapbox.com/account/access-tokens. The default public token on your account works fine for this.
- Selecting Mapbox as the provider in the block
The API key and style URL in the plugin settings are the global defaults, but each block still needs to have Mapbox explicitly selected as its provider. Open the block in the editor, go to the block settings in the sidebar, and make sure “MapBox” is selected as the map provider. If it’s still set to OpenStreetMap, it will ignore the Mapbox settings entirely. If none of the above helps, open your browser’s developer console (F12 → Network tab) and reload the page. Look for failing tile requests. The error message there will tell you exactly what’s wrong (invalid token, wrong URL format, billing issue, etc.), and that would be the thing to take to Mapbox support if needed.
Hope that helps!
Thanks a lot, Giorgios. I’ve done all of that and triple checked, on two sites, before I posted here. I also checked the dev tools and found no issue. Nothing in the console, and things loading from mapbox, probably tiles.
Today, trying again, I had a minor success. I found that now a street layer showed up, that I had added earlier. But not the basemap. I found that I had caching on that site, which caused additonal wierd effects. With cache off, artefacts disappeared, but layer settings on Mapbox still take a long time to update or don’t update at all, even using draft rather than production. And the basemap never shows.
For comparison, I pasted the iframe code onto the page, and that does look fine, just that the map has no marker.
Unfortunately, I cannot post images here. Trying a link: https://imgur.com/a/ujVa9Yg
I did look at the Mapbox documentation and searched on YouTube, but that seems all to be for specialized maps developer rather than to just add a simple street map to a website.
Sorry, I’m about to give up and maybe try again later.
Thanks for your support, though!
