Technology Blogs by Members
Explore a vibrant mix of technical expertise, industry insights, and tech buzz in member blogs covering SAP products, technology, and events. Get in the mix!
cancel
Showing results for 
Search instead for 
Did you mean: 
Former Member

Hello everyone,

This blog is on my experiences with SAP HANA GeoMap features. Many applications now-a-days incorporate maps to visualize geo-spatial data as part of their content. I will explain how the data can be exposed from HANA as GeoJson using XSJS and its consumption by Leaflet Map Client (Open Source).

The application basically explains 2 features:

  • You can plot markers with different color icons differentiating between each other in terms of high, medium and low priority, Regions etc.
  • On clicking each marker you can get data from HANA using XSJS in the form of JSON format and can bind with SAP UI5 Controls say be it is in Table format/Pie chart/Donut chart etc. Idea is to load a UI5 or any single/multiple component in a call out window of Geo marker when clicked. By doing this we can convey more information in graphical fashion via GeoMaps.


We can get the latitude and longitude of a marker when clicked and on the basis of this we can get analytical data from HANA XSJS service by passing latitude and longitude as parameters. I am consuming the data returned from the XSJS service in my application using AJAX. I used Leaflet.js APIs to plot the MAP.

More information on Leaflet can be found in the links http://leafletjs.com/.

It is done by following the steps below:

  1. Create a simple XS Project

   2. Create an html page say index.html

JSON:

3.  Create one view file and name it as map.view.js


