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://christianlgr.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.