martes, 30 de junio de 2020

Leaflet

Leaflet, una gran alternativa a Google maps... algo de profesionales馃憣馃捇15 Plugins de Leaflet para mejorar la interfaz de usuario - MappingGIS
Leaflet es una librer铆a para JavaScript que nos permite ingresar mapas en nuestro programa. 
Si me lo preguntan para mi ha sido una herramienta asombrosa!!馃榿 Ya que pude hacer algo que pensaba que seria super complicado馃檮
Pero durante la practica resulto ser muy F谩cil!!

Primero nos guiamos en un video de YouTube que nos fue compartido por Slack!. Les adajunto el video al final de este post✌

Les comento que tuve un problema...
Trate de hacer este ejercicio en Visual Studio Code... pero no funciono... importe las librerias pero nada馃し‍♂️

Asi que mejor decidi hacerlo en un editor de codigo Online... que a mi gusto estuvo muy interesante ya que podia ver el resultado a un lado de la pantalla
As铆 es como se ve esta pantalla!! No es genial?

La libreria que toca usar es muy completa ya por su docuemntacion y sus plugins... esta es su pagina principal!

En fin les dejo como me quedo el ejercicio el cual debia constar:


  • Crear un mapa de Quito
  • Mostrar en el mapa pines que indiquen la direcci贸n de al menos 7 de sus compa帽eros de clase
  • A帽adir un pin que represente al instituto
  • Hacer una l铆nea entre el instituto y cada estudiante
  • Calcular el estudiante que viva m谩s lejos del instituto
Me falto el ultimos ya que tuve problemas al hacerlos... pero sigo intentandolo!!!馃憤馃憣馃憡

Mas o menos asi me quedo:

El probema fue solucionado!!!馃槂.
Se tuvo que usar una libreria llamada Turf!!
Turf me salvo, ya que con unas simples lineas de c贸digo, el problema de el calculo de distancia se soluciono!!

Links:


Tutorial para realizar el mapa: https://www.youtube.com/watch?v=MDTIhWvIcDs


Entra a CodeOpen y empieza a crear!: https://codepen.io/


Visita Leaflet y mira sus funcionalidades!: https://leafletjs.com/


Visita mi repositorio en Github, te vas a sorprender..xD:  https://github.com/mauricio403