This sample application demonstrates the interaction between a table and the GeoMap control. All objects are shown as rows in the table, as well as spot locations on the map. The data for both controls comes from a shared model. It is possible to select objects in the table or on the map. The selection on both controls is kept in sync using model binding.
var oData = {
Spots : [
{ "key" : "1", "pos": "13.407965;52.517906;0", ...},
...
]
};
// create model and set the data
var oModel = new sap.ui.model.json.JSONModel();
oModel.setData( oData );
this.getView().setModel(oModel);
In the method onInit of the controller we define some data in JSON format. This data is given to a JSONModel, which is finally assigned to the view.
<vbm:GeoMap id="VBISelection"
width="100%"
height="100%"
centerPosition="13.407965;52.517906"
zoomlevel="4">
<vbm:vos>
<vbm:Spots items="{/Spots}" >
<vbm:items>
<vbm:Spot position="{pos}"
tooltip="{tooltip}"
type="{type}"
select="{select}"
selectColor="RHLSA(0;1.0;3.0;1.0)">
</vbm:Spot>
</vbm:items>
</vbm:Spots>
</vbm:vos>
</vbm:GeoMap>
In the XML view we define a GeoMap control with some settings for size and a initial section of the map to show.
We define a Spots aggregation as child of the VOs aggregation.
With the attribute items of the Spots aggregation we define a path on the model, selecting the Spots array in our case.
The Spots aggregation gets a single Spot element assigned to the items aggregation
- acting as a template for the aggregation binding. The attributes of the template object are bound to model attributes. Besides bound attributes, the template can also
have attributes with static values, such as selectColor, which will than be equal for all instances in the aggregation.
Note: For the example the binding of the select attribute of the Spot to the model is of special importance. Since we bind the selection state,
we do not need to handle the select and deselect events.
<m:Table id="vbitable"
items="{/Spots}"
mode="MultiSelect"
... >
...
<m:items>
<m:ColumnListItem selected='{select}'>
...
</m:ColumnListItem>
</m:items>
</m:Table>
We also add the sap.m.Table control to the page. Again, we set through the attribute items a path on the model.
On the ColumnListItem we bind the attribute selected to the select property in the model. Thus we have established a
connection between the select attribute of the Spot and the selected attribute of the ColumnListItem using the model property select.
Additionally we assign handler function onSelectionChanged of the controller to the Spots aggregation events select and deselect.
This is not required for synchronizing the selection state of the controls, but will allow us to focus the map on the current selection in the table as additional feature.
onSelectionChanged : function (e) {
var oModel = this.getView().getModel();
var lons = [];
var lats = [];
for (var nJ = 0; nJ < spots.length; ++nJ) {
if (spots[nJ].select) {
var pos = spots[nJ].pos.split(";");
lons.push(pos[0]);
lats.push(pos[1]);
}
}
if (lons.length && lats.length) {
if (lons.length == 1 && lats.length == 1) {
this.oVBI.zoomToGeoPosition(lons, lats, 5);
} else {
this.oVBI.zoomToGeoPosition(lons, lats);
}
}
}
We use the selectionChanged event of the table only as a trigger. We get the actual selected objects from the model
by checking select property. We collect the longitude and latitude values for all selected spots and call function
zoomToGeoPosition to the the visible map section.
If only one object is selected, we will need to provide the desired zoom level as well. For multiple positions the control can calculate the optimal zoomlevel on its own.