Create Your Own Custom Map for Power BI.

[Anonymous]

I try to create own custom visual with bing maps. I added script "https://www.bing.com/api/maps/mapcontrol?callback=InitMap"

and div with Id:

this.divMap = d3.select(options.element)

.append('div')

.classed('map', true)

.attr({ id: "map_id"});

But when I want to create a global function InitMap. Power Bi doesn't see it. 

I did: 

declare function InitMap():void;

And in Visual constructor:

(window as any).InitMap= this.InitMap;

This code doesn't want to work.

When  I create a new script with the text of function, it's work:

let scriptMapBody = document.createElement('script');

 scriptMapBody.type = "text/javascript"

 scriptMapBody.text = " function InitMap() \

{ 

 var map = new Microsoft.Maps.Map(document.getElementById('map_id'),{ \

 credentials: ''});\

}"

Is there any way to create this function in ts code?

[v-viig]

Our suggestion is to check window.InitMap and window.window.InitMap.

What Custom Visuals API version are you using?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]

[Anonymous]

window.InitMap and window.window.InitMap don't help.

[v-viig]

What API version are you using?

Power BI creates a copy of window for isolating Power BI JS from Custom Visual JS. It might be a root cause of this issue.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]

[Anonymous]

I use  API v2.3.0

[v-viig · Accepted solution]

Please try using API 1.13.0 if it works there.

PBI isolation might break some libraries that work by injecting JS from remote hosts.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]

[Anonymous]

Thanks. It's helps