01 - Librerías JavaScript para Hacer Aplicaciones Web con Mapas - Introducción a Leaflet

#JavaScript #Programación #Leaflet #GIS #SIG #Geografia #Introducción
📋 Índice del video en la descripción para que puedas navegar entre los temas
👨‍💻🌐 Aprende los fundamentos y conceptos básicos para empezar a crear tus propias aplicaciones web geográficas usando Leaflet, una librería Open Source de JavaScript para agregar el componente espacial en nuestras apps.
Acá te explico paso a paso como usar Leaflet, creamos una aplicación bastante sencilla que nos muestra las coordenadas donde el usuario de clic. Además agregamos algunos elementos gráficos sobre el mapa.
----------------------------------------------------------------------
Puedes descargar el código usado en el video aquí 👇
‍💻 Código: github.com/Ing...
----------------------------------------------------------------------
Índice del Video:
0:00:43 Inicio de la Temática
0:03:03 Explicación estructura de una página web (HTML, CSS y JavaScript)
0:06:03 Creación de un nuevo proyecto
0:06:40 Creación del HTML
0:09:32 Creación del CSS
0:12:57 Creación del JavaScript
0:14:01 Documentación oficial de Leaflet
0:16:08 "Instalación" de Leaflet en la aplicación
0:17:50 Creación de un mapa con Leaflet
0:25:04 Creación de un marcador con Leaflet
0:28:00 Agregar un PopUp al marcador
0:29:34 Agregar un circulo al mapa
0:33:21 Manejo de eventos de clic para obtener coordenadas
----------------------------------------------------------------------
🌐 Sígueme:
Linkedin: / ingjuanmasuarez
Github: github.com/Ing...
X: x.com/IngJuanM...
Threads: www.threads.ne...
Trabajos de Grado: udistrital.aca...

[@armandogonzalez8204]

Muchas Gracias, muy bien explicado. Información bastante valiosa.

[@GeoCositasParaDummies]

Gracias a ti Armando! 🥳

[@bluebite01]

Excelente, le mando muchas felicidades. Que buen video ingeniero, y buena musica de video jeje Saludos

[@GeoCositasParaDummies]

Tenemos gustos musicales similares jajajaja, gracias! Me encanta que mi material sea de utilidad y muy bien recibido 🎉🥳

[@milan_ga]

Genio. Me re sirvio. 👌

[@GeoCositasParaDummies]

Excelente Ramiro! 😊, gracias por tu comentario

[@gogomac]

Gracias ING. Juan Manuel, por aquí iniciando a ver esta maravilla de capacitación, de paso desearle un feliz y próspero 2023.

[@GeoCositasParaDummies]

Gracias Gonzalo! También te deseo un grandioso año 2023 🎉

[@MrDarioblanco]

Muy bien explicado. Buena didáctica! Te lo digo como profe 💪

[@GeoCositasParaDummies]

Gracias Dario 🎉🎉. Que otro profe diga eso es bastante gratificante 😊

[@katypacheco5112]

Soy nueva en el canal y me parece una joya de canal para aprender programación, gracias 🤩

[@GeoCositasParaDummies]

Bienvenida Katy! Muchas gracias por tu comentario 😊

[@jazzguzman2560]

Muchas gracias por este video con información tan valiosa 🤩, excelente explicación!!!

[@GeoCositasParaDummies]

Gracias a ti!! 🎉

[@BrawArguellesC]

Buen contenido. Excelente aporte

[@GeoCositasParaDummies]

Gracias Braulio! 😊

[@lucasjosevarelavilla5973]

De entrada me encantó la musica de intro y la remera mola mucho y precisaria tenerla. Ganaste un nuevo suscriptor. Saludos desde Bahía Blanca, Argentina.

[@GeoCositasParaDummies]

Excelente! 🤘🌎. Gracias por tu comentario Lucas y tu apoyo al canal 😃

[@johanmartinez3677]

Profe mil gracias por tan valioso conocimiento y enseñanzas lo haces ver super sencillo, continua porfa con mas contenido de tal calidad, gracias!!!!, a proposito tambien soy de la distri, estudie en la sede vivero ahi genere mi circulo jejjejej¡¡¡¡

[@GeoCositasParaDummies]

