use custom marker

This commit is contained in:
j 2016-01-26 15:50:40 +05:30
parent 45b9c8036d
commit 5a3a1d7cfb
2 changed files with 111 additions and 19 deletions

View file

@ -5,3 +5,19 @@
bottom: 0px;
top: 0px;
}
#users {
position: absolute;
right: 8px;
}
.person {
border: 2px solid rgb(255, 255, 255);
border-radius: 4px;
color: rgb(255, 255, 255);
cursor: pointer;
font-family: sans-serif;
font-size: 12px;
height: 12px;
line-height: 12px;
padding: 2px 4px 4px;
margin-bottom: 4px;
}

View file

@ -4,7 +4,9 @@ window.app = (function() {
foundLocation = false,
map,
marker,
username = 'Anonymous',
username = localStorage.username || 'Anonymous',
color = randomColor(),
userlist,
users = [],
zoomLevel = 23;
@ -15,13 +17,20 @@ window.app = (function() {
var user = {
id: data.id,
name: data.name,
color: randomColor()
color: data.color,
};
if (!user.color) {
user.color = [255, 0, 0];
}
users.push(user);
if(coords) {
update({
name: username,
color: color,
coords: coords
});
}
updateUserList();
return user;
}
@ -32,7 +41,9 @@ window.app = (function() {
}
function initMap() {
navigator.geolocation.watchPosition(updateLocation, locationError);
navigator.geolocation.watchPosition(updateLocation, locationError, {
enableHighAccuracy: true
});
}
function joinRoom(room) {
@ -55,6 +66,7 @@ window.app = (function() {
} else {
initMap();
}
updateUserList();
}
function locationError(err) {
@ -66,12 +78,21 @@ window.app = (function() {
}
function randomColor() {
var letters = '0123456789ABCDEF'.split('');
var color = '#';
for (var i = 0; i < 6; i++ ) {
color += letters[Math.floor(Math.random() * (letters.length-1))];
}
return color;
var colors = [
[128, 0, 0],
[0, 128, 0],
[0, 0, 128],
[128, 128, 0],
[0, 128, 128],
[128, 0, 128],
[128, 64, 0],
[64, 128, 0],
[0, 128, 64],
[0, 64, 128],
[64, 0, 128],
[128, 0, 64]
];
return colors[Math.floor(Math.random() * 12)];
}
function randomName() {
@ -111,7 +132,6 @@ window.app = (function() {
};
that.ws.onmessage = function (event) {
var data = JSON.parse(event.data);
console.log(data);
if (data[0] == 'leave') {
removeUser(data[1]);
} else if (data[0] == 'update') {
@ -131,10 +151,15 @@ window.app = (function() {
}
function updateLocation(loc) {
console.log(loc);
coords = [loc.coords.latitude, loc.coords.longitude];
var options = {
title: username
title: username,
icon: L.icon({
iconUrl: MarkerIcon({
label: username[0],
color: [255, 255, 255],
})
})
};
if (!foundLocation) {
if (!map) {
@ -147,6 +172,7 @@ window.app = (function() {
.addTo(map);
map.setView(coords, zoomLevel);
foundLocation = true;
updateUserList();
} else {
map.removeLayer(marker);
marker = L.marker(coords, options)
@ -165,9 +191,12 @@ window.app = (function() {
user = createUser(data);
}
var options = {
'title': user.name,
'icon': L.mapbox.marker.icon({
'marker-color': user.color
title: user.name,
icon: L.icon({
iconUrl: MarkerIcon({
label: user.name[0],
background: user.color
})
})
};
user.coords = data.coords;
@ -179,5 +208,52 @@ window.app = (function() {
.addTo(map);
}
function updateUserList() {
var list = document.createElement('div');
list.id = 'users';
[{
name: username,
color: color
}].concat(users).forEach(function(user) {
var div = document.createElement('div');
div.className = 'person';
div.innerHTML = user.name;
div.style.background = 'rgb(' + user.color.join(', ') + ')';
div.style.top = '8px'
list.appendChild(div);
});
if (userlist) {
document.body.replaceChild(list, userlist);
} else {
document.body.appendChild(list);
}
userlist = list;
}
function MarkerIcon(options) {
options = options || {};
options.background = options.background || [255, 0, 0];
options.color = options.color || [255, 255, 255];
options.label = options.label || 'A';
var size = 20;
var canvas = document.createElement('canvas')
canvas.setAttribute('width', size);
canvas.setAttribute('height', size);
var context = canvas.getContext('2d');
context.fillStyle = 'rgb(' + options.background.join(', ') + ')';
context.arc(size / 2, size / 2, size / 2 - 2, 0, 360);
context.fill();
context.beginPath();
context.lineWidth = 2;
context.strokeStyle = 'rgb(' + options.color.join(', ') + ')';
context.arc(size / 2, size / 2, size / 2 - 1, 0, 360);
context.stroke();
context.font = '14px sans-serif';
context.textAlign = 'center';
context.fillStyle = 'rgb(' + options.color.join(', ') + ')';
context.fillText(options.label, size / 2, size * 0.75);
return canvas.toDataURL();
}
return that;
})();