Skip to Content
Author's profile photo Trinoy Hazarika

Experiences with SAP HANA Geo-Spatial Features – Part 2

Welcome to Part 2 of my blog on Experiences with SAP HANA Geo-Spatial Features. You can see how I created my Geospatial data set for my application in the PART1 of my blog Experiences with SAP HANA Geo-Spatial Features – Part 1

In this part I will show how the data was exposed from HANA as GeoJson using XSJS and its consumption by Leaflet Map Client.

The application basically supports 2 features:-

  1. It displays all the parliamentary constituencies and on hovering on each of the constituency you can see more details about the constituency.
  2. You can draw a polygon or a rectangle in the MAP around the constituencies and you will get the number of seats won by each party for constituencies which comes within the area of the polygon or the rectangle.

I have created 2 XSJS service for each of the above 2 features.

For the 1st feature I am selecting the constituency information along with the shape information and returning the data in GeoJson format.

The ST_AsGeoJson() is a function provided by HANA Geospatial which can be used to return the data in GeoJson format. I am fetching the data in this format and adding it to a FeatureCollection as you can see below.


The results return by this service is show below:-


You can add as many features(like ST_NAME, color) you want under the feature collection but the shape will be stored under the geometry section of each feature as seen above.

The second XSJS service will be triggered whenever you draw a polygon on the MAP. I get the polygon co-ordinates using the MAP APIs and call the service by passing them as input. Inside the service i try to fetch all the constituencies which lies within the polygon by using the Geo-Spatial Function ST_Within() as shown below.


The results returned from this service will look like as shown below.


I am consuming the data returned from the XSJS service in my HTML5 application using AJAX. I used Leaflet.js APIs to plot and display the MAP.

More information on Leaflet can be found in the links

It is done by following the below steps:-

Step 1 :- In Leaflet.js you need to first create a MAP instance and linked it to your map div.

               var map =‘map’, {

                 zoomControl : true

               }).setView([ 22.527636, 78.832675 ], 4);

Step 2:- You need to add the tile layer to the map. The tile can be of anything as leaflet is open source. It can be of Openstreetmap as well as Cloudmade. I
             used cloudmade( in my example.

Step 3:-  The you can do a AJAX call to get the constituencies data in the form of GeoJson and add it to the map.

               function querystates(statesData){


                 url: ‘../model/geodata.xsjs’,

                 data: statesData,

                success: function (statesData) {


                 geojson = L.geoJson(statesData, {

                 style : style,

                 onEachFeature : onEachFeature





Step 4:-   On Each Feature which is nothing but a constituency you can perform further actions on mouseover, mouseout etc.

               function onEachFeature(feature, layer) {


                 mouseover : highlightFeature,

                 mouseout : resetHighlight,

                 click : zoomToFeature



And that`s it the application is up and running. For drawing shapes on MAP we need to use Leaflet Draw APIs which can be found in the link Leaflet/Leaflet.draw · GitHub.

You can also find the entire code for HTML 5 UI as well as the XSJS in the GITHUB link stated here:-

where in you can see how i am using the Leaflet Draw APIs to create the shapes. The main file for drawing the MAP is map.js which is available under the UI/JS folder.

That`s all for now. If i try something new will definitely write some more blogs. hope you liked it.

Assigned Tags

      You must be Logged on to comment or reply to a post.
      Author's profile photo Hari Sagar Pacca
      Hari Sagar Pacca

      Nice one Trinoy.

      Author's profile photo Trinoy Hazarika
      Trinoy Hazarika
      Blog Post Author


      Author's profile photo Former Member
      Former Member

      Very nice blog.....

      Author's profile photo Former Member
      Former Member

      Hi Trinoy ,

      Nice article , and i had an idea few days back where i was thinking to take picture of the place like a plant for which i was going to build an application and in the application was going to put all the feature and operation of the plant over this single map .

      The picture will act as an canvas and all the operations will be based on the positioning of the place and area example all the actions and operations which is carried on warehouse will be places where the warehouse appear in the picture (some what how you tag a image in facebook ) and user will navigate to the warehouse and find the operation linked to that.



      Author's profile photo Former Member
      Former Member

      Hi Trinoy,

      Thank you for this interesting article.

      I had trouble accessing the SAP HANA Cookbook at the link you provided - The document in Slideshare shows only 4 pages - like the rest is gone.

      Can you point out any other link to access the full Cookbook?

      Thank you


      Author's profile photo Trinoy Hazarika
      Trinoy Hazarika
      Blog Post Author
      Author's profile photo Robert Russell
      Robert Russell

      Hi Trinoy,

      Thanks for sharing, just tried my own geojson example with an XS service based on your work.



      Author's profile photo Former Member
      Former Member

      Thanks Trinoy for sharing valuable information.



      Prashant Sharma.