Leaflet y Nodejs | Mapas en Tiempo Real con Nodejs

Aprende a Crear un mapa en tiempo Real utilizando Javascript tanto para crear la aplicación del servidor, como la aplicación frontend. Para crear nuestro mapa vamos a utilizar Leaflet.js, el cual es una biblioteca alternativa a Google Maps. Además en este ejemplo utilizaremos tanto websockets como la geolalización del navegador a través de su API.
CURSO DE NODEJS:
• Nodejs Curso Desde Cer...
CURSO DE WEBSOCKETS:
• Socket.io | Curso Prác...
CÓDIGO FINAL:
github.com/Faz...
VISUAL STUDIO CODE
• Visual Studio Code, Ed...
VISITA MI SITIO WEB PARA MAS CURSOS Y CONTENIDO
www.faztweb.com
blog.faztweb.com
FAZT - KZbin:
/ fazttech
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
DISCORD
/ discord
#leaflet #nodejs #javascript #socketio #websockets #html

[@Eunplugged]

I DID NOT UNDERSTAND A SINGLE WORD THAT CAME OUT OF YOUR MOUTH. BUT YOU HELPED ME A LOT. THANK YOU.

[@AlejandroGuerrero]

Me quito el sombrero! Gracias por la masterclass!

[@jairoquispe9277]

El evento 'e' ya tiene las propiedades de 'latitude' y 'longitude', aparte de la propiedad objeto 'latlng', osea seria lo mismo poner e.latitude para la latitud, idem para la longitud. Tambien tiene un 'timestamp' que puede ser util, como por ejemplo para ver cuantos usuarios visualizan el mapa en un determinado rango de horas. Muy buen video, me ayudo mucho.

[@lucianocozzi6311]

hola faxt, te quiera decir estoy intentando aplicar lo que haces en el video y no puedo. quedo desactualziado no puedo ver el mapa..

[@thesejo.28015]

gracias Fazt Code mejor youtuber * * * * * *

[@yonb0]

muchas gracias. Excelente tutorial

[@timidioN]

Se agradece! Podrías hacer algunos tutoriales y ejemplos de nuxt js ?? Saludos

[@jochlemos]

Show, seria possível um tutorial com este map, utilizando o angular 7 ou superior.

[@バンビマーティンデラクルス]

esto si esta fuerte mi hermano mucho celebro usted tiene son mucho codigo

[@jamilethcasquinourquizo5494]

Una pregunta, como puedo hacer para que me bote los datos del Address, City, CountryCode y todo eso?

[@pedrohernandezgomez5284]

Se puede agregar un marker con un click sobre el mapa y aparte que se guarde en la base de datos

[@LordMegabite]

Ahora me entero que Fazt vive en Londres XD

[@alanmelendez7154]

usa VPN :v

[@alanmelendez7154]

Que acaso no ves todos los comerciales del sponsor xdxdxd

[@alejandrosaenz2256]

Muchas gracias por el video, aunque tengo un problema, he llegado hasta el minuto 30:00 pero al refrescar no se visualiza el mapa, no muestra ningún error en consola, el main.js esta incluido correctamente en el index.ejs (probé agregando alertas) y al div#map-template se le asignan automáticamente las clases de leaflet, Me pueden ayudar por favor!? Muchas gracias

[@jibanmc369]

Hola si quiero que cuando ingrese un usuario nuevo este pueda ver todas las demás ubicaciones de los otros usuarios como podría hacerle una ayuda por favor.

[@martincolonsuriel3304]

Hola fazt como puedo utilizar ests misma aplicación utilizando una base de datos que me esté mandando las ubicaciones

[@Jannerparejagutierrez]

Excelente video! Finalizado con éxito 🐱‍👤

[@marcor_marco9455]

como puedo cargar un mapa base de imágenes en este caso que sean tomadas por un drone

[@robyirloreto]

Cómo haría si agrego varios marcadores en el mapa y luego quiero que me guíen por voz para cada una de las marcas que agregué?

