UI5 Control for Google Maps with Data Binding

[Former Member]

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 Goog...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.