Load GeoJson Map to capabilities.json

[Anonymous]

Hello,

I'm currently developing a custom visual, so I'm looking to load a geojson map through capabilities.json. My question is: how can I achieve that ? Shall I just consider the map as measure ?

Thank you,

[v-chuncz-msft]

@Anonymous,

You may do research into objects in API https://github.com/Microsoft/PowerBI-visuals-tools/blob/master/templates/visuals/.api/v1.6.0/schema.capabilities.json. Also check if a Shape Map visual could be an alternative.

[Anonymous]

Shape file could be an alternative but is its source code available for developement ? In Fact I'm looking to load a geojson map and display it using d3 Library .. But I don't know how to load the json file.

[v-viig]

Hello @Anonymous

Do you want to load json file from local computer or do you want to save it using Power BI Data sets?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Anonymous]

Either way, for now, I just want to display a custom map. So it can either be load from a local file, or through a drap and drop via Power BI.

Thank you for your help 🙂

[v-viig]

@Anonymous,

You might load local file using FileReader.

Please feel free to ask us any questions about custom visual development.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Anonymous]

Thank you for you response. I'm talking about loading a file within a custom visual and not a web page. Apparently, I should use an object within capabilities but I don't know which one.

[v-viig]

@Anonymous,

I'm not sure that understand your case well.

Do you want to upload and save a file in Power BI? Is that correct?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Anonymous]

I'm developing a custom visual that is displaying a shape map.

I want to know how I can upload the .geojson map into my custom visual.

In other words, how I can upload a file into my custom visual. I know that I can achieve that through defining an object in capabilities.json file. but I don't know how.

[v-viig]

@Anonymous

Just to make sure that my understaning is correct.

You want to have an ability to load a file by using the format panel. Is that correct?

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Anonymous]

@v-viig exactly, I want to load a geojson or json file through the format panel, to define the polygons of my map.

[v-viig]

@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

pbicvsupport@microsoft.com

[Anonymous]

@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]

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

pbicvsupport@microsoft.com

[Anonymous]

@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.

[v-viig]

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

pbicvsupport@microsoft.com

[Anonymous]

@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 · Accepted solution]

Regarding the first question you should follow these steps:

• Take a look at this topic to find out more about JS File API
• Define a text property at capabilities.json

"objects": {
    "internalState": {
        "displayName": "Internal State",
        "properties": {
            "geojsonMap": {
                "displayName": "geojsonMap",
                "type": {
                    "text": true
                }
            }
        }
    }
}

• Call persistProperties method of host

function save(host: IVisualHost, value: string) {
    host.persistProperties(<VisualObjectInstancesToPersist>{
        merge: [{
            objectName: "internalState",
            selector: null,
            properties: {
                geojsonMap: value || ""
            }
        }]
    });
}

Regarding the second question.

You should prepare type definitions for you function. Another way is to use TS file instead of JS.

Ignat Vilesov,

Software Engineer

Microsoft Power BI Custom Visuals

pbicvsupport@microsoft.com

[Anonymous]

@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 ?

[v-viig]

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

pbicvsupport@microsoft.com

[mroot]

@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;
        };

Thanks!

Matt