Skip to Content
Author's profile photo Abhishek Sharma

Dynamic Geo Tracking

Hi Folks !!

This blog is about the Extension to Application .

How good it will be if you are able to navigate yourself and know your location on the map in the sap fiori for logistics use.

Application can be deployed and can be used as ios/android/browser application or you can use it on fiori client.

Application is build using the mvc structure and google map api is used to embed the map in the application.

 

Here are the following steps to create the application

  • Create a project with XML view.
<mvc:View xmlns:html="http://www.w3.org/1999/xhtml" xmlns:mvc="sap.ui.core.mvc" xmlns="sap.m"
	controllerName="geo.app.geolocation.controller.Main" displayBlock="true">
	<App>
		<pages>
			<Page title="{i18n>title}">
				<content>
					<HBox id="map" fitContainer="true" justifyContent="Center" alignItems="Center"></HBox>
				</content>
			</Page>
		</pages>
	</App>
</mvc:View>

 

  • Create a controller js for the view 
sap.ui.define([
	"sap/ui/core/mvc/Controller"
], function(Controller) {
	"use strict";

	return Controller.extend("geo.app.geolocation.controller.Main", {

		onAfterRendering: function() {
			
			this.geocoder = new google.maps.Geocoder();
			window.mapOptions = {
				center: new google.maps.LatLng(45, 32),
				zoom: 17,
				mapTypeId: google.maps.MapTypeId.ROADMAP
			};

			var map = new google.maps.Map(this.getView().byId("map").getDomRef(), mapOptions);
			var infowindow = new google.maps.InfoWindow;
			var geocoder = new google.maps.Geocoder();
			var iconBase = 'https://maps.google.com/mapfiles/kml/shapes/';

			navigator.geolocation.watchPosition(function(position) {
				var pos = {
					lat: position.coords.latitude,
					lng: position.coords.longitude
				};
				var marker = new google.maps.Marker({
					map: map,
					position: pos,
					icon: iconBase + 'placemark_circle_highlight_maps.png'
				});
				infowindow.setPosition(pos);
				infowindow.setContent('Location found.');
				map.setCenter(pos);
			}, function() {
				noGeolocation('Error: The Geolocation service failed.');
			}, {
				enableHighAccuracy: true,
				maximumAge: 10e3,
				timeout: 20e3
			});

		},
		noGeolocation: function(message) {
			var opts = {
					map: map,
					position: ll(60, 105),
					content: message
				},
				info = new google.maps.InfoWindow(opts);
			map.setCenter(opts.position);
		},
		ll: function(y, x) {
			return new google.maps.LatLng(y, x);
		},

	});
});

 

Here are the screenshots of the application attached for mobile view and desktop view.

 

 

Assigned tags

      3 Comments
      You must be Logged on to comment or reply to a post.
      Author's profile photo Former Member
      Former Member

      Thanks for sharing this information, really a good example. Could you please also share the index.html file, I mean the main html file used for this application. I am wondering where have you used the Google API  key.

       

      Kindly reply, thanks.

      Author's profile photo Former Member
      Former Member

      @Former Member refer the extension project first.

      Author's profile photo Pratik Modh
      Pratik Modh

      Abhishek Kindly share your contact details on my whatsapp : (+91) 9016226649

      I need help