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

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]

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 ?

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