Skip to main content
cancel
Showing results for 
Search instead for 
Did you mean: 

Earn the coveted Fabric Analytics Engineer certification. 100% off your exam for a limited time only!

Reply
Anonymous
Not applicable

Load GeoJson Map to capabilities.json

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,

1 ACCEPTED SOLUTION
v-viig
Community Champion
Community Champion

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

View solution in original post

24 REPLIES 24
v-chuncz-msft
Community Support
Community Support

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

Community Support Team _ Sam Zha
If this post helps, then please consider Accept it as the solution to help the other members find it more quickly.
Anonymous
Not applicable

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
Community Champion
Community Champion

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
Not applicable

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
Community Champion
Community Champion

@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
Not applicable

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
Community Champion
Community Champion

@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
Not applicable

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
Community Champion
Community Champion

@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
Not applicable

@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
Community Champion
Community Champion

@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
Not applicable

@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
Community Champion
Community Champion

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
Not applicable

@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
Community Champion
Community Champion

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
Not applicable

@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
Community Champion
Community Champion

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
                }
            }
        }
    }
}
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
Not applicable

@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
Community Champion
Community Champion

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
Frequent Visitor

@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

Helpful resources

Announcements
April AMA free

Microsoft Fabric AMA Livestream

Join us Tuesday, April 09, 9:00 – 10:00 AM PST for a live, expert-led Q&A session on all things Microsoft Fabric!

March Fabric Community Update

Fabric Community Update - March 2024

Find out what's new and trending in the Fabric Community.