Create custom visual using mapbox-gl

[jii2021]

Hi,

Has anyone experienced including mapbox-gl on a custom visual and using Satellite View? The satellite imagery is not loading.

I created my custom visual using mapbox-gl. I installed mapbox-gl from npm.

At first, I was getting a transpiling issue. I added "!" to exclude it from transpiling (according to mapbox troubleshooting). Then It worked ok. Although, I'm getting the "Failed to read the 'caches' property from Window: Cache storage is disabled because the context is sandbox and lacks the 'allow-same-origin' flag". I just ignored the error because the map was loading fine.

But when I tried to use satellite view, I'm only getting a black, without the satellite imagery. Is it because of the 'allow-same-origin flag' error? I've also wrote a support ticket with mapbox and hoping they will reply.

Thank you very much!

[dm-p]

Hi @jii2021,

If mapbox-gl requires the allow-same-origin-flag, then unfortunately this is not possible from within a custom visual. and is highly likely why you're just seeing the black display. All custom visuals are executed within a sandboxed iframe and this flag is set by MS to prevent scripts from accessing the main window.  I have a page for one of my visuals that explains in a bit more detail, which may help clarify the limitation further. Unless Mapbox have a suitable workaround from their end to avoid the CORS restrictions imposed by Power BI, then this is not solvable via custom visuals.

Regards,

Daniel

[NUCRjs2]

I can see videos online of Mapbox Satellite base map being used in Power BI.  I am assuming there must be some other setting that is being missed.  Any insight into how to troubleshoot that would throw that error?

[jii2021]

Hi @dm-p ,

Thank you for the clarification and nice documentation about the limitations.