Librería: Leaflet

Descripción: Se configura un WebSocket para que el servidor reciba la ubicacion de los clientes (personas que se conectan al mapa) y la muestra a los demás.

Archivo CSS

 #map { height: 100vh; }

Archivo HMTL:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Ubicación en Tiempo Real</title>
    <link rel="stylesheet" href="<https://unpkg.com/leaflet/dist/leaflet.css>">
</head>
<body>

    <div id="map"></div>
    <script src="<https://unpkg.com/leaflet/dist/leaflet.js>"></script>
    <script src="<https://cdn.socket.io/4.0.1/socket.io.min.js>"></script>
    <script src="mapa.js"></script>
</body>
</html>

Archivo JavaScript:

// Inicializar el mapa en las coordenadas y zoom requeridos
var map = L.map('map').setView([4.60971, -74.08175], 13);  // Aqui se cambia las coordenadas a donde quieres mostrar el mapa por default

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
    attribution: '&copy; <a href="<https://www.openstreetmap.org/copyright>">OpenStreetMap</a> contributors'
}).addTo(map);

// Conectar al servidor WebSocket
var socket = io();

// FUncion para recibir la ubicación de otro usuario
socket.on('location', function(data) {
    console.log('Ubicación recibida:', data);

    // Si el marcador ya existe, lo actualizamos, sino lo creamos
    if (data.id in userMarkers) {
        userMarkers[data.id].setLatLng([data.lat, data.lng]);
    } else {
        var marker = L.marker([data.lat, data.lng]).addTo(map);
        userMarkers[data.id] = marker;
    }
});

// Obtener la ubicación del usuario
navigator.geolocation.watchPosition(function(position) {
    var lat = position.coords.latitude;
    var lng = position.coords.longitude;

    // Actualizar el marcador propio
    if (myMarker) {
        myMarker.setLatLng([lat, lng]);
    } else {
        myMarker = L.marker([lat, lng]).addTo(map);
    }

    // Enviar la ubicación al servidor
    socket.emit('location', { id: socket.id, lat: lat, lng: lng });
}, function(error) {
    console.log("Error de geolocalización: " + error.message);
});

// Mantener un registro de los marcadores de otros usuarios
var userMarkers = {};

// Inicializar un marcador para el propio usuario
var myMarker;

Archivo Server JavaScript


const express = require('express');
const http = require('http');
const socketIo = require('socket.io');

const app = express();
const server = http.createServer(app);
const io = socketIo(server);

// Servir archivos estáticos (por ejemplo, HTML, JS)
app.use(express.static('public'));

io.on('connection', (socket) => {
    console.log('A user connected');

    // Enviar la ubicación de un usuario a todos los demás usuarios conectados
    socket.on('location', (data) => {
        console.log('Location data received: ', data);
        socket.broadcast.emit('location', data);
    });

    socket.on('disconnect', () => {
        console.log('A user disconnected');
    });
});

server.listen(3000, () => {
    console.log('Server listening on port 3000');
});