I have a web app that will draw a polyline for each user (tracks movement), and I'd like to incorporate some functionality that allows the web app user to 'focus' on a certain user by changing the color of the polyline. It will have to first change all the polylines to red, and then change the selected polyline to blue. I think this is best to avoid focusing on one line, then trying to focus on another and having them both blue.
I'm really not sure how to implement this, but I have functionality that returns a user id when the name is pressed. I just need to iterate over each object (each user's polyline) to change them to red first, then change the specific one to blue. Here is some code below. This is a condensed version of my code.
function User(id) {
this.id = id;
this.locations = [];
this.mark = 0;
this.getId = function() {
return this.id;
};
this.addLocation = function(latitude, longitude) {
this.locations[this.locations.length] = new google.maps.LatLng(latitude, longitude);
};
var polyline;
this.drawPolyline = function(loc) {
polyline = new google.maps.Polyline({
map: map,
path: loc,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
polyline.setMap(map);
};
this.removePolyline = function() {
if (polyline != undefined) {
polyline.setMap(null);
}
}
this.get_user_info = function(user_id) {
var datastr = 'id=' + user_id;
$.ajax({
type: "POST",
url: 'user_api.php',
data: datastr,
dataType: 'json',
success: function(data){
var phone_id = data[0];
var leftDiv = document.createElement("div"); //Create left div
leftDiv.id = "left"; //Assign div id
leftDiv.setAttribute("style", "float:left; width:66.5%; line-height: 26px; text-align:left; font-size:12pt; padding-left:8px; height:26px;"); //Set div attributes
leftDiv.style.background = divColor;
//user_name = document.createTextNode(fullName + ' '); //Set user name
a = document.createElement('a');
a.href ="javascript:setFocus('" + phone_id + "');";
a.innerHTML = fullName + ' ';
leftDiv.appendChild(a);
}
});
}
}
function setFocus(phone_id) {
alert(phone_id);
}
function Users() {
this.users = {};
this.createUser = function(id) {
this.users[id] = new User(id);
return this.users[id];
};
this.getUser = function(id) {
return this.users[id];
};
this.removeUser = function(id) {
var user = this.getUser(id);
delete this.users[id];
return user;
};
}
var users = new Users();
Currently you are not storing the polyline inside the User-object, you should first do it to make the line accessible later:
this.drawPolyline = function(loc) {
this.polyline = new google.maps.Polyline({//<--note the this
map: map,
path: loc,
strokeColor: "#FF0000",
strokeOpacity: 1.0,
strokeWeight: 2
});
this.polyline.setMap(map);
};
now you will be able to higlight a line:
Users.prototype.highlightLine=function(id)
{
for(var k in this.users)
{
this.users[k].polyline.setOptions({strokeColor:(id===k)?'blue':'red'});
}
}
//use it
users.highlightLine(5)//will highlight the line for user with id 5