Adding focus on geo map

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

@@ -692,6 +692,7 @@
     {{js "js/leaflet/leaflet.js" }}
     {{js "js/leaflet/leaflet.markercluster.js" }}
     {{js "js/leaflet/L.Control.Locate.js" }}
+    {{js "js/leaflet/L.Control.Focus.js" }}
     {{js "js/leaflet/leaflet.groupedlayercontrol.js" }}
     {{js "js/leaflet/Leaflet.fullscreen.min.js" }}
     {{js "js/leaflet/Marker.Rotate.js" }}

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

@@ -107,7 +107,7 @@ function initializeMap() {
     });
     L.tileLayer(tileSet, {attribution: attribution}).addTo(map);
 
-    map.zoomControl.setPosition('bottomleft');
+    map.zoomControl.setPosition('bottomright');
     map.on('click', function (e) {
         $.noty.closeAll();
     });
@@ -162,14 +162,14 @@ function processAfterInitializationMap() {
         div.innerHTML = "<a href='#' onclick='$(\"#attributionModal\").modal(\"show\"); return false;'>Attribution</a>";
         return div;
     };
-    //map.addControl(attributionControl);
+    // map.addControl(attributionControl);
-
+    map.addControl(L.control.fullscreen({position: 'bottomright'}));
     //L.control.fullscreen({
     //    position: 'bottomright'
     //}).addTo(map);
-    L.control.zoom({
+    // L.control.zoom({
-        position: "bottomright"
+    //     position: "bottomright"
-    }).addTo(map);
+    // }).addTo(map);
 
     groupedOverlays = {
         "Web Map Service layers": {}
@@ -312,6 +312,7 @@ function focusOnSpatialObject(objectId) {
         createChart();
         chart.load({columns: [spatialObject.speedHistory.getArray()]});
     }, 100);
+    map.addControl(L.control.focus({position: 'bottomright', marker: spatialObject.marker, zoomLevel: zoomLevel}));
 }
 
 
@@ -402,10 +403,20 @@ function enableRealTime() {
 }
 
 function InitSpatialObject() {
+    var spatialObject = drawSpatialObject();
+    map.addControl(L.control.focus({position: 'bottomright', marker: spatialObject.marker, zoomLevel: zoomLevel}));
+}
+
+function focusOnRecentHistorySpatialObject(objectId) {
+    drawSpatialObject();
+    noty({text: "Showing last two hours geo history", type: "information"});
+}
+
+function drawSpatialObject() {
     var fromDate = new Date();
     fromDate.setHours(fromDate.getHours() - 2);
     var toDate = new Date();
-    console.log(fromDate + " " + toDate);
+    //console.log(fromDate.valueOf() + " " + toDate.valueOf());
     var tableData = getProviderData(fromDate.valueOf(), toDate.valueOf());
     for (var i = 0; i < tableData.length; i++) {
         var data = tableData[i];
@@ -456,8 +467,10 @@ function InitSpatialObject() {
         createChart();
         chart.load({columns: [spatialObject.speedHistory.getArray()]});
     }, 100);
+    return spatialObject;
 }
 
+
 function focusOnHistorySpatialObject(objectId, timeFrom, timeTo) {
     if (!timeFrom) {
         notifyError('No start time provided to show history. Please provide a suitable value' + timeFrom);
@@ -471,6 +484,7 @@ function focusOnHistorySpatialObject(objectId, timeFrom, timeTo) {
         clearMap();
         var fromDate = new Date(timeFrom);
         var toDate = new Date(timeTo);
+        //console.log(fromDate.valueOf() + " " + toDate.valueOf());
         var tableData = getProviderData(fromDate.valueOf(), toDate.valueOf());
         for (var i = 0; i < tableData.length; i++) {
             var data = tableData[i];

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

@@ -0,0 +1,90 @@
+/*
+ *  Copyright (c) 2017, WSO2 Inc. (http://www.wso2.org) All Rights Reserved.
+ *
+ *  WSO2 Inc. licenses this file to you under the Apache License,
+ *  Version 2.0 (the "License"); you may not use this file except
+ *  in compliance with the License.
+ *  You may obtain a copy of the License at
+ *
+ *    http://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing,
+ * software distributed under the License is distributed on an
+ * "AS IS" BASIS, WITHOUT WARRANTIES OR CONDITIONS OF ANY
+ * KIND, either express or implied.  See the License for the
+ * specific language governing permissions and limitations
+ * under the License.
+ */
+L.Control.Focus = L.Control.extend({
+    options: {
+        position: 'topleft',
+        icon: 'icon-location',  // icon-location or icon-direction
+        iconLoading: 'icon-spinner animate-spin',
+        strings: {
+            title: "Show the device"
+        },
+        marker: {},
+        zoomLevel: 13
+    },
+
+    onAdd: function (map) {
+        var self = this;
+        var container = L.DomUtil.create('div',
+            'leaflet-control-locate leaflet-bar leaflet-control');
+
+        var link = L.DomUtil.create('a', 'leaflet-bar-part leaflet-bar-part-single ' + this.options.icon, container);
+        link.href = '#';
+        link.title = this.options.strings.title;
+
+        L.DomEvent
+            .on(link, 'click', L.DomEvent.stopPropagation)
+            .on(link, 'click', L.DomEvent.preventDefault)
+            .on(link, 'click', function () {
+                    focus();
+            })
+            .on(link, 'dblclick', L.DomEvent.stopPropagation);
+
+        var focus = function () {
+            visualizeLocation();
+        };
+
+        var visualizeLocation = function () {
+            // self.options.latlng
+            map.setView(self.options.marker.getLatLng(), self.options.marker.zoomLevel, {animate: true});
+            self.options.marker.openPopup();
+        };
+
+        // make focus functions available to outside world
+        this.focus = focus;
+        return container;
+    }
+});
+
+L.Map.addInitHook(function () {
+    if (this.options.focusControl) {
+        this.focusControl = L.control.focus();
+        this.addControl(this.focusControl);
+    }
+});
+
+L.control.focus = function (options) {
+    return new L.Control.Focus(options);
+};
+
+(function () {
+    // leaflet.js raises bug when trying to addClass / removeClass multiple classes at once
+    // Let's create a wrapper on it which fixes it.
+    var LDomUtilApplyClassesMethod = function (method, element, classNames) {
+        classNames = classNames.split(' ');
+        classNames.forEach(function (className) {
+            L.DomUtil[method].call(this, element, className);
+        });
+    };
+
+    L.DomUtil.addClasses = function (el, names) {
+        LDomUtilApplyClassesMethod('addClass', el, names);
+    };
+    L.DomUtil.removeClasses = function (el, names) {
+        LDomUtilApplyClassesMethod('removeClass', el, names);
+    };
+})();