Load GeoJson Map to capabilities.json

It isn't possible for custom visuals unfortunately.

There're a few options:

• Load it from an external resource that uses HTTPS
• Keep maps in Power BI data-set and then apply data to the visual. The data would be avialable in the update method
• You can use JS File API to load from local device/PC
• Keep it in an external JS and include into pbiviz.json

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]

v-viig 

Anonymous 

How would would you set a html input element on the text property element?

       switch( geoJsonFile ) {
            case 'geoJsonMapFile':
                objectEnumeration.push({
                    objectName: geoJsonFile,
                    properties: { 
                        geojsonMap: 'how to you put <input id="fileInput" type="file"/> here'
                    },
                    selector: null
                });
                break;
        };

Anonymous,

That's impossible right now. Power BI Custom Visuals API doesn't implement an ability to support loading file using formatting panel.

As a workaround, you should implement your own JavaScript code that handles loading files.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]

v-viig thank you for your answer

so what are the alternatives shall I load my map from external ressource with https ? is there any alternative ? Can I load the map from the field pane ? There is already a visual (Shape map) that uses loading through Format Pane. isn't it possible for everybody ? Can't I simply include my map as a js code inside the dependance node_modules and include it in pbiviz.json ?

v-viig

You can use JS File API to load from local device/PC

    This option, how does it work ?
Keep it in an external JS and include into pbiviz.json

    Exactly I was thinking of this one, I tried it but it doesnt work. I stored the map data as a variable in a file map.js. I referenced it in pbiviz.json. And I use the variable in Main.ts file. But It couldn't find the variable.

Please take a look at FileReader to find out more about File API.

How did you try to access the variable? What errors did you get?

I suppose that you should use window["variableName"] to find it. Another option is to declare the varaible in TypeScript in order to get rid of type checking errors.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]

v-viig I tried to access the variable directly but it couldn't find it, I referenced it in pbiviz.json .

I have another problem with the organization of my code. I only instanciated the map in the constructor, and handled everything else in the update method. How should I organize my code is it kind of MVC ? 

Are you able to share the code that tries to access a varaible?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]

v-viig I'm wondering how I can store a geojson file as Power Bi dataset and call it in Data view. Do you have any example doing same thing ? What I did I stored the geojson data set as a string in a table. and then I make an outer join with the dataset containing data. so that each time I get the geojson and dataset.

If you want to store geojson as a PBI dataset you should store geojson as a string in your table.

Another option is to implement improting geojson by using File JS API and store it as a property of formating panel.

Please let me know if you have any questions.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]

v-viig thank you for the answer. Do you have any example on how to use file JS api and store it as a property in the formating pane ? 

I have one more question: If I want to load it as external JS how should it be ? this is what I did : 

In maps.js :

function maps (){
 this.italy ={content};
 this.usa = {content}; 
}

then I go to my main and I call: 

var data = new maps();
var italyMap = data.italy;
var usaMap = data.usa;

But this doesn't work since I need the function signatures. How can I write them ?

Thank you again,

v-viig Thank you for the answer,

I don't see how I can bind the FileReader to a text element ?

is it through that persistProperties ?

You should use an <input id="fileInput" type"file"/> element and register a handler for "change" event:

const fileInput = document.getElementById('fileInput');

fileInput.addEventListener('change', function (e) {
    var file = fileInput.files[0];

    var reader = new FileReader();

    reader.onload = function (e) {
        console.log("File content: ", reader.result);
    }

    reader.readAsText(file);
});

You should call persistProperties once file is read at reader.onload.

Please let me know if you have any questions.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

[email protected]