Binding an AnalyticMap Model with an OData service in UI5

Question

I'm new to the UI5 developping tool and I'm trying to bind a colorisation rules function with the regions that compose a map.

The colorization function named oColor() is located in the formatter.js (that I call through the controller).

The map is successfully drown in the view.js (NB : not .XML) using the sap.ui.vbm.AnalyticMap() function and a country.json file of the concerned era.

The OData is set in the init section of the component.js with the following function:

var oModelInputless = new sap.ui.model.odata.v2.ODataModel({
                serviceUrl: "http://server:port/path/Inputless.xsodata",
                json: true,
                defaultBindingMode: sap.ui.model.BindingMode.TwoWay
            });
            sap.ui.getCore().setModel(oModelInputless, "/Inputless");

It contains an entity named Data . The useful properties are named : id , dept and ratio .

I would like to colorize the regions of my Map according to the ratio (which should be recieved as a parametter by the function oColor() but I have no idea how to do it.

This is my view.js:

sap.ui.jsview("package.view.main", {

/* Specifies the Controller belonging to this View. 
 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
 * @memberOf controller.main
 */
getControllerName: function() {
    return "Laposte.controller.main";
},

/* Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
 * Since the Controller is given to this method, its event handlers can be attached right away.
 * @memberOf controller.main
 */
createContent: function(oController) {

    // set the geojson location to some data
    jQuery.sap.require("sap.ui.vbm.AnalyticMap");
    // Map GeoJSON
    sap.ui.vbm.AnalyticMap.GeoJSONURL = "./map/country.json";

    var oRegion = new sap.ui.vbm.Region({
        code: "{id}",
        color: {
                parts: [
                    {path: "ratio"}
                ],
                formatter: oController.formatter.oColor
            },
        tooltip: "ratio"
    });

    var oVBI1 = new sap.ui.vbm.AnalyticMap('vbi', {
        width: "100%",
        height: 1000,
        plugin: false,
        centerPosition: "2.2137;46.2276",
        zoomlevel: 6,
        regions : {
                    path : "/Inputless/Data",
                    template: oRegion
                }

    });

    var oPage = new sap.m.Page({
        title: "{i18n>title}",
        content: [oVBI1]
    });

    var app = new sap.m.App("myApp", {
        initialPage: "oPage"
    });
    app.addPage(oPage);
    return app;
  }
});

I was told to use the bindAggregation method and parameters : {select DEPT,QSperc} in the parameter regions of my map oVBI1 but I don't know how to do this

Answer 1

I will answer my own question as I got rid of the problem I've submitted to you:

I had to load everything in the Component.js first but not in the view.js , this way:

Component.js:

var oModelInputless = new sap.ui.model.odata.v2.ODataModel("http://server:port/path/Inputless.xsodata",{
    json: true,
    useBatch: false,
    defaultBindingMode: "None"
});
sap.ui.getCore().setModel(oModelInputless, "Inputless");

//set the device model
this.setModel(models.createDeviceModel(), "device");

//instanciation the map in the Component.js but not in the view
sap.ui.getCore().byId("vbi").setModel(oModelInputless, "Inputless");
sap.ui.getCore().byId("vbi").bindAggregation("regions", {
    path: "Inputless>/Data",
    template: sap.ui.getCore().byId("region"),
    parameters: {
        select: "dpt,ratio"
    }
});

view.js:

/* Specifies the Controller belonging to this View. 
 * In the case that it is not implemented, or that "null" is returned, this View does not have a Controller.
 * @memberOf controller.main
 */
getControllerName: function() {
    return "package.controller.main";
},

/* Is initially called once after the Controller has been instantiated. It is the place where the UI is constructed. 
 * Since the Controller is given to this method, its event handlers can be attached right away.
 * @memberOf controller.main
 */
createContent: function(oController) {

    // set the geojson location to some data
    jQuery.sap.require("sap.ui.vbm.AnalyticMap");
    // Map GeoJSON
    sap.ui.vbm.AnalyticMap.GeoJSONURL = "./map/country.json";

    //region template
    var oRegion = new sap.ui.vbm.Region("region", {
        code: "{Inputless>DEPT}",
        color: { // fixé en rajoutant data-sap-ui-bindingSyntax="complex" au index.html
            parts: ["Inputless>QSperc"],
            formatter: oController.formatter.qsColor
        },
        tooltip: "{Inputless>QSperc}"
    });

    var oVBI1 = new sap.ui.vbm.AnalyticMap('vbi', {
        width: "100%",
        height: 1000,
        plugin: false,
        centerPosition: "2.2137;46.2276",
        zoomlevel: 6,
        vos: [oSpots] 
    });
    var oPage = new sap.m.Page({
        title: "{i18n>title}",
        content: [oVBI1]
    });

    var app = new sap.m.App("myApp", {
        initialPage: "oPage"
    });
    app.addPage(oPage);
    return app;
    }
});

Hope it helps somebody.