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.

/wp-content/uploads/2014/02/pic3_396322.png

The results return by this service is show below:-

result1.PNG

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.

/wp-content/uploads/2014/02/pic4_396339.png

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

result2.PNG

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 http://leafletjs.com/.

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 = L.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(http://cloudmade.com/) 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){

                 $.ajax({

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

                 data: statesData,

                success: function (statesData) {

                 $(‘#wrapper’).hide();

                 geojson = L.geoJson(statesData, {

                 style : style,

                 onEachFeature : onEachFeature

                 }).addTo(map);

                 }

                 });

}

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

               function onEachFeature(feature, layer) {

                 layer.on({

                 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:- https://github.com/trinoy/gisdemo.

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.

To report this post you need to login first.

8 Comments

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

  1. Ajay Nayak

    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.

    -Regards

    Ajay

    (0) 
  2. Jose Hernandez

    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

    Jose

    (0) 
    1. Trinoy Hazarika Post author
      (0) 
  3. Mudassir Fareed Fatihi

    Hi Trinoy,

    I was trying my own example with an XS service.

    whenthe application isstarted itstaking a lot of time to load the data from the XS service.

    What can be the issue.

    Please help me out.

    Thanks,

    Mudassir

    (0) 

Leave a Reply