sap.ui.jsview("views.map",
{
  getControllerName: function() {
    return null;
},
    createContent: function(oController) {
  var oShell = new sap.ui.ux3.Shell("myShell", {
  });
  oShell.addWorksetItem(new sap.ui.ux3.NavigationItem("wi_news",
  {subItems:[
  new sap.ui.ux3.NavigationItem("wi_geoview", {key:"wi_news_enhet",text:"GeoView"}),
  ]})),
  oShell.attachWorksetItemSelected(function(oEvent) {
  var itemKey = oEvent.getParameter("id");
  oShell.setContent(getContent(itemKey));
  });
  var donutChart = new sap.viz.ui5.Donut({
            width:"133%",
            height: "160px",
            plotArea: {
                'colorPalette': ['#91DA47', '#F8F218', '#F33D39' , '#FFA444']
            },
              // posi neu neg prob
            dataset: topSalesDataset = new sap.viz.ui5.data.FlattenedDataset({
                // a Bar Chart requires exactly one dimension (x-axis)
                dimensions: [{
                    axis: 1, // must be one for the x-axis, 2 for y-axis
                    name: 'Sentiments',
                    value: "{Sentiments}"
                }],
                // it can show multiple measures, each results in a new set of bars
                // in a new color
                measures: [{
                    name: 'Value', // 'name' is used as label in the Legend
                    value: '{Value}' // 'value' defines the binding for the
                }],
                // 'data' is used to bind the whole data collection that is to be
                // displayed in the chart
                data: {
                    path: "/"
                }
            })
  });
    var oModel = new sap.ui.model.json.JSONModel();
    oModel.loadData("services/getSenti.xsjs");
    donutChart.setModel(oModel);
  var oTable1Map = new sap.ui.table.Table({
        title: "Stringency of Rainfall Scarce Regions",
        visibleRowCount: 4,
        firstVisibleRow: 4,
        border: 2,
        editable:false,
        }).addStyleClass("mapClass");
    var oColumn1 = new sap.ui.table.Column({
  label: new sap.ui.commons.Label({
  text: "Region ID"
  }),
  template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "id"),
  sortProperty: "id",
  filterProperty: "id",
  width: "50px"
  }); 
  oTable1Map.addColumn(oColumn1);
        var oColumn = new sap.ui.table.Column({
        label: new sap.ui.commons.Label({
        text: "Region Name"
       }),
         template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "region"),
         sortProperty: "region",
         filterProperty: "region",
         width: "50px"
        }); 
    oTable1Map.addColumn(oColumn);
    oTable1Map.addColumn(new sap.ui.table.Column({
        label: new sap.ui.commons.Label({
        text: "Severity"
        }),
        template: new sap.ui.commons.TextField({editable:false}).bindProperty("value", "Severity"),
        sortProperty: "Severity",
        filterProperty: "Severity",
        width: "40px"
        }));
    var aContent = {};
       function getContent(id)
    {
  if (!aContent[id]) {
  if(id == "wi_geoview") {
  aContent[id] = new sap.ui.core.HTML("html93", {
  content:
  "<div id='map' style='height:520px;width:100%;border: 1px solid #AAA;'>"+
  "</div>",
  preferDOM : false,
  afterRendering : function(e) {
  var markera;
  var map = L.map( 'map', {
  center: [40.0, 5.0],
  minZoom: 3,
  maxZoom: 18,
  zoom: 3
  });
  L.tileLayer('http://{s}.mqcdn.com/tiles/1.0.0/map/{z}/{x}/{y}.png', {
  attribution:'&copy; <a href="http://osm.org/copyright" title="OpenStreetMap" target="_blank">OpenStreetMap</a> contributors | Tiles Courtesy of <a href="http://www.mapquest.com/" title="MapQuest" target="_blank">MapQuest</a> <img src="http://developer.mapquest.com/content/osm/mq_logo.png" width="16" height="16">',
  subdomains: ['otile1','otile2','otile3','otile4']
  }).addTo( map );
  var markerData = [];             
  function getMarkerData()
  {
  return $.ajax(
  {
                 url: "services/getGson.xsjs",
                 dataType: "json",
                 success: function(markerData, textStatus, jqXHR) {return markerData;},
                 error: function(jqXHR, textStatus, errorThrown) {alert("You're not logged in to SAP HANA!! Try again.");}
  });
  }
  $.when(getMarkerData()).done(function(jsonData)
  {
  for( var i=0; i < jsonData.length; ++i)
  {
  markera = L.marker( [jsonData[i].Latitude, jsonData[i].Longitude], {icon: L.icon({
  iconUrl:  jsonData[i].Marker,
  iconRetinaUrl: 'images/pin24.png',
  iconSize: [20, 30],
  iconAnchor: [9, 21],
  popupAnchor: [0, -14]
  })})
  .addTo( map )
  markera.bindPopup("<div id='mapbutton'/>")
  markera.on("popupopen", onPopupOpen)
  markera.on('click', function(e)
  {
  var oModel1=new sap.ui.model.json.JSONModel();
  var jURL="services/proactive_services.xsjs";
  jQuery.ajax({
  url: jURL,
  async :false,
  TYPE: 'POST',
  data: {
  "service": "Lat_Lng",
  "lat_value":e.latlng.lat,
  "long_value":e.latlng.lng
  },
  method: 'GET',
  dataType: 'text',
  success: function(data) {
  oModel1.loadData(data);
  }
  });
         oTable1Map.setModel(oModel1);
  oTable1Map.bindRows("/");
   });
  }
  function onPopupOpen()
  {
  var tempMarker = this;
  oTable1Map.placeAt("mapbutton");
  // donutChart.placeAt("mapbutton");
  }
  });
  }
   });
  }
  else
  {
  aContent[id] = null; }}return aContent[id];
  }
  //Initialize the default content
  oShell.setContent(getContent("wi_geoview"));
  oShell.placeAt("sample1"); 
    }
});

Clearly, we can see markers plotted on map with different colors signifying the attributes of that location

Now, as you click on the markers, latitude and longitude are passed as parameters and the corresponding data is returned from the HANA Database for that particular and can be shown as:



Similarly, we can show donut chart, or any other custom charts, for the particular location. As in the below example it is used for showing social sentiments on any campaign/product, etc.



We can also show Business Card or mix of UI5/custom interlinked/disconnected components. I will be covering this in my next blog. Till then enjoy being innovative and stay tuned! :smile:

Hope you find my first blog interesting and useful !

Thank You and Happy Coding,

Kapil Jain

9 Comments
Labels in this area