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.
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:-
- It displays all the parliamentary constituencies and on hovering on each of the constituency you can see more details about the constituency.
- 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 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.
).
not good at all. it bombed after 56million rows, the remote calculation view can return up to 80 million active records. The sql statement string reflects the same as the explain plan above.
