Skip to content

Instantly share code, notes, and snippets.

/fleetmapCtrl.js

Created June 14, 2016 17:42
Show Gist options
  • Star 0 You must be signed in to star a gist
  • Fork 0 You must be signed in to fork a gist
  • Save anonymous/9df7bc7c54a09c91dd60cd009ba9ff91 to your computer and use it in GitHub Desktop.
Save anonymous/9df7bc7c54a09c91dd60cd009ba9ff91 to your computer and use it in GitHub Desktop.
Download ZIP
Raw
fleetmapCtrl.js
(function(angular){
'use strict';
/**
* loads the d3 colors from a csv file
* @returns {Array}
*/
function loadColorPalettes(){
var colorPalettes = [];
// load from file
d3.csv("test/json/d3_color_data.csv", function(data) {
data.forEach(function(d) {
var color = d3.scale.linear().domain(d.domainList.split(',').map(parseFloat)).range(d.colorList.split(',').map(function(x){return x.trim();}));
var tempColor = {name: d.colorName, color : color};
colorPalettes.push(tempColor);
});
});
return colorPalettes;
}
angular.module("cmat.controllers")
.controller('fleetMapCtrl', [
'$scope','$http','$q','$route','$routeParams','d3','leaflet','leafletData','leafletMarkerEvents','leafletMapEvents','$location','OwfService', 'ConfigService',
function($scope, $http, $q, $route, $routeParams, d3, L, leafletData,leafletMarkerEvents, leafletMapEvents, $location, OwfService, ConfigService) {
$scope.palettes = loadColorPalettes();
var palette;
var paletteByName = {};
$scope.routeParams = $routeParams;
$scope.colorOf = function(d) {
return $scope.palette ? $scope.palette.color(d.status) : '#000';
};
$scope.$watchCollection('routeParams', function(p){
$route.updateParams(p);
});
var top = $scope.top = $('activeMarkerPanelContent').height();
var side = $scope.side = $('#activeMarkerPanelContent').width();
// $http.get("api/watchbox/network", {params:{unitId: "n9"}}).success(function(graph) {
// $scope.data = graph;
// $scope.network($scope.data);
// });
d3.json("api/watchbox/network?unitId=9", function(error, graph) {
$scope.data = graph;
$scope.network($scope.data);
});
$scope.mapData = null;
$scope.markers = {};
$scope.currentZoomLevel = 9;
$scope.flying = false;
$http.get("api/geospatial/mapdata").then(
function(response) {
console.log("Map Data Fetched");
$scope.mapData = response.data;
//console.log(mapData);
//console.log(typeof(mapData));
$scope.markers = getMarkers($scope.mapData[$scope.currentZoomLevel.toString()]);
}
);
// redirect
function openNewView(e) {
var id = e.target.feature.id;
var name = e.target.feature.properties.name;
var icicleData = {
"id": id,
"name": name,
"palette": $scope.palette.name
};
if(OwfService.isRunningInOWF) {
OwfService.launchWidget("Icicle", icicleData);
} else {
//redirect to /drilldown/?id=' + id + '&name=' + name
$location.path('/drilldown/')
.search(icicleData);
}
$scope.$apply();
}
var reticlePart1 = '<svg viewBox="0 0 100 100" version="1.1" xmlns="http://www.w3.org/2000/svg"><circle cx="50" cy="50" r="45" class="status-indicator-arc"/><g class="mil-symbol" transform="scale(0.25) translate(100, 100)">';
var reticlePart2 = '</g></svg>';
//takes in a symbol identification code and returns an svg string with the appropriate symbol and status halo
function makeSVG(sidc) {
sidc = new MS.symbol(sidc,{size: 100}).getMarker().XML;
sidc = sidc.substring(sidc.indexOf('>')+1, sidc.indexOf('</svg>'));
return reticlePart1.concat(sidc).concat(reticlePart2);
}
var basemapUrl = getValue(ConfigService.config, "basemap.url");
var hillshadeUrl = getValue(ConfigService.config, "hillshade.url");
angular.extend($scope, {
center: {
lat: 33.418878,
lng: -82.140265,
zoom: 9
},
gordon: {
lat: 33.418878,
lng: -82.140265,
zoom: 9
},
kabul: {
lat: 34.526358,
lng: 69.185062,
zoom: 10
},
layers: {
baselayers: {
mapbox_dark: {
visible: true,
name: 'Mapbox Dark',
/*url: 'https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token={accessToken}',*/
url: basemapUrl,
type: 'xyz',
layerOptions: {
showOnSelector: false,
attribution: '&copy <a href="http://gtri.gatech.edu">GTRI</a> 2016. All Rights Reserved | Map data &copy; <a href="http://openstreetmap.org">OpenStreetMap</a> contributors, <a href="http://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, Imagery &copy <a href="http://mapbox.com">Mapbox</a>',
maxZoom: 18,
minZoom: 2,
id: 'mapbox.dark',
accessToken: 'pk.eyJ1IjoiYmRldmVyZWF1eDMiLCJhIjoiY2lrcjU2dW10MDNzdHRza2t2bnFpb253dSJ9.CyF_3udcWDYXgwNCXP7kFA'
}
}
},
overlays: {
hillshade: {
name: 'Hillshade Europa',
type: 'wms',
url: hillshadeUrl,
layerOptions: {
layers: 'europe_wms:hs_srtm_europa',
format: 'image/png',
opacity: 0.25,
attribution: 'Hillshade layer by GIScience http://www.osm-wms.de',
crs: L.CRS.EPSG900913
}
}
}
},
events: {
markers: {
enable: leafletMarkerEvents.getAvailableEvents(),
logic: 'emit'
},
map: {
enable: leafletMapEvents.getAvailableMapEvents(),
logic: 'emit'
}
}
});
$scope.activeMarker = null;
$scope.$on("leafletDirectiveMarker.fleetMap.click", function(event, args){
leafletData.getMap("fleetMap").then(function(map) {
map.panTo([$scope.markers[args.modelName].lat, $scope.markers[args.modelName].lng], {animate: true, duration: 1.2});
});
if($scope.activeMarker !== null) {
if($scope.activeMarker !== $scope.markers[args.modelName]) {//we're clicking something different from the active marker
$scope.activeMarker.isSelected = false;
$scope.activeMarker.icon.className = "reticle reticle-small " + $scope.activeMarker.status;
showActiveMarker(args.modelName);
}
//else if it's not different, we do check if it has a zoom target and zoom appropriately
else if($scope.activeMarker.hasOwnProperty('zoomTarget')) {//we zoom in to the center of its children
$scope.center.lat = $scope.markers[args.modelName].lat;
$scope.center.lng = $scope.markers[args.modelName].lng;
$scope.center.zoom = parseInt($scope.markers[args.modelName].zoomTarget);
}
$scope.$broadcast("geoFlyTo", $scope.activeMarker);
}
else {//it is null - i.e. we don't have an active marker
showActiveMarker(args.modelName);
$scope.$broadcast("geoFlyTo", $scope.markers[args.modelName]);
}
});
/* This is good to go*/
$scope.$on("leafletDirectiveMap.fleetMap.click", function(event, args) {
console.log("map click registered");
if($scope.activeMarker !== null) {
$scope.activeMarker.isSelected = false;
$scope.activeMarker.icon.className = "reticle reticle-small " + $scope.activeMarker.status;
$scope.activeMarker = null;
}
});
//This is where we need to decide how to do our clustering
/*$scope.$on("leafletDirectiveMap.fleetMap.zoomend", function(event, args) {
//alert("Zoom level is "+$scope.center.zoom);
console.log(""+args.model.lfCenter.zoom);// higher number -> closer zoom level
if($scope.mapData !== null) {
if($scope.mapData.hasOwnProperty(args.model.lfCenter.zoom.toString()) && args.model.lfCenter.zoom != $scope.currentZoomLevel) {
$scope.currentZoomLevel = args.model.lfCenter.zoom;
$scope.markers = getMarkers($scope.mapData[args.model.lfCenter.zoom.toString()]);
}
}
});*/
function showActiveMarker(markerName) {
$scope.activeMarker = $scope.markers[markerName];
$scope.activeMarker.isSelected = true;
var id = $scope.activeMarker.id.replace("n", "");
d3.json("api/watchbox/network?unitId="+parseInt(id), function(error, graph) {
$scope.network.updateData(graph);
});
$scope.markers[markerName].icon.className = "reticle reticle-large " + $scope.markers[markerName].status;
}
//return all units at a particular level
function getMarkers(zoomLevelObject) {
var units = {};
for(var command in zoomLevelObject) {
if(zoomLevelObject.hasOwnProperty(command)) {
for(var id in zoomLevelObject[command]["units"]) {
if(zoomLevelObject[command]["units"].hasOwnProperty(id)) {
console.log(typeof(id))
console.log(id);
units[id] = zoomLevelObject[command]["units"][id];
units[id]["icon"] = {
type: 'div',
className: 'reticle reticle-small ' + units[id]["status"],
html: makeSVG(units[id]["sidc"]),
iconSize: [75, 75]
};
units[id]["isSelected"] = false;
}
}
}
}
return units;
}
$scope.$watch('center.zoom', function(newVal, oldVal){
if($scope.mapData !== null) {
if($scope.mapData.hasOwnProperty(parseInt(newVal)) && newVal != $scope.currentZoomLevel) {
console.log(newVal);
console.log(typeof(newVal));
console.log(mapData);
$scope.currentZoomLevel = newVal;
if($scope.flying) {//if flying we don't get new markers - let flyTo do it
$scope.flying = false;
}
else {
$scope.markers = getMarkers($scope.mapData[parseInt(newVal)]);
}
}
}
});
$scope.$watch('flyTo', function(newVal, oldVal){
if(typeof(newVal) !== 'string') {
//console.log(newVal);
if (newVal !== oldVal){
flyTo(newVal);
}
}
});
var oldCytoVal = {};
$scope.$on('cytoFlyTo', function(event, newVal){
if(typeof(newVal) !== 'string') {
//console.log(newVal);
if (newVal !== oldCytoVal){
flyTo(newVal);
oldCytoVal = newVal;
}
}
});
function isUndefinedOrNull(val) {
if (val === "" || val === null || val === "undefined") {
return true;
}
}
function flyTo(newVal) {
$scope.flying = true;
$scope.center.zoom = newVal.zoomLevel;
//console.log(id);
//console.log(typeof(id));
if($scope.activeMarker !== null) {
if($scope.activeMarker !== $scope.markers[newVal.id]) {//flying To something different than the active marker
$scope.activeMarker.isSelected = false;
$scope.activeMarker.icon.className = "reticle reticle-small " + $scope.activeMarker.status;
$scope.activeMarker = null;
}
}
console.log(newVal);
console.log(typeof(newVal));
if (isUndefinedOrNull(newVal) === true) {
return;
}else {
$scope.markers = getMarkers($scope.mapData[newVal.zoomLevel.toString()]);
}
showActiveMarker(newVal.id);
leafletData.getMap("fleetMap").then(function(map) {
map.panTo([$scope.activeMarker.lat, $scope.activeMarker.lng], {animate:true, duration:1.2});
});
}
}
]);
})(angular);
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment