MapBox - No Background

Data_Devon

I'm in well over my head but here goes nothing…

In my first attempt at using Bricks, I downloaded the MapBox Donut Cluster Bricks. I got it connected to my MapBox account and have a dataset with quantities for each Lat/Long value. However, there is no "backdrop" for the chart:

It's working in that the donuts each have values, but the background isn't populating the map so its kinda pointless…

As I said, I'm in way over my head but I suspect it's a code issue with the default Brick App:

Anyone??

ellibot

@Data_Devon maybe try one of these styles and see if it renders

Data_Devon

Nothing. Still getting a blank canvas with the donuts overlaid.

Data_Devon

Nothing. Still getting a blank canvas with the donuts overlaid.

ArborRose

The map background may not appear if the map is not centered or zoomed into a relevant location. Try adjusting the zoom level and center of the map to ensure you're viewing the correct area.

var mapCenter = [longitude, latitude];
var zoomLevel = 10;

You can debug with console. If you add console commands, then right click on the page and go to inspect > console. Clear the console, then run code, look for errors or your debug statements.

var mapStyle = 'mapbox://styles/mapbox/streets-v11'; 

var mapCenter = [-74.5, 40]; // Change to your dataset's center point

var zoomLevel = 10; // Adjust based on your data

var accessToken = 'your_mapbox_access_token'; 


mapboxgl.accessToken = accessToken;


var map = new mapboxgl.Map({

  container: 'map', 

  style: mapStyle, 

  center: mapCenter,

  zoom: zoomLevel

});

Data_Devon

@ArborRose - I was able to interact with the map and zoom in and out. The data/donuts would update in real time - I.e. I'd "drill in" to smaller sizes and the donuts would split up.

So it seems as though everything is working except the canvas on which the data is being printed on.

Inspecting the console - what should I hope to find?

Thanks for your input.

Data_Devon

Looks like it might be a network security issue? @ArborRose

ArborRose

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.