Back

Explore Courses Blog Tutorials Interview Questions
0 votes
2 views
in BI by (17.6k points)

I am building a custom Power BI visualization, so I have access to a javascript file which is consumed by the platform. I don't have access to any markup, only an element that is injected where I am to mount my visualization.

I am trying to mount a Bing Map, the docs look like this:

<div id='myMap' style='width: 100vw; height: 100vh;'></div>

    <script type='text/javascript'>

            var map;

            function loadMapScenario() {

                map = new Microsoft.Maps.Map(document.getElementById('myMap'), {});

            }

    </script>

    <script type='text/javascript' src='https://www.bing.com/api/maps/mapcontrol?key=YourBingMapsKey&callback=loadMapScenario' async defer></script>

The URL to the script has a callback query string parameter that includes the name of the function to invoke.

Given I don't have access to the markup, I'm trying to do everything dynamically in my visualization's constructor. I create a function, move it to global scope, and then I add the query string var to reference it, but it never gets invoked. Can you see anything I might be missing?

Given I don't have access to the markup, I'm trying to do everything dynamically in my visualization's constructor. I create a function, move it to global scope, and then I add the querystring var to reference it, but it never gets invoked. Can you see anything I might be missing? 

constructor(options: VisualConstructorOptions) {

        this.host = options.host;

        this.elem = options.element;

        const self = this;

        function moveMethodsIntoGlobalScope(functionName){

            var parts = functionName.toString().split('\n');

            eval.call(window, parts.splice(1, parts.length - 2).join(''));  

        }

        function methodsToPutInGlobalScope(){

            function loadMapScenario(){

                console.log("finally called loadMapScenario");

            }

        }

        const script = document.createElement('script');

        script.type = 'text/javascript';

        script.async = true;

        console.log(loadMapScenario === undefined); // false, definitely in global scope

        script.src = 'https://www.bing.com/api/maps/mapcontrol?key=xxxxxxxxxx&callback=loadMapScenario';

        document.getElementsByTagName('head')[0].appendChild(script);

1 Answer

0 votes
by (47.2k points)

Here is the code which will help you

 

window.loadMapScenario = function() {

  console.log("finally called loadMapScenario");

}

 

const script = document.createElement('script');

script.type = 'text/javascript';

script.async = true;

script.src = `https://www.bing.com/api/maps/mapcontrol?key=${API_KEY}&callback=loadMapScenario`;

document.getElementsByTagName('head')[0].appendChild(script);

Related questions

Browse Categories

...