React & Leaflet con Geolocation | Mapas y Geo-localizacion en React

Подписаться 260 тыс.

Просмотров 49 тыс.

50% 1

Este es un ejemplo práctico de React-leaflet. Leaflet es una biblioteca de Javascript que permite manipular un Mapa, con marcadores, figuras y otras caracteristicas más. El día de hoy aprenderemos a usar esta biblioteca desde React, ademas de usar la API del navegador GeoLocation para obtener las coordenadas del usuario.
CÓDIGO DEL EJEMPLO
github.com/Faz...
LEAFLET & NODE con Socket.io
• Leaflet y Nodejs | Map...
SINGLE PAGE APPLICATION (JAVASCRIPT VANILLA)
• Javascript Single Page...
LOWDB
• lowDB | Base de datos ...
ASYNC AWAIT
• Javascript Async Await...
MONGOOSE
• Mongoose | Introduccci...
CURSO DE NODEJS
• Nodejs Curso Desde Cer...
CURSO DE MONGODB
• MongoDB Curso, Introdu...
MULTER, SUBIDA DE ARCHIVOS CON NODEJS
• Subida de Imagenes en ...
FIREBASE AUTHENTICATION
• Firebase Auth | Autent...
CURSO DE EXPRESS
• Expressjs | Nodejs Fra...
VARIABLES DE ENTORNO NODEJS
• Variables de Entorno e...
CURSO DE JAVASCRIPT
• Curso Javascript para ...
CURSO DE GIT
• Git y Github | Curso P...
VISUAL STUDIO CODE
• Visual Studio Code, Ed...
VISITA MI SITIO WEB PARA MAS CURSOS Y CONTENIDO
www.faztweb.com
blog.faztweb.com
SE UN MIEMBRO DEL CANAL:
/ @faztcode
FAZT - RU-vid:
/ fazttech
TWITTER
/ fazttech
INSTAGRAM
/ fazttech
FACEBOOK
/ fazttech
DISCORD
/ discord
SLACK
join.slack.com...
MÁS ENLACES DE FAZT
faztweb.com/so...
#react #leaflet #map

Опубликовано:

13 сен 2024

Ссылка:

Скачать:

Готовим ссылку...

Добавить в:

Мой плейлист

Посмотреть позже

Комментарии : 82

@richardjs312 4 года назад

Dios como estas, yo estoy bien gracias a ti por brindarme religiosamente tus cursos practicos, en nombre de Fazt, en el nombre del server de discort y en el nombre de esta hermosa comunidad, amen

@lizzethgd 3 года назад

Gracias Faz por tu esfuerzo de compartir tus conocimientos de manera muy didáctica, contigo además se aprende buenas practicas de codificación!

@josemariaalvarez3466 4 года назад

Justo lo que necesitaba para mi proyecto personal de promover el patrimonio cultural de mi ciudad. Me ahorraste unas horas de investigación

@sathaniel1689 7 месяцев назад

Buen video bro , gracias a ti he podido avanzar en crear mi tesis de Ingeniero Informatico

@enmanuelrondon5545 6 месяцев назад

te funciono??

@CesarSanchez-uy9nt 3 года назад

hola amigos, tuve un error → 'Map' is not exported from 'react-leaflet' , al parecer el modulo "react-leaflet" ya se actualizo, .... entonces: 1- desinstale el paquete → npm uninstall react-leaflet 2- instale la version que uso fazt → npm i react-leaflet@2.7.0 espero le sirva en caso de tener el mismo problema saludos

@orlandooscaraltamiranovela8315 3 года назад

Muchas gracias amigo me sirvio

@feconvertigo 3 года назад

Gracias!

@Rokovbabca 3 года назад

otra alternativa es volver a actualizar el modulo pero en vez de importar "Map", importa "MapContainer".

@netopmtz 4 года назад

Qué oportuno, Fazt. Justamente tengo un hackathon en dos días y el reto es justo utilizar alguna api de mapas.

@diegosanchezespin1575 4 года назад

FaztCode deberías hacer un video de preguntas y respuestas, cuantas horas programas al día, en que trabajas, cuantos años tienes, de donde eres, saludos crack !!

@josemanuelherrero6495 4 года назад

Muchas gracias Fazt por seguir enseñándonos!!!

@jhonrodriguez3978 4 года назад

Uff estaba esperando un ejemplo de éste tipo, Amén.

@joseeduardoalvarezlerebour134 3 года назад

Muchísimas gracias, tu vídeo me ayudo bastante, sigue así FAZT !! ❤️❤️❤️

@UskoKruM2010 4 года назад

Fazt, te escribí por Twitter y correo, espero lo puedas leer. Un saludo desde Chiclayo. 😉

@carlosc1028 3 года назад

¡Muchas gracias por tan excepcional aporte!

@ingAmbRaymundoGG 4 года назад

magnifica tu contribución, muchas gracias, eres el mejor :D

@LumbreraEnMiCamino 4 года назад

Que buena predicación, saludos!!

