UI5 Control for Google Maps with Data Binding

In a previous post I used the Google Maps API to interact with the SAP HANA Geographic objects Aggregation of tables by geographic location using geo-spatial SAP HANA capacities, SAP UI5 and Google Maps,  this is a more advanced stage of the UI5 and Google Maps integration, now the map is included as a UI5 Control, where each layer of the elements to draw is an aggregation of the Map object, this allows to bind the data of a Model with markers, locations of a heatmap, or the path of a polygon or polyline, I shared the project on OpenUI5 Control for Google Maps.

The modules create the constructor for the Map control.

• mexbalia.Maps.Map

and the constructors for the Elements which are elements of the aggregation Layers

• mexbalia.Maps.HeatMap
• mexbalia.Maps.Markers
• mexbalia.Maps.Polygon
• mexbalia.Maps.Polyline

each Layer has an aggregation Locations or Markers, the template used for the cloning of each row are created with the constructors

• mexbalia.Maps.Marker
• mexbalia.Maps.Location

the Layers of the Map are created like the columns in the sap.ui.table.Table control.

The next lines creates the Map used in this example http://christianladron.github.io/GMaps-UI5/MapDemo.html .

//Loading of modules.
  jQuery.sap.registerModulePath('mexbalia','src/');
  jQuery.sap.require('mexbalia.Maps.Polygon');
  jQuery.sap.require('mexbalia.Maps.MarkersLayer');
  //Creation of the templates for the aggregations in the Layers
  locationsTemplate = new mexbalia.Maps.Location({latitude:"{Latitude}",longitude:"{Longitude}"});
  markersTemplate = new mexbalia.Maps.Marker({latitude:"{Latitude}",longitude:"{Longitude}"});
  //Creation of the Map
  Map = new mexbalia.Maps.Map();
  //Creation of the layers Polygon and markersLayer
  Polygon= new mexbalia.Maps.Polygon({locations:{path:"/Markers",template:locationsTemplate}});
  markersLayer= new mexbalia.Maps.MarkersLayer({markers:{path:"/Markers",template:markersTemplate}});
  //Insertion of the layers into the map
  Map.insertLayer(markersLayer);
  Map.insertLayer(Polygon);
  //Setting of the model and placing in the <div> element
  Modelo = new sap.ui.model.json.JSONModel();
  Modelo.setData(LocationsData);
  Map.setModel(Modelo);
  Map.placeAt("map-canvas");

In this example the locations are bounded to a table, both bindings are two-way type, then any change in the table values affects the map markers and polygon locations automatically.