adding location history to map view

revert-dabc3590
kamidu 8 years ago
parent 05e2cb7bb8
commit 234157b6f5

@ -335,11 +335,12 @@
{{#if device.location}} {{#if device.location}}
<div id="device-location" <div id="device-location"
data-lat="{{device.location.latitude}}" data-lat="{{device.location.latitude}}"
data-long="{{device.location.longitude}}"> data-long="{{device.location.longitude}}"
data-locations = "{{device.locationHistory}}">
</div> </div>
<br/> <br/>
<a class="padding-left" target="_blank" <a class="padding-left" target="_blank"
href="{{portalUrl}}/portal/dashboards/geo-dashboard/?GLOBAL-STATE={{deviceId}},{{deviceType}}"> href="{{portalUrl}}/portal/dashboards/geo-dashboard/?GLOBAL-STATE={{anchor}}">
<span class="fw-stack"> <span class="fw-stack">
<i class="fw fw-circle-outline fw-stack-2x"></i> <i class="fw fw-circle-outline fw-stack-2x"></i>
<i class="fw fw-map-location fw-stack-1x"></i> <i class="fw fw-map-location fw-stack-1x"></i>

@ -17,7 +17,7 @@
*/ */
function onRequest(context) { function onRequest(context) {
// var log = new Log("device-view.js"); // var log = new Log("device-view.js");
var deviceType = context["uriParams"]["deviceType"]; var deviceType = context["uriParams"]["deviceType"];
var deviceId = request.getParameter("id"); var deviceId = request.getParameter("id");
var deviceViewData = {}; var deviceViewData = {};
@ -32,7 +32,7 @@ function onRequest(context) {
var filteredDeviceData = response["content"]; var filteredDeviceData = response["content"];
// creating deviceView information model from filtered device data // creating deviceView information model from filtered device data
var viewModel = {}; var viewModel = {};
if (filteredDeviceData["type"]) { if (filteredDeviceData["type"]) {
viewModel["type"] = filteredDeviceData["type"]; viewModel["type"] = filteredDeviceData["type"];
@ -194,7 +194,7 @@ function onRequest(context) {
if (!filteredDeviceData["initialDeviceInfo"] && !filteredDeviceData["latestDeviceInfo"]) { if (!filteredDeviceData["initialDeviceInfo"] && !filteredDeviceData["latestDeviceInfo"]) {
viewModel["deviceInfoAvailable"] = false; viewModel["deviceInfoAvailable"] = false;
} }
viewModel.locationHistory = stringify(filteredDeviceData["locationHistory"]);
deviceViewData["device"] = viewModel; deviceViewData["device"] = viewModel;
} else if (response["status"] == "unauthorized") { } else if (response["status"] == "unauthorized") {
deviceViewData["deviceFound"] = true; deviceViewData["deviceFound"] = true;
@ -213,7 +213,6 @@ function onRequest(context) {
deviceViewData["autoCompleteParams"] = autoCompleteParams; deviceViewData["autoCompleteParams"] = autoCompleteParams;
deviceViewData["portalUrl"] = devicemgtProps['portalURL']; deviceViewData["portalUrl"] = devicemgtProps['portalURL'];
deviceViewData["deviceId"] = deviceId; deviceViewData["anchor"] = encodeURI(JSON.stringify({ "device" : { "id" : deviceId, "type" : deviceType}}));
deviceViewData["deviceType"] = deviceType;
return deviceViewData; return deviceViewData;
} }

@ -22,15 +22,27 @@ function loadLeafletMap() {
var deviceLocationID = "#device-location", var deviceLocationID = "#device-location",
lat = $(deviceLocationID).data("lat"), lat = $(deviceLocationID).data("lat"),
long = $(deviceLocationID).data("long"), long = $(deviceLocationID).data("long"),
locations = $(deviceLocationID).data("locations"),
container = "device-location", container = "device-location",
zoomLevel = 13, zoomLevel = 13,
tileSet = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png", tileSet = "https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png",
attribution = "&copy; <a href='https://openstreetmap.org/copyright'>OpenStreetMap</a> contributors"; attribution = "&copy; <a href='https://openstreetmap.org/copyright'>OpenStreetMap</a> contributors";
if (lat && long) { if (locations) {
var locationSets = locations.locations;
map = L.map(container).setView([lat, long], zoomLevel); map = L.map(container).setView([lat, long], zoomLevel);
L.tileLayer(tileSet, {attribution: attribution}).addTo(map); L.tileLayer(tileSet, {attribution: attribution}).addTo(map);
L.marker([lat, long]).addTo(map).bindPopup("Device is here...").openPopup();
for(var i = 0; i < locationSets.length; i++){
var m = L.marker(locationSets[i]).addTo(map).bindPopup(new Date(locations.times[i].time).toISOString())
m.on('mouseover', function (e) {
this.openPopup();
});
m.on('mouseout', function (e) {
this.closePopup();
});
}
$("#map-error").hide(); $("#map-error").hide();
$("#device-location").show(); $("#device-location").show();

Loading…
Cancel
Save