Hola Johan! Genial encontrar colegas de la Distrital 🤩. Me gusta explicar sencillo, siento que es más fácil hacerme entender en lugar de tratar de explicar conceptos extraños de forma complicada. Además no se, me gusta enseñar y creo que es un plus al momento de crear los videos. Espero subir material pronto, tengo en mente dos videos más de JavaScript para finalizar esta serie de videos de este tema.

[@EmilioHoyos-r3p]

Que buen canal, muy claro. Felicitaciones.

[@GeoCositasParaDummies]

Hola Emilio 😊. Muchas gracias! Es bonito leer los comentarios y saber que los temas se entienden

[@JorgeRodriguez-mp1mt]

Saludos Profe, gracias por el aporte.

[@GeoCositasParaDummies]

Muchas gracias a ti por tu comentario Jorge. Me alegra que el material te sea útil

[@LeJHuBo]

Inge saludos y un abrazo. Excelente material

[@GeoCositasParaDummies]

Muchas gracias Leonardo 😊. Y poco a poco subiré más

[@LeJHuBo]

@@GeoCositasParaDummies Inge le escribiré en esto dias, para una orientación y me responde cuando tenga tiempo. Un abrazo.

[@rigoska8]

Justo lo que necesitaba , Gracias Bro!

[@GeoCositasParaDummies]

Con mucho gusto Rigo 😊!

[@Ariel_B_360]

Muy buen video! genio JuanMa!!!

[@GeoCositasParaDummies]

Hola Ariel, muchas gracias por tu comentario 😊

[@Andres-yf4wb]

Excelente!!

[@GeoCositasParaDummies]

💪 😎

[@angelicacardenas7525]

¡Hola! Tu vídeo fue genial, muy útil. Te agradezco un montón por compartirlo. Sin embargo, me gustaría pedirte asesoramiento sobre un proyecto en el que estoy trabajando.🙂Me asesorarías??🤝

[@GeoCositasParaDummies]

Hola Angelica, me alegra que el video te haya sido de utilidad 😊. Claro, mis datos de contacto estan en mi perfil, porfa escríbeme sobre tu proyecto. Gracias!

[@juliomencor1769]

Ingeniero la verdad que es un máster, gracias por trasmitir sus conocimientos. Y de acuerdo a su experiencia se pueden representar polígonos con ese método?

[@GeoCositasParaDummies]

Hola Julio, si se puede. Puedes usar las clases de Leaflet para crear polígonos y enviar en una array la lista de coordenadas de los vértices. Es muy similar al circulo que creé en el video. Espero que te sirva la información.

[@juliomencor1769]

@@GeoCositasParaDummies de acuerdo, lo intentaré, muchas gracias por la respuesta. saludos y éxitos

[@GeoCositasParaDummies]

@@juliomencor1769 con gusto Julio, me avisas como te va. Sería algo así L.polygon([lista de coordenadas separadas por coma y corchetes cuadrados cada par]).addTo(map).

[@saulolo]

Profe saludos, vas a dar un curso de Javascript?

[@GeoCositasParaDummies]

Hola Saul, espero que estés muy bien y aprendiendo cada vez más. Por ahora no tengo pensado crear un curso solamente de JavaScript, sin embargo no descarto la idea a futuro. Depende del avance de este material y obviamente de los comentarios de ustedes

[@crisvc20]

Excelente el tutorial.. muy buena explicación.. te quería consultar como se trabaja mejor leaflet con javascript o typescript cual es mejor desde tu punto de vista. Gracias!

[@GeoCositasParaDummies]

Hola Cris 😁, gracias por tu comentario y tu pregunta. No depende propiamente de Leaflet, sucede con otras librerías o frameworks de desarrollo web. JavaScript funciona y funciona muy bien sobre todo para empezar, pero es un lenguaje que al no ser fuertemente tipado pasa por alto muchos errores. Usando TypeScript tendremos mejor calidad de código (más legible y mantenible), detección temprana de errores y mayor seguridad. Considero que si sabes de TypeScript o has usado lenguajes fuertemente tipados y además deseas hacer un proyecto grande, es mejor usar TypeScript. Pero si es un proyecto pequeño, no escalable o es algo académico para aprender, mejor usa JavaScript. Espero que mi opinión te aclare el panorama y te sea de utilidad 🥳

[@perroVacan]

Hola, gracias por tu video, estaba usando Maputnik para customizar los estilos dl mapa, pero aún no se como integrarlo a Leaflet, te queria preguntar si de pronto has hecho esa integración, por cierto que bonito ese peluche de Pikachu, saludos.

