Skip to Content
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

  1. API_KEY
  2. Radius
  3. radius_unit
  4. 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

  1. URL: https://live.staticflickr.com/
  2. Server
  3. 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

 

 

Be the first to leave a comment
You must be Logged on to comment or reply to a post.