Select Git revision
wot-controllers.js
Forked from
clients / Cesium-grp / Cesium
1447 commits behind the upstream repository.
-
Benoit Lavenier authoredBenoit Lavenier authored
wot-controllers.js 8.76 KiB
angular.module('cesium.map.wot.controllers', ['cesium.services', 'cesium.map.services'])
.config(function($stateProvider, PluginServiceProvider, csConfig) {
'ngInject';
var enable = csConfig.plugins && csConfig.plugins.es;
if (enable) {
PluginServiceProvider
.extendState('app.wot_lookup', {
points: {
'filter-buttons': {
templateUrl: "plugins/map/templates/wot/lookup_extend.html"
}
}
});
$stateProvider
.state('app.view_wot_map', {
url: "/wot/map?c¢er",
views: {
'menuContent': {
templateUrl: "plugins/map/templates/wot/view_map.html",
controller: 'MapWotViewCtrl'
}
},
data: {
silentLocationChange: true
}
});
}
})
// [NEW] Manage events from the page #/app/wot/map
.controller('MapWotViewCtrl', function($scope, $rootScope, $q, $translate, $state, $stateParams, $filter, $templateCache, $interpolate, $timeout, $ionicHistory,
esGeo, UIUtils, MapUtils, mapWot, leafletData, $location) {
'ngInject';
var
// Create a hidden layer, to hold search markers
markersSearchLayer,
icons= {
member: {
type: 'awesomeMarker',
icon: 'person',
markerColor: 'blue'
},
pending: {
type: 'awesomeMarker',
icon: 'clock',
markerColor: 'lightgreen',
iconColor: 'gray'
},
wallet: {
type: 'awesomeMarker',
icon: 'key',
markerColor: 'lightgray'
},
group: {
type: 'awesomeMarker',
icon: 'person-stalker',
markerColor: 'green'
},
registry: {
type: 'awesomeMarker',
icon: 'person-stalker', // TODO
markerColor: 'green' // TODO
}
};
$scope.loading = true;
$scope.mapId = 'map-wot-' + $scope.$id;
$scope.map = MapUtils.map({
layers: {
overlays: {
member: {
type: 'featureGroup',
name: 'MAP.WOT.VIEW.LAYER.MEMBER',
visible: true
},
pending: {
type: 'featureGroup',
name: 'MAP.WOT.VIEW.LAYER.PENDING',
visible: true
},
wallet: {
type: 'featureGroup',
name: 'MAP.WOT.VIEW.LAYER.WALLET',
visible: true
}
}
},
bounds: {},
markers: {},
loading: true
});
// [NEW] When opening the view
$scope.enter = function(e, state) {
if ($scope.loading) {
// Load the map (and init if need)
$scope.loadMap()
.then($scope.load);
}
else {
// Make sur to have previous center coordinate defined in the location URL
$scope.updateLocationHref();
}
};
$scope.$on('$ionicView.enter', $scope.enter);
$scope.loadMap = function() {
return leafletData.getMap($scope.mapId).then(function(map) {
if (!$scope.map.loading) return map; // already loaded
// Add a refresh button
if (!UIUtils.screen.isSmall()) {
L.easyButton('icon ion-refresh', function(btn, map){
return $scope.load(map);
},
{position: 'topright'}
).addTo(map);
}
// Add loading control
L.Control.loading({
position: 'topright',
separate: true
}).addTo(map);
// Add localize me control
MapUtils.control.localizeMe()
.addTo(map);
// Add search control
markersSearchLayer = L.layerGroup({visible: false});
var searchTip = $interpolate($templateCache.get('plugins/map/templates/wot/item_search_tooltip.html'));
MapUtils.control.search({
layer: markersSearchLayer,
propertyName: 'title',
buildTip: function (text, val) {
return searchTip(val.layer.options);
}
}).addTo(map);
// Add marker cluster layer
var extractMarkerLayer = function(marker) {
return marker.options && marker.options.layer;
};
var markerClusterLayer = L.markerClusterGroup({
disableClusteringAtZoom: MapUtils.constants.LOCALIZE_ZOOM,
maxClusterRadius: 65,
showCoverageOnHover: false,
iconCreateFunction: function (cluster) {
var countByLayer = _.countBy(cluster.getAllChildMarkers(), extractMarkerLayer);
var mainLayer = countByLayer.member ? 'member' : (countByLayer.pending ? 'pending' : 'wallet');
var childCount = cluster.getChildCount();
var c = ' marker-cluster-';
if (childCount < 10) {
c += 'small';
} else if (childCount < 100) {
c += 'medium';
} else {
c += 'large';
}
return L.divIcon({ html: '<div><span>' + childCount + '</span></div>', className: mainLayer + ' marker-cluster' + c, iconSize: new L.Point(40, 40) });
}
});
map.eachLayer(function(layer) {
// Add capabilities of 'featureGroup.subgroup', if layer is a group
if (layer.addLayer){
angular.extend(layer, L.featureGroup.subGroup(markerClusterLayer));
}
});
markerClusterLayer.addTo(map);
$scope.map.loading = false;
return map;
});
};
// Load markers data
$scope.load = function(map) {
if (!map) {
return leafletData.getMap($scope.mapId).then(function(map) {
return $scope.load(map); // loop with the map object
});
}
$scope.loading = true;
// Show loading indicator
map.fire('dataloading');
var options = {
fields: {
description: !UIUtils.screen.isSmall()
}
};
// Load wot data
return mapWot.load(options)
.then(function(res) {
var markers = {};
// Clean search layer
markersSearchLayer.clearLayers();
if (res && res.length) {
var formatPubkey = $filter('formatPubkey');
var markerTemplate = $templateCache.get('plugins/map/templates/wot/popup_marker.html');
_.forEach(res, function (hit) {
var type = hit.pending ? 'pending' : (hit.uid ? 'member' : 'wallet');
var shortPubkey = formatPubkey(hit.pubkey);
var marker = {
layer: type,
icon: icons[type],
opacity: hit.uid ? 1 : 0.7,
title: hit.name + ' | ' + shortPubkey,
lat: hit.geoPoint.lat,
lng: hit.geoPoint.lon,
getMessageScope: function () {
var scope = $scope.$new();
scope.hit = hit;
return scope;
},
focus: false,
message: markerTemplate
};
var id = (hit.uid ? (hit.uid + ':' + hit.pubkey) : hit.pubkey).replace(/-/g, '_');
markers[id] = marker;
// Create a search marker (will be hide)
var searchText = hit.name + ((hit.uid && hit.uid != hit.name) ? (' | ' + hit.uid) : '') + ' | ' + shortPubkey;
var searchMarker = angular.merge({
type: type,
opacity: 0,
icon: L.divIcon({
className: type + ' ng-hide',
iconSize: L.point(0, 0)
})
}, {title: searchText, pubkey: hit.pubkey, uid: hit.uid, name: hit.name, pending: hit.pending});
markersSearchLayer.addLayer(new L.Marker({
lat: hit.geoPoint.lat,
lng: hit.geoPoint.lon
},
searchMarker));
});
}
$scope.map.markers = markers;
$scope.loading = false;
// hide loading indicator
map.fire('dataload');
});
};
$scope.updateLocationHref = function(centerHash) {
// removeIf(device)
var params = $location.search() || {};
if (!params.c || !MapUtils.center.isDefault($scope.map.center)) {
centerHash = centerHash || '{0}:{1}:{2}'.format($scope.map.center.lat.toFixed(4), $scope.map.center.lng.toFixed(4), $scope.map.center.zoom);
$location.search({ c: centerHash}).replace();
}
// endRemoveIf(device)
};
// removeIf(device)
// Update the browser location, to be able to refresh the page
$scope.$on("centerUrlHash", function(event, centerHash) {
if (!$scope.loading) {
return $timeout(function() {
$scope.updateLocationHref(centerHash);
}, 300);
}
});
// endRemoveIf(device)
});