use custom marker
This commit is contained in:
parent
45b9c8036d
commit
5a3a1d7cfb
2 changed files with 111 additions and 19 deletions
|
|
@ -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;
|
||||
}
|
||||
|
|
|
|||
114
static/js/app.js
114
static/js/app.js
|
|
@ -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);
|
||||
update({
|
||||
name: username,
|
||||
coords: coords
|
||||
});
|
||||
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;
|
||||
})();
|
||||
|
|
|
|||
Loading…
Reference in a new issue