My Problem is that the marker element is displayed behind the svg. element. I need the marker element to be always on top of the actual svg element. The marker element is defined in the svg file.
Here is what I am doing:
.controller('MusterCtrl', function($scope, $localStorage, $cordovaVibration) {
console.log("controller called");
var s = Snap("#svg");
Snap.load("svgs/"+ $localStorage.svg +".svg", function(data){
s.append(data);
s.select("#m_" + $localStorage.marker).addClass("marked").addClass("fixed");
});
$scope.$on('$ionicView.enter', function(e){
console.log("View geentert!");
s.select("#m_" + $localStorage.marker).addClass("marked");
});
$scope.$watch(function(){ return $localStorage.svg;},
function(newVal, oldVal){
s.clear();
Snap.load("svgs/" + newVal + ".svg", function(data){
s.append(data);
s.select("#m_" + $localStorage.marker).addClass("marked");
});
}
);
$scope.$watch(function(){ return $localStorage.marker;},
function(newVal, oldVal){
console.log("newVal", newVal);
s.select("#m_" + oldVal).removeClass("marked");
s.select("#m_" + newVal).addClass("marked");
console.log("oldVal", oldVal);
}
);
$scope.up = function(){
var currentMarkedEle = document.getElementById("m_" + ($localStorage.marker + 1));
if(currentMarkedEle === null){
$localStorage.currMaxMarker = $localStorage.marker;
$localStorage.marker = 1;
} else {
$localStorage.marker++;
}
};
$scope.down = function(){
$cordovaVibration.vibrate(50);
var currentMarkedEle = document.getElementById("m_" + ($localStorage.marker - 1));
if(currentMarkedEle === null){
$localStorage.marker = $localStorage.currMaxMarker;
} else {
$localStorage.marker--;
}
};
getHeight = function(){
var navbarHeight = document.getElementsByTagName('ion-header-bar')[0].clientHeight;
var tabHeight = document.getElementsByClassName('tab-nav tabs')[0].clientHeight;
return parseInt(window.innerHeight - navbarHeight - tabHeight) + 'px';
};
getWidth = function(){
return window.innerWidth + 'px';
};
$scope.style = { height: getHeight(), width: getWidth()};
});