[@GeoCositasParaDummies]

Hola Perro Vacan 😅. Gracias por tu pregunta. No he hecho esa integración. Leaflet y Maputnik funcionan con tecnologías diferentes. Leaflet es una biblioteca de JavaScript para crear mapas interactivos que funciona principalmente con capas de mosaico (tiles) y vectores. Por otro lado, Maputnik es un editor para estilos de mapas que sigue el estándar de Mapbox GL, basado en vectores y diseñado principalmente para trabajar con el motor de renderizado de Mapbox GL JS. Leaflet no soporta directamente el estilo Mapbox GL JSON que produce Maputnik. Así que tocaría usar algun tipo de "conversión" para pasar del estilo que produce Maputnik a algo compatible con Leaflet. Sin embargo son herramientas no oficiales o que ya no estan en soporte. Te dejo algo de documentación: docs.mapbox.com/help/glossary/leaflet/ y github.com/mapbox/mapbox-gl-leaflet.

[@perroVacan]

Gracias por tu respuesta@@GeoCositasParaDummies , al final termine usando Maplibre, saludos.

[@anthonyeduardonunezcanchar4569]

otra consulta si quiero varios puntos a la vez como se pinta en el mapa, osea que tres personas en distintos lugares dean su ubicacion

[@GeoCositasParaDummies]

Para representar varios puntos en el mapa, se pueden usar varios marcadores o puedes usar un archivo en formato GeoJSON. Esto ultimo lo explico en el video numero 4 de esta lista de reproducción 😀. En cuanto a que tres personas en distintos lugares den su ubicación, eso si es completamente diferente. Se necesita que la app acceda a la ubicación del usuario, capturar estas coordenadas y enviarlos de alguna manera a un servidor, desde el servidor posiblemente a una base de datos o algun repositorio y poderlos visualizar simultaneamente. Es algo que requiere más trabajo y complejidad.

[@kmilopinilla]

profe como puedo cambiar el color de los iconos seria interesante, gracias profe

[@GeoCositasParaDummies]

Hola Camilo 😊!. Dentro de Leaflet puedes usar la clase icon para agregar iconos personalizados a tu mapa, acá te dejo el link de la documentación de esa clase: leafletjs.com/reference.html#icon Por otro lado, si los datos que estas usando son GeoJSON, puedes usar la propiedad style y definir un color ya especifico. Te dejo un ejemplo: L.geoJSON("tusDatos, { style: { color: "red" } }).addTo(map) Espero que la información te sea de utilidad 🥳🥳

[@soteroarmentagarcia510]

Hola buenas sabe si se pueden insertar una dirección y que no sean corrdenadas

[@GeoCositasParaDummies]

Hola! Gracias por tu pregunta! 🤔 Si es posible, pero se necesitaría usar servicios de geocodificación. Estos son capaces de convertir direcciones en coordenadas geográficas (latitud y longitud) para que sean mostradas en el mapa. Puedes hacer esto utilizando servicios de geocodificación como OpenCage Geocoder, Mapbox Geocoding, Google Maps Geocoding, entre otros. Cada servicio puede requerir una clave de API para acceder a sus capacidades de geocodificación. Por lo tanto, se rerequiere un desarrollo adicional y no es tan directo como con las coordenadas. Por otro lado, la geocodificación no es muy precisa en algunas zonas, a diferencia de las coordenadas que son únicas universalmente. Gracias! 🥳🎉

[@santiagosinchi6153]

Hola Ing. quiero aprender ciencia de datos espaciales y estoy un poco perdido por donde empezar. domino los SIG pero de programación un poco de R y nada mas

[@GeoCositasParaDummies]

Hola Santiago, gracias por tu comentario 😊. Si dominas los SIG y conoces algo de R, vas por buen camino. Puedes también aprender Python qué es otro lenguaje que se usa bastante en ciencia de datos. Puedes empezar o más bien continuar con R, pero tratando de poner en práctica lo aprendido y haciendo ejercicios sobre los temas que conoces. Luego puedes aprender a hacer esos mismos ejercicios o ejemplos pero usando Python. También puedes aprender sobre algoritmos, estadística y algunas bases matemáticas ayudarían (sobretodo para entender mejor los modelos). En mi canal tengo una lista de reproducción de GeoPandas, es una librería de Python que usa datos espaciales. Espero que la información te sea de utilidad 🎉

