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.
