Best Of

A Domo "brick" is basically an html page with JavaScript. You can test it outside of Domo if you are familiar with basic html and JavaScript.

It appears the root issue may be that Mapbox is trying to load a stylesheet (css) that violates Domo Bricks Content Security Policy.

I believe Domo bricks run in an iframe. With restrictions for security. And hosted styles like mapbox://style…etc is loaded CSS from an external source. It seems to be blocking that stylesheet. Hence, no background is showing because the base map is a style or overlay.

You could try the https version:

https://api.mapbox.com/styles/v1/mapbox/streets-v11?access_token=YOUR_TOKEN

style: 'https://api.mapbox.com/styles/v1/mapbox/streets-v11?access_token=YOUR_MAPBOX_ACCESS_TOKEN'

If you use custom styles or are coding inline styles with <style> tags, it might be flagging that as well. Stick to external styles. Make sure the map container is getting full height and width with css. But I doubt it since you are getting the donuts.

#map {

  width: 100%;

  height: 100%;

}

For me….I would go outside Domo and save the code and run it. It's simply an html and Javascript. Throw it into a folder an toss the html up into Chrome's tab area to run it locally. If it runs, then security would seem to be the problem.