Skip to Content

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.

  dd_final.PNG
  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

customer_map_final.PNG

   How can I achieve it?

  1. 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 : "<div id='mapCanvas' style='width:800px; height: 320px;'></div>"  }));  
        
      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 <geoMap.length; m++ )
          {
                var address = geoMap[m].address;
                var adr =  '';
                adr= geoMap[m].address;
               cl_drill_down_util.markMap(adr,selAddress);
          }
       } ,




      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.

Carrx_final.PNG

How to achieve this ?

  1. Follow steps 1 to 3 as above use case
  2. Now you would want to mark 2 points and draw a
    line.

  


codeAddressCarrx: function (selAddress)
{ 
      
   for(var m = 0; m <geoMap.length; m++ )
          {
          var address = geoMap[m].address;
          var adr =  '';
          adr= geoMap[m].address;
          cl_drill_down_util.markMapCarrx(adr,selAddress,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<geoMap.length; g++ )
                             {
                              if(geoMap[g].address == adr)
                                     {
                                        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});
    
                               infowindow.open(map,marker);
                               geoMap[g].location = results[0].geometry.location;
                               geoMap[g].marker = marker;
                               found  = true;
                               break;
                              }
                              }               
  
                       if(presCount === (geoMap.length - 1))
                                               // start drawing the graphs
                              {
                                     for(var p = 0; p<geoPath.length; p++)
                                     {
                                            //get the locations
                                           var loc_fr = '';
                                           var loc_to = '';
                                           for(var g=0;g<geoMap.length; g++)
                                           {
                                                                                     if(geoMap[g].address === geoPath[p].address_fr)
                                                        {
                                                             loc_fr = geoMap[g].location;
                                                             break;
                                                        }
                                }
                        for(var g=0; g<geoMap.length; g++)
                           {
                                                            if(geoMap[g].address === geoPath[p].address_to)
                                     {
                                         loc_to = geoMap[g].location;
                                                                                  break;
                                   }
                            }
                         if((loc_fr !== '') && (loc_to!== ''))
                              {
                                 var myTrip=[loc_fr,loc_to];
                                 var lineSymbol = {
                                 path: google.maps.SymbolPath.FORWARD_CLOSED_ARROW
                                 };
                                 var flightPath=new google.maps.Polyline({
                                                     path:myTrip,
                                                      strokeColor:"#0000FF",
                                                       strokeOpacity:0.8,
                                                       strokeWeight:2,
                                                         icons: [{
                                                              icon: lineSymbol,
                                                              offset: '50%'
                                                            }],
                                                     });
                               flightPath.setMap(map);
  
                               }
  
                               }
                              }
                 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);                        
                 }                 
                 }); 
}


Thus a easy good looking mashup is ready !!!!. You could try out various other options provided for your own business use cases.


Regards,

Sandhya

To report this post you need to login first.

7 Comments

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

  1. Uwe Fetzer

    Really nice, but there’s always a but:

    • your link to the example application links to the sap internal system
    • please don’t add screenshots of your code, they are nearly useless. Please use plain text which we can copy/paste to try it out
    (0) 
    1. Sandhya Hariharan Post author

      Hello Uwe,

      Thank you for your suggestion. I intially started putting the code snippets as a part of blog. But indenting and formatting it was taking more time than writing the actual blog. Hence had put the screenshots. Will try to change it. 🙂

      Regards,

      Sandhya

      (0) 
    1. Sandhya Hariharan Post author

      Hello Abinash,

      Saw your App. Thats really wonderful. Congratulations in being a runner up. Thank you for your suggestion. Shall modify the title. 🙂

      Regards,

      Sandhya

      (0) 

Leave a Reply