From 68d9b2d310da4c786c474f3ad9834c5e665f3086 Mon Sep 17 00:00:00 2001 From: Rasika Perera Date: Wed, 14 Jun 2017 07:48:57 +0530 Subject: [PATCH] Adding focus on geo map --- .../cdmf.unit.geo-dashboard/geo-dashboard.hbs | 1 + .../cdmf.unit.geo-dashboard/public/js/app.js | 28 ++++-- .../public/js/leaflet/L.Control.Focus.js | 90 +++++++++++++++++++ 3 files changed, 112 insertions(+), 7 deletions(-) create mode 100644 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 diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs index 1293710eea8..86fc03052d9 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/geo-dashboard.hbs +++ b/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" }} diff --git a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/app.js b/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/app.js index ee61bd38228..d3f7c71c3df 100644 --- a/components/device-mgt/org.wso2.carbon.device.mgt.ui/src/main/resources/jaggeryapps/devicemgt/app/units/cdmf.unit.geo-dashboard/public/js/app.js +++ b/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 = "Attribution"; 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({ - position: "bottomright" - }).addTo(map); + // L.control.zoom({ + // position: "bottomright" + // }).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]; diff --git a/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 b/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 new file mode 100644 index 00000000000..678b295cb2d --- /dev/null +++ b/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); + }; +})();