Forum Discussion

Anonymous's avatar
Anonymous
Not applicable
9 years ago
Solved

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 ...
Show and Tell
  • v-viig's avatar
    v-viig
    8 years ago

    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

    [email protected]

v-viig's avatar
v-viig
Community Champion
8 years ago

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]

Anonymous's avatar
Anonymous
Not applicable
8 years ago

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's avatar
    v-viig
    Community Champion
    8 years ago

    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

    [email protected]

  • mroot's avatar
    mroot
    Frequent Visitor
    7 years ago

    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
  • Anonymous's avatar
    Anonymous
    Not applicable
    8 years ago

    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's avatar
    v-viig
    Community Champion
    8 years ago

    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]