Personal Insights
Weekend Fun with SAPUI5
Hello Developers,
I was going through one of the tutorials and thought to develop same kind of application in SAPUI5.
This is a very small application, where I have used Google MAP API and Tiles to display Images.
Images will be displaying into tiles based on marked location in google map, for which I have used REST API provided by http://flickr.com/
Lets’ starts with begin:
Login into https://www.flickr.com/services/api/misc.urls.html site and create an account.
Go to Developer/API site to generate an API key as below screen.
https://www.flickr.com/services/developer/api/
Follow the all required steps to generate “Non-Commercial” API key.
Once API key received, try to execute below link formed by API KEY and below parameters:
https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=API_KEY&lat=50.08021208814787&lon=14.44188199472046&radius=1&radius_units=mi&per_page=100&format=json&nojsoncallback=1
- API_KEY
- Radius
- radius_unit
- per_page
Below data will be displaying in JSON format:
Once JSON data received, form the below URL to get the image from https://www.flickr.com/ based on:
https://live.staticflickr.com/65535/50123582262_f5ac888b74_c_d.jpg
- URL: https://live.staticflickr.com/
- Server
- id_secret
https://live.staticflickr.com/65535/50123582262_f5ac888b74_c_d.jpg
Create a new project in SAP WebIDE on SAP HANA cloud. Use below codes based on files.
Index.htm:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>GeoPics</title>
<script id="sap-ui-bootstrap"
src="https://sapui5.hana.ondemand.com/resources/sap-ui-core.js"
data-sap-ui-theme="sap_fiori_3"
data-sap-ui-resourceroots='{"GeoPic.GeoPics": "./"}'
data-sap-ui-compatVersion="edge"
data-sap-ui-oninit="module:sap/ui/core/ComponentSupport"
data-sap-ui-async="true"
data-sap-ui-frameOptions="trusted">
</script>
<script type="text/javascript"
src="https://maps.googleapis.com/maps/api/js?key=API_KEY&sensor=false">
</script>
<style>
.GeoMap {
height: 50%;
width: 100%;
}
.PicsArea{
background-color: #0f4c75;
}
</style>
</head>
<body class="sapUiBody">
<div id = "GeoMAP" data-sap-ui-component data-name="GeoPic.GeoPics" data-id="container" data-settings='{"id" : "GeoPics"}'></div>
</body>
</html>View.xml:
<mvc:View controllerName="GeoPic.GeoPics.controller.main"
xmlns:mvc="sap.ui.core.mvc"
xmlns="sap.m"
xmlns:vbm="sap.ui.vbm">
<App id="app">
<pages>
<Page id="page" title="{i18n>title}">
<content>
<HBox id="geoMap" fitContainer="true" justifyContent="Center" alignItems="Center" height="50%">
</HBox>
<TileContainer id="Pics" height="50%"/>
</content>
</Page>
</pages>
</App>
</mvc:View>
Controller.js:
sap.ui.define([
"sap/ui/core/mvc/Controller"
], function (Controller) {
"use strict";
return Controller.extend("GeoPic.GeoPics.controller.main", {
onInit: function () {
this.getView().byId("Pics").addStyleClass("PicsArea");
},
onAfterRendering: function() {
if (!this.initialized){
this.initialized = true;
this.geocoder = new google.maps.Geocoder();
var mapProp= { zoom:15 };
var oMap = new google.maps.Map(this.getView().byId("geoMap").getDomRef(),mapProp);
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(function(position) {
var pos = {
lat: position.coords.latitude,
lng: position.coords.longitude,
zoom: 15,
};
oMap.setCenter(pos);
sap.ui.controller("GeoPic.GeoPics.controller.main").addTiles(pos.lat, pos.lng)
var oMarker = new google.maps.Marker({position: oPoint, map: oMap});
oMap.addListener('click', function(e) {
var marker = new google.maps.Marker({
position: e.latLng,
map: oMap
});
oMap.panTo(e.latLng);
sap.ui.controller("GeoPic.GeoPics.controller.main").addTiles(marker.getPosition().lat(), marker.getPosition().lng())
});
}, function() {
handleLocationError(true, infoWindow, oMap.getCenter());
});
} else {
alert("Geolocation is not supported by this browser.");
}
}
else
{
var oMarker = new google.maps.Marker({position: oPoint, map: oMap});
var oPoint = new google.maps.LatLng(vLat,vLong);
oMap.setCenter(oPoint);
oMap.setZoom(10);
}
},
getLocation: function(oMap) {
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(sap.ui.controller("geopics.main").showPosition(oMap));
} else {
alert("Geolocation is not supported by this browser.");
}
},
showPosition: function(oMap, position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
map.setCenter(new google.maps.LatLng(lat, lng));
},
addTiles: function(lat, long){
var URL = "https://www.flickr.com/services/rest/?method=flickr.photos.search&api_key=FLICKR_API_KEY"
var info = "&radius=1&radius_units=mi&per_page=100&format=json&nojsoncallback=1"
var cLat = "&lat="
var cLong = "&lon="
cLat = cLat.concat(lat.toString())
cLong = cLong.concat(long.toString())
var mainUrl = URL.concat(cLat).concat(cLong).concat(info)
$.ajax({
type: "GET",
url : mainUrl,
dataType: 'json',
success: function(data,textStatus,jqXHR) {
sap.ui.getCore().byId("container-GeoPics---main--Pics").removeAllTiles()
for (var i = 0; i < data.photos.photo.length; i++){
var style = document.createElement('style');
var picCSS = ".BGImage".concat(i)
var cssName = "BGImage".concat(i)
style.type = 'text/css';
var pic = data.photos.photo[i].id.concat("_").concat(data.photos.photo[i].secret)
var bs = "/"
var picUrl = "https://live.staticflickr.com/".concat(data.photos.photo[i].server).concat(bs).concat(pic).concat("_c_d.jpg")
var suf = "); background-repeat: no-repeat; background-position: center center}"
var pre = " { background-image: url(".concat(picUrl).concat(suf)
var inHtml = picCSS.concat(pre)
style.innerHTML = inHtml;
document.getElementsByTagName('head')[0].appendChild(style);
var tile = new sap.m.Tile()
tile.addStyleClass(cssName)
sap.ui.getCore().byId("container-GeoPics---main--Pics").addTile(tile)
}
},
error : function(jqXHR,textStatus,errorThrown) {
} })
}
});
});Apply Google and Flickr API key in respective places.
Enjoy the Images shared in http://flickr.com/ by people across the world.
Happy Learning ?
Praveer