//(function () {
angular.module('MobileWebLogistics')
.service('layersUI', function () {
var layersUIServ = this;
this.createList = function ($rootScope, $scope, $location) {
if ($scope.isFeatureService) {
var legendJsonLink = $scope.featureServUrl + "layers?f=json";
} else {
var legendJsonLink = $scope.featureServUrl + "legend?f=json";
}
//==code for secureSite==
if (window.sessionStorage.getItem('esriToken') != null) {
legendJsonLink += "&token=" + $rootScope.token;
}
//== end ==
var jqxhr = $.getJSON(legendJsonLink)
.done(function (data) {
$scope.mapLayers = data.layers;
$scope.toggleUI = "";
$scope.toggleUI = '<div class="labelGroupTitle" id = "baseMap" style="padding-left:10px; height:47px;line-height: 30px;">' +
'<label for="baseMap">Basemap</label>' +
'<div class="layerCheck">' +
'<input type="checkbox" value="None" id="baseMapCheck" name="check" checked ng-click="toggleOpacity(\'baseMapTransparency\', $event)"/>' +
'<label for="baseMapCheck"></label>' +
'</div>' +
'<div id="layerArea"><input type="range" min=0 max=100 value="50" id="baseMapTransparency" ng-model="baseMapTransparency" class="transparencyBar" ng-change="showVal(\'baseMapTransparency\')" /></div>' +
'</div>';
$scope.toggleUI += '<div class="labelGroupTitle" id = "gpLayers" style="padding-left:10px; height:47px;line-height: 30px;">' +
'<label for="Transparency">Overlay Transparency</label>' +
'<div class="layerCheck">' +
'<input type="checkbox" value="None" id="baseMapCheck" name="check" checked ng-click="toggleOpacity(\'baseMapTransparency\', $event)"/>' +
'</div>' +
'<div id="layerArea"><input type="range" min=0 max=100 value="60" id="overlayTransparency" ng-model="overlayTransparency" class="transparencyBar" ng-change="showVal(\'overlayTransparency\')" /></div>' +
'</div>';
var layerLegend = [];
try {
if ($scope.isFeatureService) {
var numOfLayers = data.layers[data.layers.length - 1].id + 1;
} else {
var numOfLayers = data.layers[data.layers.length - 1].layerId + 1;
}
} catch (err) {
location.reload();
}
layerLegend.length = numOfLayers;
for (var i = 0; i < data.layers.length; i++) { //data.layers.length
if ($scope.isFeatureService) {
// no legend endpoint available
// convert each symbol JSON to a symbol class, construct a div and use dojo/gfx to create the symbol icon
// TODO: test with annotation layers
var lnametxt = data.layers[i].name;
var lname = lnametxt.split(' ').join('_').replace('/', '').replace('&', 'and').replace(/'/g, "");
var lyrLegend = data.layers[i].drawingInfo;
var legendList = "";
var uniqueValues = lyrLegend.renderer.type == "uniqueValue" ? true : false;
var classBreaks = lyrLegend.renderer.type == "classBreaks" ? true : false;
if (data.layers[i].name == $scope.parcelLyrName) {
legendList = "<img style='width:20px;' src='img/parcel.png'> <br />";
layerLegend[data.layers[i].id] = '<div class="subLegend" id="' + lname + 'LegendDiv" style="display:none">' + legendList + '</div>';
} else if (uniqueValues || classBreaks) {
let rendererKey = uniqueValues == true ? "uniqueValueInfos" : "classBreakInfos";
layerLegend[data.layers[i].id] = '<div class="subLegend" style="display:none">';
for (var k = 0; k < lyrLegend.renderer[rendererKey].length; k++) {
var htmlElement = layersUIServ.createLayerIcon($scope, lyrLegend.renderer[rendererKey][k].symbol);
legendList = htmlElement.innerHTML + " " + lyrLegend.renderer[rendererKey][k].label + "<br />";
layerLegend[data.layers[i].id] += legendList;
}
layerLegend[data.layers[i].id] += '</div>';
} else {
var htmlElement = layersUIServ.createLayerIcon($scope, lyrLegend.renderer.symbol);
legendList = htmlElement.innerHTML + " <br />";
layerLegend[data.layers[i].id] = '<div class="subLegend" id="' + lname + 'LegendDiv" style="display:none">' + legendList + '</div>';
}
} else {
var lnametxt = data.layers[i].layerName;
var lname = lnametxt.split(' ').join('_').replace('/', '').replace('&', 'and').replace(/'/g, "");
var lyrLegend = data.layers[i].legend;
var legendList = "";
for (var j = 0; j < lyrLegend.length; j++) {
if (data.layers[i].layerName == $scope.parcelLyrName) legendList += "<img style='width:20px;' src='img/parcel.png'> " + lyrLegend[j].label + "<br />";
else legendList += "<img style='width:20px;' src='data:image/png;base64," + lyrLegend[j].imageData + "'> " + lyrLegend[j].label + "<br />";
}
layerLegend[data.layers[i].layerId] = '<div class="subLegend" id="' + lname + 'LegendDiv" style="display:none">' + legendList + '</div>';
}
}
var layerList = [];
var labelGroupDiv = "none";
var labelSubGroupDiv = "none";
$scope.initLayerNamesArray = new Array();
$scope.totalLayerCt = $scope.gisServStrucData.layers.length;
for (var i = 0; i < $scope.gisServStrucData.layers.length; i++) {
var lnametxt = $scope.gisServStrucData.layers[i].name;
var minS = $scope.gisServStrucData.layers[i].minScale;
if ($scope.gisServStrucData.layers[i].effectiveMinScale) {
minS = $scope.gisServStrucData.layers[i].effectiveMinScale;
}
var maxS = $scope.gisServStrucData.layers[i].maxScale;
var lname = lnametxt.split(' ').join('_').replace('/', '').replace('&', 'and').replace('(', '_').replace(')', '').replace(/'/g, "");;
//capture the layer id from the service instead of the loop, this allows publishers to set their own unique ids in the map service if needed
var lid = $scope.gisServStrucData.layers[i].id;
var defaultVisibility = $scope.gisServStrucData.layers[i].defaultVisibility;
if ($scope.gisServStrucData.layers[i].type == "Group Layer") {
if (labelGroupDiv == "open") {
layerList[i] = '</div><div class="labelGroupTitle"><div class="colorKey" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/down.png"></div><label id="gp_' + lname + '">' + lnametxt + '</label></div><div class="gpContent" id="g"p_' + lname + 'Content">';
} else {
layerList[i] = '<div class="labelGroupTitle"><div class="colorKey" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/down.png"></div><label id="gp_' + lname + '">' + lnametxt + '</label></div><div class="gpContent" id="gp_' + lname + 'Content">';
labelGroupDiv = "open";
}
} else if ($scope.gisServStrucData.layers[i].type == "Feature Layer" || $scope.gisServStrucData.layers[i].type == "Annotation Layer" || $scope.gisServStrucData.layers[i].type == "Annotation SubLayer") {
//excludeLayers
var exLayer = "No";
if ($scope.excludeLayers.length > 0) {
for (var l = 0; l < $scope.excludeLayers.length; l++) {
if ($scope.excludeLayers[l] == lname) {
exLayer = "Yes";
l = $scope.initLayers.length; //to exit for loop
}
}
}
if (exLayer == "No") {
var valueToPush = new Array();
valueToPush[0] = lname;
valueToPush[1] = lid;
valueToPush[2] = minS;
valueToPush[3] = maxS;
$scope.checkboxList.push(valueToPush);
var defaultCheck = "";
if (defaultVisibility == true) {
defaultCheck = "checked";
if ($scope.gisServStrucData.layers[i].type != "Annotation Layer") {
$scope.initLayerNamesArray.push(lname);
if (lnametxt != $scope.parcelLyrName) { //parcel layer's original name in the map service
//$scope.initLayerIdsArray.push(lid); // moved to app.js for low speed internet environment
}
}
}
if ($scope.gisServStrucData.layers[i].type == "Feature Layer" || $scope.gisServStrucData.layers[i].type == "Annotation SubLayer") {
if ($scope.gisServStrucData.layers[i].type == "Feature Layer" && labelSubGroupDiv == "open") {
layerList[i] = '</div>';
labelSubGroupDiv = "close";
} else layerList[i] = '';
if ($scope.gisServStrucData.layers[i].type == "Feature Layer" && labelGroupDiv == "open" && $scope.gisServStrucData.layers[i].parentLayer == null) { //if layer is not in a group, close group div
layerList[i] = '</div>';
labelGroupDiv = "close";
}
if ($scope.gisServStrucData.layers[i].type == "Annotation SubLayer") {
layerList[i] += '<div class="labelTitle SubLayer" id="layerArea" >';
} else {
layerList[i] += '<div class="labelTitle" id="layerArea" >';
}
if ($scope.gisServStrucData.layers[i].parentLayer == null) { //if layer is not in a group
layerList[i] += '<div class="colorKey decIndent" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/right.png"></div>' +
'<label id="' + lname + '">' + lnametxt + '</label>' +
'<div class="layerCheck incIndent">' +
'<input type="checkbox" value="None" id="' + lname + 'Check" name="check" ng-click="toggleOpacity(\'' + lname + 'Transparency\', $event)" />' +
'<label for="' + lname + 'Check"></label>' +
'</div></div>';
} else {
layerList[i] += '<div class="colorKey" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/right.png"></div>' +
'<label id="' + lname + '">' + lnametxt + '</label>' +
'<div class="layerCheck">' +
'<input type="checkbox" value="None" id="' + lname + 'Check" name="check" ng-click="toggleOpacity(\'' + lname + 'Transparency\', $event)" />' +
'<label for="' + lname + 'Check"></label>' +
'</div></div>';
}
// the layerLegend dict was populated with the layer id set in the map service
// use this to set the layerList object and not the loop iteration count
if (layerLegend[lid]) {
layerList[i] += layerLegend[lid];
} else {
layerList[i] += '<div class="subLegend" id="' + lname + 'LegendDiv" style="display:none"></div>'
};
} else if ($scope.gisServStrucData.layers[i].type == "Annotation Layer") {
if (labelSubGroupDiv == "open") {
layerList[i] = '</div><div class="labelGroupTitle labelSubGroupTitle"><div class="colorKey" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/down.png"></div><label id="sgp_' + lname + '">' + lnametxt + '</label></div><div class="gpContent" id="sgp_' + lname + 'Content">';
} else {
layerList[i] = '<div class="labelGroupTitle labelSubGroupTitle"><div class="colorKey" ><img id= "pmImg" class="toggleImg" ng-click="toggleImg($event)" src="img/down.png"></div><label id="sgp_' + lname + '">' + lnametxt + '</label></div><div class="gpContent" id="sgp_' + lname + 'Content">';
labelSubGroupDiv = "open";
}
}
} else {
layerList[i] = ''
};
} else {
layerList[i] = ''
};
}
for (var i = 0; i < layerList.length; i++) {
$scope.toggleUI += layerList[i];
}
$scope.myVal = $scope.toggleUI; //assign toggle UI
// trigger compiling toggleUI and set initial visible checkboxes
$scope.$apply(); // it makes toggleUI to be compiled
setTimeout(function () {
$scope.initToggle(); // it sets initial checkboxes
}, 800);
// add small delay to allow layer checkboxes to render (fix checks not showing in checkboxes in Chrome)
setTimeout(function () {
$scope.updateVisEye();
}, 500);
});
}
this.createLayerIcon = function ($scope, symbol) {
var esriSymbol = $scope.symbolJsonUtils.fromJson(symbol);
var htmlElement = $scope.domConstruct.create("div");
var mySurface = $scope.gfx.createSurface(htmlElement, 20, 20);
var descriptors = $scope.symbolJsonUtils.getShapeDescriptors(esriSymbol);
var shape = mySurface.createShape(descriptors.defaultShape).setFill(descriptors.fill).setStroke(descriptors.stroke);
shape.applyTransform({
dx: 10,
dy: 10
});
return htmlElement;
}
this.toggleImg = function (event) {
$header = $(event.target).parent().parent();
// getting the next element
$content = $header.next();
// open up the content needed - toggle the slide- if visible, slide up, if not slidedown.
$content.slideToggle(100, function () {
return $content.is(":visible") ? $(event.target).attr("src", "img/down.png") : $(event.target).attr("src", "img/right.png");
});
}
});