Weekend Fun with SAPUI5

ipravir · ‎07-18-2020

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.08021208814...

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

Weekend Fun with SAPUI5

SAP PI for Beginners

ABAP 7.40 Quick Reference

Fiori: technical installation and configuration of one app from A - Z