[@danielsolis273]

Excelente, muchas gracias

[@oscar_cornejo]

Alguien sabe como marca una ruta entre un punto y otro?

[@garciabarrientosmiguelalfo1535]

Excelente, justo lo necesitaba y apareciste :')

[@doriangonzalez6219]

Hola , fantastica la explicacion de Websocket...Segui las intucciones paso a paso y en lo cal funciona perfecto. Pero al subir la app en un servidor de AWS solo me despliega el mapa..(no muestra el marcador) aunque muesta cada vez que se conecta un usuario ..habilite el puerto 3000, Debo habilitar algo mas? ( tambien me di cuenta que no me pide mermiso para usar mi ubicacion del browser.

[@krlschavita4398]

Bro gracias por la enseñanza muy bien tutorial, me gustaría poder recibir una ayuda lo mismo pero desde django y que leaflet este a la escucha de algún Ajax con coordenadas para pintar en el mapa, gracias amigo por compartir tu conocimiento

[@cubosoft]

aparece mejor el otro usuario no usando el mismo navegador ... por cosas que desconosco ... me aparecen dos puntos distintos de servidor en santiago ... funciona sin suma 1 mas

[@giancarlomejia5496]

Amigo muchas gracias por tu video son excelentes Tengo una pregunta yo tengo un aparato gps q envia coordenadas a un puerto quisiera recibir esas coordenadas y mostrarlas en un mapa pienso q en este caso tendria q escuchar en otro puerto y de ahi actualizarlo en el mapa Espero tu ayuda muchas gracias

[@gmayas]

¿Alguna referencia si la aplicación se abre en un celular y ver en tiempo real su ubicación y seguimiento si este mueve?

[@RoadSafety1]

I send you two emails and I don't received any answer... :(

[@soliznsc3416]

Gracias por compartir

[@rc5389]

¡Muy buen video!

[@maxnapuche40]

Como siempre buen contenido.

[@gonzalomnieva]

Buenas noches! Excelente aporte!!! una consulta se puede integrar esto a un proyecto creado en IONIC 3 ? de ser así como sería la forma de integrarlo/fusionarlo?

[@aitanapastor4815]

Excelente video! Una consulta leaflet ¿puede hacer el seguimiento en tiempo real si el usuario cambia de posición? ¿y como se podría realizar?, por ejemplo si se usara en un dispositivo móvil.

[@CristianXP44]

Excelente 👍

[@gustavoespinozasolano8153]

pero si me muevo no obtiene la ubicación,tengo q actualizar el navegador -.-

[@gabrielmunoz-programaciona8762]

Genial!! como hago para asignarles y ver los nombres de los usuarios conectados?

[@monsefm1268]

Muchas gracias por el increible tutorial!!!. Aprovecho de consultar, tú sabes como implementar una función que descargue el mapa con sus tilelayers?. De antemano agradezco tu tiempo en responder :)

[@vectoriusblack9076]

Hola, gracias por el video, como podría enviar una notificación a mi email cuando otro usuario ingrese al servidor?

[@misVideosRecomendados]

Puedo bajar el código fuente ?

[@dieguinprtg675]

Alguien sabe cuál es el tema que está utilizando Fazt para los íconos?? Está muy bueno el vídeo para empezar con Leaflet con ejemplos prácticos :D

[@pekuruguay]

como podria obtener los valores de las coordenadas y asignarlas a una caja de texto ? o guardarlas en la bd ? no logro dar con eso

[@williamsalazar4811]

ya lo lograste??

[@pekuruguay]

@@williamsalazar4811 no

[@williamsalazar4811]

@@pekuruguay yo ando en ello hace rato, pero se me esta haciendo muy complicado, necesito convertir direccion en coordendas para medir la distancia de esos dos puntos, quiero el usuario registre la direccion destino y automatico el programa arroje, las coordenadas de ese lugar , lo de la basedatos ya lo tengo listo estoy estudiando esta plataforma,, parece que alli se puede www.mapbox.com