@gmayas 3 года назад

Hola, supongamos que publicamos este pequeña aplicación y un usuario la abre en su dispositivo móvil, ¿Si esta persona se mueva Leaflet actualiza su posición en el Mapa?

@pieroangulocubas 4 года назад

Fazt crack ! creo que llegue temprani esta vez !

@Samaelh12 4 года назад

Amo tus vídeos. Eres de los mejores

@jonathanvargas9693 3 года назад

Muchas gracias por el video Fazt muy bien explicado. Me gustaría saber si tienes alguna recomendación para implementar una característica de capturar snapshots de los mapas usando esta librería con React en programación funcional.

@carlosvillatoro8154 4 года назад

Lastima que no hiciste lo de la tarjeta encima del marcador cuando pasaras el mouse, pero que excelente video sigue adelante me encanta todo tu contenido

@manuelrojas2528 4 года назад

excelente explicación ,saludos bro eres un crack !! gracias por el aporte

@calebhernandez2515 3 года назад

Bro quien es el rarito que le da dislike a esta valiosa enséñanza ?

@ruthcodina874 3 года назад

cómo hago para que los popup, todos aparezcan abiertos?

@albertomiguelmoreno Год назад

Hola! estoy teniendo inconvenientes al momento de setear la proyeccion para la muestras de un geojson

@cuencadev 4 года назад

13:49 si le das en "Que hay aqui?" te indican las coordenadas (en desktop)

@isaitred 3 года назад

Intento hacer el ejercicio pero no me muestra el marker, también ya no se inicializa como mapa, si no como ContainerMap, como se puede resolver lo del marker?

@nicolasblasutig4646 2 года назад

misma pregunta, no se muestra el popup

@rebjz 4 года назад

Muy buen video podrías hacer un ejemplo de koa o de jest?

@andresarandaarpe3522 4 года назад

Muy buen ejemplo, podrías hacer un ejemplo de marcadore con MERN stack, gracias crack!

@Jannerparejagutierrez 3 года назад

Hola Fazt, cuales serian las ventajas de este video en relacion al otro que ya tienes donde se usa Leaflet?

@KhelinMagic 3 года назад

si te refieres a esto: ru-vid.com/video/%D0%B2%D0%B8%D0%B4%D0%B5%D0%BE-Zy89Nj7tNNM.html, la diferencia que esto esta em tiempo real con socket

@SonGoku-pc7jl 2 года назад

ole, parece una biblioteca muy divertida de usar jeje :) voy dando vueltas donde la podria colocar jeje ;) muchisimas gracias genio

@santi_cendra_music 2 года назад

Consulta Fazt! Como seria si uno quiere poner un marker y este te de sus cordenadas?

@danieltkach2330 3 года назад

Cómo hacemos para rotar lo íconos dinámicamente? Y cómo hacemos para reaccionar a eventos del mapa como detectar la lat y lon de donde se hizo click, mousemove, zoom etc.

@juanvillalba7925 2 года назад

Estas por todos lados Dani!

@joseossesplaza4007 4 года назад

primer comentario ! Buenaaa Faztt !

@claudio66167 3 года назад

muy buen ejemplo , podrias programar como hacer que el camino se dibuje en el mapa mientras el marcador se va moviendo

@valentinsacco 4 года назад

Buen video crack, haz si te pinta un tutorial creando un página usando gatsby

@luiscarlossilvaaguas5776 Год назад

estoy tratatando de pasar el state de Home a MapView me devuelve null es mas lo copie igual siempre me lo da null por que esta pasando?

@edgarsantiagoarizagarcia5506 3 года назад

Hola Fazt, soy principiante y al parecer tengo varios errores como "Map" is defined but never used y no se si es porque no se exportaron todos los elementos de leaflet

@nclenriquez 2 года назад

Buen video amigo! Una pregunta en caso de que la ubicacion del movil este apagada como se podria hacer para mostrar un lugar en particular? Gracias!

@programadorweb1587 2 года назад

Gracias, segui tus pasos, aunque la imagen del point no se mostraba. se soluciono agregando "default": require('icon.svg').default

@Chikis01 2 года назад

Disculpa, en que parte lo pusiste? Me puedes explicar. Muchas Gracias

@programadorweb1587 2 года назад

@@Chikis01 desde el minuto 22:20 ahi muestra como cargar la imagen del markers. ahi cuando incorporas con "requiere " el archivo *.svg ,le agregue la default quedando... iconUrl: require('../../assets/img/icon.svg').default

@lilliamromero2228 Год назад

muchisimas graciaaaaaaaaaaaaaaas, tenía el mismo error y se solucionoo

@emiliodiaz8074 2 года назад

Hola muy buen video, tengo una pregunta, como hago para mostrar la información en popup, que al tocarlo me salga el nombre y la descripción

@juanp3381 4 года назад

fazt me gustaría que sacaras mas ejercicios de front usando ReactJs, gracias

@edgarmejiavasquez8962 2 года назад

