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");






Screenshot from 2014-07-15 19:33:08.png

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.

To report this post you need to login first.

Be the first to leave a comment

You must be Logged on to comment or reply to a post.

Leave a Reply