diff --git a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.device-view/public/js/load-map.js b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.device-view/public/js/load-map.js
index 5f5305828c..4a7361e27f 100644
--- a/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.device-view/public/js/load-map.js
+++ b/components/device-types/androidsense-plugin/org.wso2.carbon.device.mgt.iot.androidsense.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android_sense.device-view/public/js/load-map.js
@@ -31,9 +31,11 @@ function loadLeafletMap() {
         map = L.map(container).setView([locationSets[0].lat, locationSets[0].lng], zoomLevel);
         L.tileLayer(tileSet, {attribution: attribution}).addTo(map);
 
-        for(var i = 0; i < locationSets.length; i++){
-            console.log(locationSets[i]);
-            var m = L.marker(locationSets[i]).addTo(map).bindPopup(new Date(locations.times[i].time).toISOString())
+        var initTime = locations.times[0].time, lastTime = locations.times[locationSets.length - 1].time;
+        var totalTime = lastTime - initTime;
+        for (var i = 0; i < locationSets.length; i++) {
+            var opacVal = (locations.times[i].time - initTime) / totalTime;
+            var m = L.marker(locationSets[i], {"opacity": opacVal}).addTo(map).bindPopup(new Date(locations.times[i].time).toISOString());
             m.on('mouseover', function (e) {
                 this.openPopup();
             });
@@ -51,7 +53,7 @@ function loadLeafletMap() {
 }
 
 $(document).ready(function () {
-    $(".location_tab").on("click", function() {
-                loadLeafletMap();
-            });
+    $(".location_tab").on("click", function () {
+        loadLeafletMap();
+    });
 });
\ No newline at end of file
diff --git a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/public/js/load-map.js b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/public/js/load-map.js
index c9daa3f440..4a7361e27f 100644
--- a/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/public/js/load-map.js
+++ b/components/mobile-plugins/android-plugin/org.wso2.carbon.device.mgt.mobile.android.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.device.type.android.device-view/public/js/load-map.js
@@ -20,22 +20,22 @@ var map;
 
 function loadLeafletMap() {
     var deviceLocationID = "#device-location",
-        lat = $(deviceLocationID).data("lat"),
-        long = $(deviceLocationID).data("long"),
         locations = $(deviceLocationID).data("locations"),
         container = "device-location",
         zoomLevel = 13,
         tileSet = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
         attribution = "&copy; <a href='https://openstreetmap.org/copyright'>OpenStreetMap</a> contributors";
-
     if (locations) {
 
         var locationSets = locations.locations;
-        map = L.map(container).setView([lat, long], zoomLevel);
+        map = L.map(container).setView([locationSets[0].lat, locationSets[0].lng], zoomLevel);
         L.tileLayer(tileSet, {attribution: attribution}).addTo(map);
 
-        for(var i = 0; i < locationSets.length; i++){
-            var m = L.marker(locationSets[i]).addTo(map).bindPopup(new Date(locations.times[i].time).toISOString())
+        var initTime = locations.times[0].time, lastTime = locations.times[locationSets.length - 1].time;
+        var totalTime = lastTime - initTime;
+        for (var i = 0; i < locationSets.length; i++) {
+            var opacVal = (locations.times[i].time - initTime) / totalTime;
+            var m = L.marker(locationSets[i], {"opacity": opacVal}).addTo(map).bindPopup(new Date(locations.times[i].time).toISOString());
             m.on('mouseover', function (e) {
                 this.openPopup();
             });
@@ -53,14 +53,7 @@ function loadLeafletMap() {
 }
 
 $(document).ready(function () {
-    $("a[data-toggle='tab']").on("shown.bs.tab", function() {
-        var url = $(this).prop("href");
-        var hash = url.substring(url.indexOf("#") + 1);
-
-        if (hash == "device_location_tab") {
-            if (!map) {
-                loadLeafletMap();
-            }
-        }
+    $(".location_tab").on("click", function () {
+        loadLeafletMap();
     });
 });
\ No newline at end of file