Leadflet

Leaflet es la biblioteca de JavaScript de código abierto líder para mapas interactivos optimizados para dispositivos móviles, permite incorporar y generar mapas para poder visualizarlos en nuestro navegador de Internet.
 Bueno es algo nuevo para aprender y lo utilizamos para crear un mapa con las coordenadas del instituto y las coordenadas de los compañeros que muestre:
  • Los pin de todas la coordenadas
  • Hacer una línea entre el instituto y cada ubicación de los compañeros
  • Y calcular la distancia entre el instituto y cada compañero.
Para eso se utilizo una nueva herramienta CODEPEN, muy interesante


Codepen es una herramienta para realizar pruebas a fragmentos de código que todo desarrollado web o front-end sabrá apreciar, es una buena herramienta donde se puede programar y en la parte inferior se puede apreciar como esta quedando.

1. Lo priemro configurar CODEPEN

Links:
CSS:
https://unpkg.com/leaflet@1.6.0/dist/leaflet.css
https://use.fontawesome.com/releases/v5.0.13/css/all.css
https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.1/dist/js/leaflet.extra-markers.min.js
JS:
https://unpkg.com/leaflet@1.6.0/dist/leaflet.js
https://cdn.jsdelivr.net/npm/leaflet-extra-markers@1.2.1/dist/js/leaflet.extra-markers.min.js

2. Empezar a programar utilizando la libreria map() para poder visualizar el mapa.

Bueno aplicando lo del vídeo y la documentación sobre la librería se pudo hacer hasta los pin y marcar la linea, la distancia y el calculo de la distancia se queda para otro post.