[@delfim4816]

muy puntual...gracias

[@davideliasfloresescalante8840]

Excelente que expliques codigo corriendo, y con errores como todos... en locationfound, escribiste location"F"ound, y el código es case sensitive... A MI ME PASA todo el tiempo, GRACIAS

[@fersilent3884]

Gracias excelente video

[@hermitv.g.4542]

hola Fazt, oye me preguntaba si pudieras hacer un video sobre como marcar poligonos en un mapa, es que e estado buscando por todos lados y no encuentro nada que me ayude estaria muy agradecido de que me puedas proporcionar tu ayuda gracias

[@jugama95]

Muy buen contenido! Una consulta leaflet puede hacer el seguimiento en tiempo real si el usuario cambia de posición, que sea visible con un zoom relativamente cercano?

[@FaztCode]

Lo que podrías hacer en ese caso para el seguimiento en tiempo real es usar WebSockets, y la api de Geolocalización del navegador, para ir pasándole los datos a Leaflet e ir actualizando el mapa

[@yoquipa]

Saludos, una pregunta: con leaflet y Nodejs yo puedo controlar un grupo de usuarios que sea alertado todo aquel usuario que se acerque a un sitio que yo determine como peligroso, Habia leido que leaflet no te permite hacer un render del movimiento del objeto en tiempo real, es verdad?

[@KuroRedfox]

Excelente.

[@nestoralagosg]

Hola a todos me aparece este mensaje cuando agrego el npm init --yes npm : El término 'npm' no se reconoce como nombre de un cmdle nombre o, si incluyó una ruta de acceso, compruebe que dicha En línea: 1 Carácter: 1 + ~~~ + CategoryInfo : ObjectNotFound: (npm:String) [] + FullyQualifiedErrorId : CommandNotFoundException

[@JeffAporta]

Me encantó

[@vladimirtamayo5765]

muy buen curso, pero podrias hacer uno con un mapa a partir de una imagen local

[@artesoscuras]

Muchas gracias me sirvió

[@Skaxarrat]

Gran tutorial

[@luisfernandoyupanquitaco8630]

El index.html?

[@juancastillo-un8vo]

explicando a la velocidad de la luz

[@EmilyAngel-i2j]

Cobran?

[@SenkuIshigami229]

Dios me volvi loco ya que no me funcionaba el código, parece que en chromiun linux no funciona el mapa, pero en windows anda perfeto tanto en google chrome como en mozilla hoy 2020.

[@paolatapia2255]

Hola, tuviste problema con la variable lat? Me marca en consola que no existe!

[@ErkanOkman]

👍👏

[@colommbiano]

me gustaría que hiciera lo mismo pero con Vuejs como podemos integrar Leaflet con vuejs y trabajar en tiempo real

[@cubosoft]

me gusto el tema de socket ... ahora con click del mouse es mas facil enviar mi ubicacion 😅🤣🤣😂😂 #main.js map.on('click', markerOnClick); function markerOnClick(e) { console.log(e); const marker = L.marker([e.latlng.lat ,e.latlng.lng]); marker.bindPopup('Click'); map.addLayer(marker); socket.emit('atackCoordinates', e.latlng); } socket.on('newAtackCoordinates',(cords) => { console.log('Atack' + cords ); //const marker = L.marker([cords.lat ,cords.lng]); //marker.bindPopup('Atack'); // map.addLayer(marker); var circulo = L.circle([cords.lat ,cords.lng], {radius: 1000, color:'green'}).addTo(map) circulo.bindPopup('Atack') }); #socket.js module.exports = io => { io.on('connection',(socket) => { console.log('Socket- New User Coneccted'); socket.on('userCoordinates', coords =>{ console.log(coords); socket.broadcast.emit('newUserCoordinates',coords ); }); socket.on('atackCoordinates', coords =>{ console.log(coords); socket.broadcast.emit('newAtackCoordinates',coords ); }); }); }