[@santiagosinchi6153]

gracias profe!

[@astridvargas8924]

Hola profe, el mapa no lo puedo ver en la pantalla, sabes algún motivo porque sucede esto? he borrado las cookies del ordenador y he seguido todos los pasos pero el mapa no se visualiza. hice prueba y Js funciona pero con el mapa no. me puedes ayudar?

[@GeoCositasParaDummies]

Hola Astrid, gracias por tu pregunta 😄. Lo mejor es ir a la consola de las herramientas de desarrolladores. Puedes acceder con clic derecho sobre la ventana de tu navegados y luego inspeccionar, allí buscas la opción de consola. En esa parte veras todos los errores que se han generado y desde ahí será mucho más fácil encontrar el error y por supuesto solucionarlo. Tal vez te haga falta importar algo en el HTML, o verifica que los nombres de las clases estén bien escritos, también apóyate de los console.log para visualizar mensajes en la consola. Puedes ver el código de esta clase en la descripción, desde ahí incluso puedes comparar a ver donde esta sucediendo el problema. Espero que la información te sea de utilidad y que te ayude a solucionar tu problema.

[@anthonyeduardonunezcanchar4569]

una consulta , como puedo mejorar la presicion del mapa

[@GeoCositasParaDummies]

Hola Anthony 😁. No entendí muy bien tu pregunta, ¿a que te refieres con precisión del mapa?

[@keeiko]

el pop up puede ser una imagen?

[@GeoCositasParaDummies]

Hola Enrique! Gracias por tu pregunta. En el video 6 de esta lista de reproducción explico como usar imagenes dentro de PopUps. El PopUp por si mismo no es una imagen, pero se pueden agregar imágenes para desplegar una vez el usuario le de clic el elemento dentro del mapa. Espero que te sea de utilidad la información! 🌎🤩

[@carlosriquelmea]

Algun contacto directo para asesoramiento (freelo)?

[@GeoCositasParaDummies]

Hola Carlos, gracias por tu comentario 😀. No se que es "freelo", pero si deseas contactarme, mis datos están en la sección información de mi canal

[@felipejarahenriquez9574]

Hola JuanMa! Saludos desde Chile!, primero que todo te agradezco tu ayuda en entregar tus conocimientos en sistemas GIS en la comunidad!. Necesito de tu ayuda y no se a quien pedirle ya que no conozco a nadie!. tengo un SHP de tipo Multipoligon guardado en POSTGIS y que extraigo con la función st_asgeojson(geom). Aparentemente se ve bien. pero al momento de desplegarlo en el HTML no imprime el polígono. Me podrás ayudar con esto?, donde me puedo comunicar contigo para darte mas antecedentes y el mismo código si lo necesitas? Muchas gracias por tu ayuda!!! Y vuelvo a felicitarte por tu noble vocación que es la enseñanza y la educación para toda la comunidad! Saludos, Felipe.

[@felipejarahenriquez9574]

PD: la herramienta que utilizo para desplegar el SHP en el HTML es esta misma Leaflet. Saludos!

[@GeoCositasParaDummies]

Hola Felipe, gracias por tu mensaje. Me encanta que los videos atraviesen fronteras. En cuanto a tu pregunta, tengo pensado crear un video explicando la carga de GeoJSON. En resumen, debes usar la clase geoJSON de Leaflet y pasarle como parámetro el objeto donde tienes el GeoJSON. En la documentación hay un ejemplo de uso y te puede ayudar bastante. Espero que la información te sea de utilidad 😊

[@felipejarahenriquez9574]

@@GeoCositasParaDummies muchas gracias por tu respuesta!. voy a revisar la documentación y te comento!! Saludos y gracias!

[@felipejarahenriquez9574]

@@GeoCositasParaDummies muchas gracias por tu respuesta. Esto ya lo había hecho como lo indicas pero de igual manera no me funciona… es posible pasarte los archivos en algún correo por favor? Te mando un gran abrazo y te felicito!!! Gracias

[@GeoCositasParaDummies]

@@felipejarahenriquez9574 Hola Felipe, este lunes publico el video de visualizar datos en Leaflet, era algo que les debía. Puedes mirar el video y si por algún motivo no te funciona lo que explico allí me avisas y te colaboro con tu problema, te parece? Mis datos de contacto están en mi perfil de KZbin 😀