Geocoding in SAP UI5
Being a part of the development team of SAP Master Data Governance I develop applications to ease the life of the Business User who deals with millions of Master Data (Business Partner, Material, Accounts etc) by governing the data creation, management and distribution. The clean Master Data would in turn enable the business processes which use this master data less error prone and more profitable.
As a part of our development, we had developed a User Interface which will help the end user of master data to easily “Find” a record he is looking at with the basic information he has and not necessarily know the correct ID or primary key.( Eg: “Business Partner Id” or the “Material Id”).
You could look at the demo of this application from here. Please click on the highlighted orange boxes to go through the demo.
Eg: Show me all the customers at Arizona who belong to company code ‘0001’ and whose last name is ‘Smith’
Give me a count of all those flights which fly from City A to City B etc at a specified time interval for the carrier Id ‘LH’ are the common queries which the application handles with ease.
You could do some interesting queries and analysis on various master data types and parameters. Eg: Business Partner, Material, or our own famous SFlight data model. This could help the Business users to understand the count and spread across various parameters.
This picture indicates that there are only 7 Business Partners spread over Australia and Brazil.
Now, though the application provides some interesting facts, the result is displayed as a table. You could not do much with the information unless you have all your facts about geographic locations right in your mind and you can visualize an Atlas in front of you.
So to make the end result more interesting, I tried to integrate this solution of SAP Master Data Governance with Google Maps and a mash-up application is created.
Use Case 1: Plotting address on the map
How can I achieve it?
- Initialize the Map
Some basic variable declarations
var geocoder = ""; var map = ""; var geoMap = []; var geoPath = []; The “initialize_map” method will initialize a variable ‘map’ which will be used later on to plot the addresses. The latitude and longitude details indicate the position of the graph at which the map should be displayed initially.
initialize_map: function() { geocoder = new google.maps.Geocoder(); var latlng = new google.maps.LatLng(51.508742,-0.120850); var myOptions = { zoom : 2, center : latlng, mapTypeId : google.maps.MapTypeId.ROADMAP } ; map = new google.maps.Map($('#mapCanvas').get(0),myOptions); }
2. Append the map object as a part of your UI
createResultLayout: function() { cl_drill_down_view_util.createResultTable(); oResultLayout = new sap.ui.commons.layout.MatrixLayout({ id : "matrix3", layoutFixed : false, }); var oRow1 = new sap.ui.commons.layout.MatrixLayoutRow(); var oCell1 = new sap.ui.commons.layout.MatrixLayoutCell(); var oCell2 = new sap.ui.commons.layout.MatrixLayoutCell(); //Add the map canvas oCell2.addContent(new sap.ui.core.HTML( { content : "" })); oCell1.addContent(resultTable); oRow1.addCell(oCell1); oRow1.addCell(oCell2); oResultLayout.addRow(oRow1); },
As you notice in the UI, the lower part of the page contains 2 components: result table and a map. This method takes care of creating a layout and putting both the UI components at the right place. The method ‘createResultTable’ takes care of creating the table. Since this blog does not deal into the details of it, I have skipped it.
3. Get the address of the geographic locations you want to plot.
As a next step, we need to form the address which needs to be plotted. In my application, I get the country details as the SAP Country code (Eg: IN, DE, FR etc) where as Google API understands it as the country names (India, Germany, France etc). Hence I am hardcoding the country descriptions. Ideally you could use a conversion routine for the same.
switch(result['COUNTRY']) { case 'IN': { address = 'India'//'ISO 3166-2:IN'; break; } case 'DE': { address = 'Germany'//ISO 3166-2:DE'; break; } case 'IT': { address = 'Italy'//ISO 3166-2:IT'; break; } case 'RU': { address = 'Russia'//'ISO 3166-2:RU'; break; } case 'US': { address = 'USA'//'ISO 3166-2:US'; break; } } selAddress = result['CITY1'] + ','+ address ;
For my application, it is enough if I have an address which is a combination of City and Country. You could also plot to a level of Street and house number if your application requires it.
For performance reasons, I had pushed all the addresses to be plotted into an array so that I could all the Google API at once.
var geoMaploc = ''; geoMaploc = {address:address,location:'', count:1, text:address , marker:'' }; geoMap.push(geoMaploc);
4. Start plotting.
codeAddress: function (selAddress) { for(var m = 0; m
The markMap method calls the google API geocode for every location. If it finds the address, marks the location. If it could not throws an error message.
markMap:function(adr,selAddress) { geocoder.geocode( {'address':adr}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var found = false; for(var g=0; g< geoMap.length;g++ ) { if(geoMap[g].address == adr) { //found.so call the marker the count times map.setCenter(results[0].geometry.location); var marker = new google.maps.Marker( { map: map, position: results[0].geometry.location }); if(adr === selAddress) {//only then animate marker.setAnimation(google.maps.Animation.BOUNCE); } var infowindow = new google.maps.InfoWindow({ content:geoMap[g].text + "(" + geoMap[g].count + ")" }); infowindow.open(map,marker); geoMap[g].location = results[0].geometry.location; geoMap[g].marker = marker; found = true; break; } } if(found === false) { var geoMaploc = ''; geoMaploc = {address:address,location:results[0].geometry.location,count:1} geoMaploc.address = address; geoMaploc.location = results[0].geometry.location ; geoMap.push(geoMaploc); } } else { alert("Geocode was not successful for the following reason: " + status); } }); },
And your SAP UI5 mashup with Google Maps is ready !!!
Use case 2: Plot the path in Geo Maps
After plotting the addresses, there could be some use cases where you would want to mark a path. Eg: I would want to look at all the airlines from one country to another.
How to achieve this ?
- Follow steps 1 to 3 as above use case
- Now you would want to mark 2 points and draw a
line.
codeAddressCarrx: function (selAddress) { for(var m = 0; m
Mark the addresses and then draw a line.
markMapCarrx:function(adr,selAddress,presCount) { geocoder.geocode( {'address':adr}, function(results, status) { if (status == google.maps.GeocoderStatus.OK) { var found = false; for(var g=0; g
Thus a easy good looking mashup is ready !!!!. You could try out various other options provided for your own business use cases.
Regards,
Sandhya
New NetWeaver Information at SAP.com
Very Helpfull