Fixes https://github.com/wso2/product-iots/issues/1084

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs

@@ -64,6 +64,12 @@
     <div id="" style="height: 63vh;">
         <!-- Sidebar -->
         <div id="map"></div>
+        {{#if geoServicesEnabled}}
+        <div id="ws-alerts">
+            <i id="ws-alert-stream" class="fw fw-circle text-muted"></i> Alerts Stream&nbsp;
+            <i id="ws-spatial-stream" class="fw fw-circle text-muted"></i> Spatial Stream
+        </div>
+        {{/if}}
     </div>
 
     <div id="predictionResults" style="background: darkgray;display: none;border-radius: 13px;height: 94%;padding: 0"
@@ -688,11 +694,11 @@
             var geoLocationLink = $(".initGeoLocationLink");
             if (geoLocationLink) {
                 geoLocationLink.on('click', function () {
-                    initializeGeoLocation()
+                    initializeGeoLocation({{geoServicesEnabled}});
                 });
-                {{#if showGeoFencingTools}}
+                geoPublicUri = $("#geo-charts").data("geo-public-uri");
+                {{#if geoServicesEnabled}}
                     var geoToolsMenu = $('#location-action-bar');
-                    geoPublicUri = $("#geo-charts").data("geo-public-uri");
                     var realtTime = createGeoToolListItem('javascript:enableRealTime()',
                                                           'Return to Real Time View', 'fw fw-undo', geoToolsMenu);
                     realtTime.css("display", "none");

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.js

@@ -52,6 +52,6 @@ function onRequest(context) {
     } else {
         viewModel.lastLocation = stringify({});
     }
-    viewModel.showGeoFencingTools = devicemgtProps.serverConfig.geoLocationConfiguration.isEnabled;
+    viewModel.geoServicesEnabled = devicemgtProps.serverConfig.geoLocationConfiguration.isEnabled;
     return viewModel;
 }

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/app.js

@@ -40,38 +40,11 @@ function initialLoad() {
         setTimeout(initialLoad, 500); // give everything some time to render
     } else {
         initializeMap();
-        // getTileServers();
-        // loadWms();
         processAfterInitializationMap();
-        //Access gps and make zoom to server location as map center
-        //navigator.geolocation.getCurrentPosition(success, error);
         $("#loading").hide();
     }
 }
 
-//function success(position) {
-//    var browserLatitude = position.coords.latitude;
-//    var browserLongitude = position.coords.longitude;
-//    map.setView([browserLatitude, browserLongitude]);
-//    map.setZoom(14);
-//    $.UIkit.notify({
-//        message: "Map view set to browser's location",
-//        status: 'info',
-//        timeout: ApplicationOptions.constance.NOTIFY_INFO_TIMEOUT,
-//        pos: 'top-center'
-//    });
-//}
-//
-//function error() {
-//    $.UIkit.notify({
-//        message: "Unable to find browser location!",
-//        status: 'warning',
-//        timeout: ApplicationOptions.constance.NOTIFY_WARNING_TIMEOUT,
-//        pos: 'top-center'
-//    });
-//}
-
-
 function initializeMap() {
     if (typeof(map) !== 'undefined') {
         map.remove();
@@ -83,7 +56,7 @@ function initializeMap() {
     map = L.map("map", {
         zoom: 14,
         center: [6.927078, 79.861243],
-        layers: [defaultOSM, defaultTFL],
+        layers: [defaultOSM],
         zoomControl: true,
         attributionControl: false,
         maxZoom: 20,
@@ -147,28 +120,20 @@ function processAfterInitializationMap() {
         div.innerHTML = "<a href='#' onclick='$(\"#attributionModal\").modal(\"show\"); return false;'>Attribution</a>";
         return div;
     };
-    // map.addControl(attributionControl);
     map.addControl(L.control.fullscreen({position: 'bottomright'}));
 
     geoAlertsBar = L.control.geoAlerts({position: 'topright'});
     map.addControl(geoAlertsBar);
-    //L.control.fullscreen({
-    //    position: 'bottomright'
-    //}).addTo(map);
-    // L.control.zoom({
-    //     position: "bottomright"
-    // }).addTo(map);
 
     groupedOverlays = {
         "Web Map Service layers": {}
     };
 
     layerControl = L.control.groupedLayers(baseLayers, groupedOverlays, {
-        collapsed: true
+        collapsed: true,
+        position: 'bottomleft'
     }).addTo(map);
 
-    //L.control.layers(baseLayers).addTo(map);
-    //map.addLayer(defaultTFL);
 }
 
 /* Highlight search box text on click */
@@ -313,30 +278,34 @@ var getProviderData = function (timeFrom, timeTo) {
                     function (data) {
                         tableData = JSON.parse(data);
                         if (tableData.length === 0) {
-                            var geoCharts = $("#geo-charts");
+                        showCurrentLocation(tableData);
-                            var location = geoCharts.data("device-location");
-                            location.heading = 0;
-                            location.id = deviceId;
-                            location.values = {};
-                            location.values.id = deviceId;
-                            location.values.information = "Last seen " + timeSince(new Date(location.updatedTime));
-                            location.values.notify = false;
-                            location.values.speed = 0;
-                            location.values.state = "NORMAL";
-                            location.values.longitude = location.longitude;
-                            location.values.latitude = location.latitude;
-                            location.timestamp = location.updatedTime;
-                            location.values.timeStamp = location.updatedTime;
-                            location.values.type = deviceType;
-                            location._version = "1.0.0";
-                            tableData.push(location);
                         }
                     }, function (message) {
-            console.log(message);
+                        showCurrentLocation(tableData);
-        });
+                    });
     return tableData;
 };
 
+function showCurrentLocation(tableData){
+    var geoCharts = $("#geo-charts");
+    var location = geoCharts.data("device-location");
+    location.heading = 0;
+    location.id = deviceId;
+    location.values = {};
+    location.values.id = deviceId;
+    location.values.information = "Last seen " + timeSince(new Date(location.updatedTime));
+    location.values.notify = false;
+    location.values.speed = 0;
+    location.values.state = "NORMAL";
+    location.values.longitude = location.longitude;
+    location.values.latitude = location.latitude;
+    location.timestamp = location.updatedTime;
+    location.values.timeStamp = location.updatedTime;
+    location.values.type = deviceType;
+    location._version = "1.0.0";
+    tableData.push(location);
+}
+
 function timeSince(date) {
 
     if (!date) {
@@ -401,10 +370,6 @@ function enableRealTime() {
 
 function InitSpatialObject() {
     var spatialObject = drawSpatialObject();
-    setTimeout(function () {
-                   map.setView(spatialObject.marker.getLatLng(), spatialObject.marker.zoomLevel, {animate: true});
-               }, 1000
-    );
     map.addControl(L.control.focus({position: 'bottomright', marker: spatialObject.marker, zoomLevel: zoomLevel}));
 }
 
@@ -455,13 +420,17 @@ function drawSpatialObject() {
         return true;
     }
 
-    map.setView(spatialObject.marker.getLatLng(), zoomLevel, {animate: true}); // TODO: check the map._layersMaxZoom and set the zoom level accordingly
-
     var alertsFromDate = new Date();
     alertsFromDate.setHours(alertsFromDate.getHours() - 24); //last 24 hours
     getAlertsHistory(deviceType, deviceId, alertsFromDate.valueOf(), toDate.valueOf());
-    spatialObject.marker.openPopup();
+
-    spatialObject.drawPath();
+    setTimeout(function () {
+                   map.invalidateSize();
+                   map.setView(spatialObject.marker.getLatLng(), spatialObject.marker.zoomLevel, {animate: true});
+                   spatialObject.marker.openPopup();
+                   spatialObject.drawPath();
+               }, 500);
+
     if (speedGraphControl) {
         setTimeout(function () {
             createChart();

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/geo_remote.js

@@ -65,17 +65,7 @@ var defaultOSM = L.tileLayer("https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png
     maxZoom: 19
 });
 
-//var defaultTFL = L.tileLayer('https://{s}.google.com/vt/lyrs=m&x={x}&y={y}&z={z}',{
-//    maxZoom: 19,
-//    subdomains:['mt0','mt1','mt2','mt3']
-//});
-var defaultTFL = L.tileLayer("", {
-    maxZoom: 19,
-    attribution: '| London Traffic and London Buses data Powered by TfL Open Data'
-});
-
 var baseLayers = {
-    //"Google Maps": defaultTFL,
     "Open Street Maps": defaultOSM
 };
 
@@ -564,7 +554,6 @@ function getAlertsHistory(deviceType, deviceId, timeFrom, timeTo) {
                             }
                         });
                     }, function (message) {
-            console.log(message);
         });
 }
 

components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/websocket.js

@@ -20,7 +20,7 @@ var debugObject; // assign object and debug from browser console, this is for de
 var showPathFlag = false; // Flag to hold the status of draw objects path
 var currentSpatialObjects = {};
 var selectedSpatialObject; // This is set when user search for an object from the search box
-var websocket;
+var spatialWebsocket;
 var onAlertWebsocket;
 var onTrafficStreamWebsocket;
 var currentPredictions = {};
@@ -506,36 +506,11 @@ function LocalStorageArray(id) {
     };
 }
 
-var webSocketOnTrafficStreamOpen = function () {
+var initLoading = true;
-    onTrafficStreamWebsocket.set_opened();
-    noty({text: 'You Are Connected to Traffic Stream !!', type: 'success'});
-};
-
-var webSocketOnTrafficStreamMessage = function processMessage(message) {
-    var json = $.parseJSON(message.data);
-    if (json.messageType == "Traffic") {
-        processTrafficMessage(json);
-    } else {
-        console.log("Message type not supported.");
-    }
-};
-
-var webSocketOnTrafficStreamClose = function (e) {
-    if (onTrafficStreamWebsocket.get_opened()) {
-        noty({text: 'Connection lost with Traffic Stream Stream !!', type: 'error'});
-    }
-    waitForSocketConnection(onTrafficStreamWebsocket, initializeOnTrafficStreamWebSocket);
-};
-
-var webSocketOnTrafficStreamError = function (e) {
-    if (!onTrafficStreamWebsocket.get_opened()) return;
-    noty({text: 'Something went wrong when trying to connect to <b>' + trafficStreamWebSocketURL + '<b/>', type: 'error'});
-};
-
 
 var webSocketOnAlertOpen = function () {
     onAlertWebsocket.set_opened();
-    noty({text: 'You Are Connected to Alert Stream !!', type: 'success'});
+    $('#ws-alert-stream').removeClass('text-muted text-danger text-success').addClass('text-success');
 };
 
 var webSocketOnAlertMessage = function processMessage(message) {
@@ -551,7 +526,7 @@ var webSocketOnAlertMessage = function processMessage(message) {
 
 var webSocketOnAlertClose = function (e) {
     if (onAlertWebsocket.get_opened()) {
-        noty({text: 'Connection lost with Alert Stream !!', type: 'error'});
+        $('#ws-alert-stream').removeClass('text-muted text-danger text-success').addClass('text-danger');
     }
     waitForSocketConnection(onAlertWebsocket, initializeOnAlertWebSocket);
 };
@@ -561,18 +536,15 @@ var webSocketOnAlertError = function (e) {
     noty({text: 'Something went wrong when trying to connect to <b>' + alertWebSocketURL + '<b/>', type: 'error'});
 };
 
-var initLoading = true;
+var webSocketSpatialOnOpen = function () {
-var webSocketOnOpen = function () {
+    spatialWebsocket.set_opened();
-    websocket.set_opened();
     if (initLoading) {
-        initialLoad();
-        InitSpatialObject();
         initLoading = false;
     }
-    noty({text: 'You Are Connected to Spatial Stream !!', type: 'success'});
+    $('#ws-spatial-stream').removeClass('text-muted text-danger text-success').addClass('text-success');
 };
 
-var webSocketOnMessage = function (message) {
+var webSocketSpatialOnMessage = function (message) {
     if (!isBatchModeOn) {
         var json = $.parseJSON(message.data);
         if (json.messageType == "Point") {
@@ -585,15 +557,15 @@ var webSocketOnMessage = function (message) {
     }
 };
 
-var webSocketOnClose = function (e) {
+var webSocketSpatialOnClose = function (e) {
-    if (websocket.get_opened()) {
+    if (spatialWebsocket.get_opened()) {
-        noty({text: 'Connection lost with server!!', type: 'error'});
+        $('#ws-spatial-stream').removeClass('text-muted text-danger text-success').addClass('text-danger');
     }
-    waitForSocketConnection(websocket, initializeWebSocket);
+    waitForSocketConnection(spatialWebsocket, initializeSpatialStreamWebSocket);
 };
 
-var webSocketOnError = function (err) {
+var webSocketSpatialOnError = function (err) {
-    if (!websocket.get_opened()) return;
+    if (!spatialWebsocket.get_opened()) return;
     noty({text: 'Something went wrong when trying to connect to <b>' + webSocketURL + '<b/>', type: 'error'});
 };
 
@@ -622,13 +594,13 @@ function waitForSocketConnection(socket, callback) {
 }
 
 
-function initializeWebSocket() {
+function initializeSpatialStreamWebSocket() {
-    if(websocket) websocket.close();
+    if(spatialWebsocket) spatialWebsocket.close();
-    websocket = new WebSocket(webSocketURL);
+    spatialWebsocket = new WebSocket(webSocketURL);
-    websocket.onopen = webSocketOnOpen;
+    spatialWebsocket.onopen = webSocketSpatialOnOpen;
-    websocket.onmessage = webSocketOnMessage;
+    spatialWebsocket.onmessage = webSocketSpatialOnMessage;
-    websocket.onclose = webSocketOnClose;
+    spatialWebsocket.onclose = webSocketSpatialOnClose;
-    websocket.onerror = webSocketOnError;
+    spatialWebsocket.onerror = webSocketSpatialOnError;
 }
 
 function initializeOnAlertWebSocket() {
@@ -640,7 +612,7 @@ function initializeOnAlertWebSocket() {
     onAlertWebsocket.onopen = webSocketOnAlertOpen;
 }
 
-function initializeGeoLocation() {
+function initializeGeoLocation(geoFencingEnabled) {
     var deviceDetails = $(".device-id");
     deviceId = deviceDetails.data("deviceid");
     deviceType = deviceDetails.data("type");
@@ -657,11 +629,17 @@ function initializeGeoLocation() {
         alertWebSocketURL = wsEndPoint + userDomain + "/org.wso2.geo.AlertsNotifications/1.0.0?"
                             + "deviceId=" + deviceId + "&deviceType=" + deviceType + "&websocketToken=" + wsToken;
         $("#proximity_alert").hide();
-        initializeWebSocket();
+
-        initializeOnAlertWebSocket();
+        initialLoad();
-        window.onbeforeunload = function () {
+        InitSpatialObject();
-            websocket.close();
+
-            onAlertWebsocket.close();
+        if (geoFencingEnabled) {
+            initializeSpatialStreamWebSocket();
+            initializeOnAlertWebSocket();
+            window.onbeforeunload = function () {
+                spatialWebsocket.close();
+                onAlertWebsocket.close();
+            }
         }
     } else {
         noty({text: 'Invalid Access! No device information provided to track!', type: 'error'});