AYUDA : Estoy visualizando en tiempo real el gps(streaming) de diferentes carros en el mapa, cual seria la mejor forma de manejar el streaming

@israelsaucedo6699 3 года назад

Que onda amigo, el tutorial es perfecto y me gusta como lo explicas, pero crees que puedas hacer uno donde se use el switch case, para intercambiar de imágenes en el mapa, y que se muestren en el mismo mapa

@damianpinedomorganti7855 Год назад

Hola!! en mi caso mi mapa funciona correctamente en desarrollo , pero en produccion se queda estatico , ni siquiera aparece el marker , que debo hacer? u.u

@tmdm9923 3 года назад

gracias

@edglo464 4 года назад

Por qué no usar directo open street map?

@KevinGarcia-cs1gb 3 года назад

Hola, como podria mapear un estado para seccionarlo en municipios, existe alguna herramienta?

@romelurbay1716 4 года назад

Si ya obtuve las coordenadas, como hago para obtener el nombre del lugar?

@br4nd0nS 2 года назад

Buenos seria tambien de ayuda para poder usar leaflet usando la api de google maps

@gelintonx 4 года назад

Fazt tengo un problema con el server de discord. No me deja participar, me pide la verificación de mi número de teléfono, lo pongo y nada no me deja verificarme. Ya he intentado abandonarlo y volver a entrar y nada. Gracias de antemano

@jaazielaguirre3952 4 года назад

He intentando entrar al server de discord, pero me muestra que el link expiro o que no tengo permiso. Hace tiempo estuve, pero me sali para tomar un poco de orden de todo, quiza por eso me muestre el msj.

@juanthegamer7834 2 года назад

Una duda que me genera esto es; si uno puede guardar la posición de uno o varios usuarios en una base de datos para su posterior uso como para un servicio de entregas o similar, es que no se si esto me sirve para eso...o siquiera como hacerlo :V

@FaztCode 2 года назад

usando protocolos en tiempo real, aplicaciones cliente, como aplicaciones moviles o aplicaciones web frontend se pueden comunicar a tu servidor de nodejs, recibir las coordernadas y enviarlas a otros dispositivos (para que puedan ver en donde va el delivery) o tambien guardarlas en una base de datos como forma de guardar la coordenada exacta de la entrega de un pedido.

@nickdeyvisbaldeonhinostroza 4 года назад

soy principiante en todo esto , escribí bien el comando en el cmd , pero me dice que npx no se reconoce como un comando.

@FaztCode 4 года назад

Hola Nick. el comando npx es un comando de Nodejs. Así que primero debes instalar Nodejs

@marioalbornoz7319 4 года назад

Primero

@carlosbadilla7505 4 года назад

hola gracias por el tutorial, tengo una pregunta como puedo convertir mi aplicaccion web en un apk o una app movil sin que tengan que abrirla desde un navegador o tendria que obligatoriamente volverla a hacer enfocada a esto con android estudio por ejemplo, he buscado mucho sobre el tema pero no encuentro algo que me sirva

@gelintonx 4 года назад

Si esta hecha con react o Angular podrías usar React-Native o Ionic.

@juansebastianperezlondono63 4 года назад

Quizá te pueda ser de utilidad esta referencia: medium.com/@firt/google-play-store-now-open-for-progressive-web-apps-ec6f3c6ff3cc

@nicolashermoza3478 4 года назад

Cómo se llama el theme que usas???? Pd: Excelente vídeo

@christiangomez3428 4 года назад

Dobri Next

@rocioyezequiel 3 года назад

No entiendo nada desde el comienzo. Quiero hacer un mapa interactivo pero no entiendo nada de javascrip. Qué me recomendas?

@vladimirreyes1661 4 года назад

Jajaja

@GregoMartocci 2 года назад

FAZT SACATE UN TUTO DE COMO DOCKERIZAR UN MERN ABZO

@FaztCode 2 года назад

Excelente idea :)

@bryantmitchell-v9x Год назад

se doxeo?

@FaztCode Год назад

Con en realidad:)

@webmental1 4 года назад

Bien fazt ya hace falta algo de laravel, laravel es muy superior a django

@giancarloaparicio5841 4 года назад

Uhmmm las dos tienen sus pro y contra... Laravel es muy robusto, lo cual lo hace super seguro y escable, pero muy lento por todo lo que esto contrae Django al igual que express no trae nada mas que lo necesario para poder trabajar, por ende es ligero pero debes saber de arquitectura, patrones, testing, y entre otras cosas para poder usar Django correctamente

@gelintonx 4 года назад

Ni de broma Django es superior a Laravel en todos los aspectos. Laravel en mi opinión esta un peldaño por debajo de Django

@Ebizzill 3 года назад

did i really watch a react + leaflet tutorial in ... spanish ?

@Emma-eb5zb 2 года назад

and?

@apluscolombia3542 3 года назад

Sos demasiado mal tutor, no respondes a las preguntas que surgen y peor aun escribes codigo para despues borrarlo, eso es perdida de tiempo. No te recomiendo a nadie.