Hola a todos, nuevamente. Aquí estamos en un nuevo video, comenzando el módulo 4. Vamos a empezar con la primera lección en el primer video, uso de componentes avanzados. En este caso, vamos a utilizar componentes de tipo mapa. Vamos a usar una librería Open Source llamada NGX-MAPBOX-GL, que va a utilizar mapas de la corporación MAPBOX, que se dedica ampliamente a tener componentes Open Source. Obviamente, también tiene su parte paga, pero la mayoría de los componentes son Open Source, son abiertos y gratuitos, por ende. Y aquí, puntualmente, para que no requiera registrarse en MAPBOX, vamos a usar una técnica donde vamos a cargar los tails, es decir, lo que es el fondo del mapa, y lo vamos a cargar de un origen de datos también abiertos, que brinda un usuario a través de su cuenta de Github. Para comenzar, habiendo ya visitado el sitio, vamos a empezar agregando el componente. Para agregar el componente, vamos a instalar con NPM en MAPBOX-GL, que es el Plugin, de MAPBOX y NGX que es el wrapper, el adaptador, para Angular. Además, si usáramos sólo JavaScript con lo de arriba ya estaba, pero como usamos TypeScript necesitamos que estén tipados, que tengan tipo de datos, el código que vamos a utilizar, porque TypeScript es justamente tipado, entonces también vamos a importar este paquete. Este paquete de MAPBOX-GL nos agrega un par de CSS que tenemos que agregar en nuestro CSS global. Entonces, tenemos nuestro Style y, dentro del Style global, vamos a importar estos dos CSS para tener los estilos. Luego, tenemos que importar el Plugin del módulo de la comunidad de Angular, en nuestro APP Module. Para eso, agregamos el Import y, además, en la sección de imports del decorador, también agregamos, como los demás módulos, agregamos un módulo más. Habiendo agregado también el módulo al Imports, lo que nos queda hacer es utilizarlo. Para eso, vamos a elegir un componente al azar, "destino-detalle-component", en este caso. Vamos al HTML. Recuerdan que sólo mostrábamos el ID y nombre, bueno, ahora vamos a mostrar un HR, es decir, una línea horizontal de separación, y luego vamos a usar el componente del mapa. Aquí en Style, que es una propiedad cómo ven con corchetes de TypeScript, vamos a levantar el objeto que representa los estilos del mapa, lo vamos a levantar del código de TypeScript. Ahora lo vamos a poner. Y Zoom le vamos a habilitar una array, esto también es código de TypeScript, un array de zooms disponibles, vamos a ponerle solamente Zoom 2. Y luego, este Style, es decir, los estilos que se van a vincular, este MGL-MAP va a terminar siendo rendereado en HTML con un nodo HTML, y ese elemento HTML va a recibir este atributo Style, de estilos. El tag MGL-MAP, como ven, empieza aquí y termina aquí, y en el medio nosotros podemos definir, también se puede hacer por TypesScript pero aquí lo estamos haciendo por HTML, un subcomponente de este componente, que es el MARKER. Le estamos poniendo un MARKER. Un MARKER, en este caso, está ubicado con longitud y latitud específicas, constantes, y va a tener un texto que va a decir "Hola mundo", no le pusimos una imagen. Y este MARKER, que va a aparecer sólo con texto, sin imagen, dibujado sobre el mapa, cuando lo cliquemos va a mostrar un JavaScript Alert que diga "Hola", un pop up que va a decir el mensaje "Hola", directamente. Vvamos al código del componente y en el código del componente vamos a actualizar la clase de la siguiente manera. Aquí está el atributo Style, que estábamos haciendo referencia desde el HTML, y estamos siguiendo la documentación de estilos de nuestro Plugin que, a su vez, utiliza lo de MAPBOX. Y aquí estamos vinculando la información, un json, que tiene la información de los países a nivel mundial, solamente contorno, división política, digamos, y no le estamos agregando lo que se llaman otras capas, estamos agregando solo una capa básica, no estamos agregando detalles de ciudades ni nada por el estilo. Eso se hace agregando nuevos sources, nuevos orígenes de datos y en este caso estamos agregando solo éste. Podríamos elegir, por ejemplo, la ciudad de Nueva York y nos bajamos toda la ciudad Nueva York. Al usarlo con sources que no son de MAPBOX, nos ahorramos tener que poner un api key, es decir, un token de seguridad generado por MAPBOX, que para generarlo nos tendríamos que haber hecho una cuenta en MAPBOX. Por más que no tenemos que pagar nada, de esta manera nos ahorramos hacer una cuenta. Para el ejemplo que están haciendo, es más ágil. Aquí está la capa de esta metadata que se está cargando acá. Le estamos diciendo que solamente cargue la capa de países. De esta manera, podemos ir a nuestra aplicación y teníamos que ir a la de "destino-detalle". Así que agregamos un "destino-detalle" y le damos "ver". Y aquí vemos cómo se carga el mapa, solamente dibujando los países, porque fue lo que cargamos como origen de datos. Y si le hago clic sobre el "Hola mundo", aparece el alert con un "Hola". De esta manera, concluimos la introducción a componentes complejos, componentes de tipo mapa. Para investigar, pueden investigar todos los diferentes tipos de capas que tiene MAPBOX y además la comunidad. La comunidad también, como en este caso que estamos usando aquí, nos va agregando nuevos orígenes de datos y nuevas capas dibujadas que se van actualizando continuamente, cada semana, cada mes, etcétera. Es como alternativa a tener que usar el origen de datos de MAPBOX. Nos vemos en el próximo video.
