Team Time Fiori Map

Table of Contents

Problem

Joining a large multi location team can be tricky, because you have to know what time is it at Your colleagues location. One hand during communication with Your colleagues or scheduling a meeting a fast insight can be really helpful, other hand if You are not challenged enough professionally, then You turn to fun programming in Your free time to face some challenges and interesting topics. At least this is what I am doing to not loose joy of software development. At the same time this brings You a big benefit to gain experience in innovative areas.

Solution

This sample app shows that the Analytical Map map of SAPUI5 library can be used without live API key and connection to a map provider. In this case we used it to draw local time at locations with labels showing Your colleague name.

Let Your creativity fly, and imagine other useful solutions with this great control, like showing global incident maps with semantic colors (red, yellow) of locations and labels (because this is also possible), and so on.

Keys of the solution

Project generated with Easy UI5 Generator
Used control sap.ui.vbm.AnalyticMap
Offline Countries and regions for the map can be found in model/L0.json. The usage is configured in Mainview.Controller.js: AnalyticMap.GeoJSONURL = "model/L0.json";
Your colleagues can be configured in model/Buddies.json under the Spots array used for the same aggregation of the map.

"Spots": [
        {
            "time": "--:-- -- ",
            "timeZone": "CET",
            "timeZoneJS": "Europe/Berlin",
            "pos": "13.415552025336362;52.520252805863194;0",
            "city": "Berlin",
            "type": "Default",
            "text": "Herr Smart, Frau Unsure,"
        },
        {
            "time": "--:-- -- ",
            "timeZone": "GMT",
            "timeZoneJS": "Europe/Dublin",
            "pos": "-6.259248101112975;53.34024996892022;0",
            "city": "Cork",
            "type": "Default",
            "text": "Agent Bro"
        }
]

Here two properties need to be emphasized:
- pos (longitude;latitude;height): to get the location of your colleague, you can select the place on google map, and right click to get the geo coordinates in decimal degrees. Attention: You have to swap the numbers given by Google Map, because there latitude comes first, followed by the longitude.
  The last number is always 0 in the pos, but just in case You do not want to go into space .

timeZoneJS: the timeZone is just for informational purpose, we’re rather more interested in the timeZoneJS. This is what You can actually use in JavaScript for conversions. Look at function onRecalcTime to see how the local time can be calculated and formatted. You will notice that not a great built-in support in plain JS for the timezones, but here I willingly wanted to ignore using third-party libraries like moment.

 onRecalcTime: function () {
        var aLocations = this._oModel.getProperty("/Spots");

        for (let index = 0; index < aLocations.length; index++) {
          var oLocation = aLocations[index];

          let date = new Date;

          let strTime = date.toLocaleTimeString([], {
            hour: '2-digit',
            minute: '2-digit',
            timeZone: oLocation.timeZoneJS
          });

          oLocation.time = strTime;

        }

        this._oModel.setProperty("/Spots", aLocations);
      }

The map can respond to user interactions. You can subscribe to bunch of events, like clicking on a location.

Because of the region file, the map is also showing the name of the country in a tooltip on a mouseover.

Operation

To get this up and running, You need a simple web server. I am using github.io. Look at it here:
https://attilaberencsi.github.io/teamtimelive/

Source code

https://github.com/attilaberencsi/teamtime

Share this content:

SAPDEV.EU