Tengo una aplicación que funciona en node.js que ubica a un usuario y traza su ubicación en un mapa de folleto. Cuando otros se conectan, también los muestra. Mantiene vivo su marcador mientras mueven el mouse.
Me gustaría cambiar un par de cosas, pero no estoy seguro de por dónde empezar:
- Actualice el marcador de los usuarios cuando se muevan.
- Mantenga el marcador activo mientras la conexión esté activa, no mientras muevan el mouse o se muevan en general, ya que pueden detenerse en el viaje.
Sé que puedo usar la función de reloj, pero no estoy seguro de dónde agregarla. Incluiré el código application.js donde se ubica el mapa y se coloca el código del marcador.
La aplicación.js
$(function() {
// generate unique user id
var userId = Math.random().toString(16).substring(2,15);
var socket = io.connect("https://gis.stackexchange.com/");
socket.emit('little_newbie', username);
var map;
var info = $('#infobox');
var doc = $(document);
// custom marker's icon styles
var tinyIcon = L.Icon.extend({
options: {
shadowUrl: '../assets/marker-shadow.png',
iconSize: [25, 39],
iconAnchor: [12, 36],
shadowSize: [41, 41],
shadowAnchor: [12, 38],
popupAnchor: [0, -30]
}
});
var redIcon = new tinyIcon({ iconUrl: '../assets/marker-red.png' });
var yellowIcon = new tinyIcon({ iconUrl: '../assets/marker-yellow.png' });
var sentData = {};
var connects = {};
var markers = {};
var active = false;
socket.on('load:coords', function(data) {
if (!(data.id in connects)) {
setMarker(data);
}
connects[data.id] = data;
connects[data.id].updated = $.now();
});
// check whether browser supports geolocation api
if (navigator.geolocation) {
navigator.geolocation.getCurrentPosition(positionSuccess, positionError, { enableHighAccuracy: true });
} else {
$('.map').text('Your browser is out of fashion, there\'s no geolocation!');
}
function positionSuccess(position) {
var lat = position.coords.latitude;
var lng = position.coords.longitude;
var acr = position.coords.accuracy;
// mark user's position
var userMarker = L.marker([lat, lng], {
icon: redIcon
});
// uncomment for static debug
// userMarker = L.marker([51.45, 30.050], { icon: redIcon });
// load leaflet map
map = L.map('map').fitWorld();
L.tileLayer('https://api.tiles.mapbox.com/v4/{id}/{z}/{x}/{y}.png?access_token=pk.eyJ1IjoibWFwYm94IiwiYSI6ImNpejY4NXVycTA2emYycXBndHRqcmZ3N3gifQ.rJcFIG214AriISLbB6B5aw', {
maxZoom: 18,
attribution: 'Map data © <a href="https://www.openstreetmap.org/">OpenStreetMap</a> contributors, ' +
'<a href="https://creativecommons.org/licenses/by-sa/2.0/">CC-BY-SA</a>, ' +
'Imagery © <a href="https://www.mapbox.com/">Mapbox</a>',
id: 'mapbox.streets'
}).addTo(map);
userMarker.addTo(map);
userMarker.bindPopup('<p>You are here ' + username + '</p>').openPopup();
var emit = $.now();
// send coords on when user is active
doc.on('mousemove', function() {
active = true;
sentData = {
id: userId,
active: active,
coords: [{
lat: lat,
lng: lng,
acr: acr,
name: username
}]
};
if ($.now() - emit > 1) {
socket.emit('send:coords', sentData);
emit = $.now();
}
});
}
doc.bind('mouseup mouseleave', function() {
active = false;
});
// showing markers for connections
function setMarker(data) {
for (var i = 0; i < data.coords.length; i++) {
var num = +$("#count").text() + 1;
$("#count").text(num);
var marker = L.marker([data.coords[i].lat, data.coords[i].lng], { icon: yellowIcon }).addTo(map);
marker.bindPopup('<p>One more external user is here!</p>' + data.coords[i].name);
markers[data.id] = marker;
}
}
// handle geolocation api errors
function positionError(error) {
var errors = {
1: 'Authorization fails', // permission denied
2: 'Can\'t detect your location', //position unavailable
3: 'Connection timeout' // timeout
};
showError('Error:' + errors[error.code]);
}
function showError(msg) {
info.addClass('error').text(msg);
doc.click(function() {
info.removeClass('error');
});
}
// delete inactive users every 15 sec
setInterval(function() {
for (var ident in connects){
if ($.now() - connects[ident].updated > 200000) {
var num = +$("#count").text() - 1;
$("#count").text(num);
delete connects[ident];
map.removeLayer(markers[ident]);
}
}
}, 15000);
});
1 respuesta
Completamente funcionando, reescrito. Simplemente agregándolo para mostrar cómo debería haberse hecho desde el principio y para ayudar a cualquier otra persona que quiera hacer algo similar.