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:
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:
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:'© <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
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
You must be a registered user to add a comment. If you've already registered, sign in. Otherwise, register and sign in.
User | Count |
---|---|
37 | |
10 | |
5 | |
4 | |
4 | |
3 | |
3 | |
3 | |
2 | |
2 |