‫-: Continuemos ahora construyendo nuestra integración de mapas.
‫Y ahora vayamos a Mapbox.
‫Entonces, ahora estoy usando Mapbox en lugar de Google Maps y
‫eso se debe a
‫que hace algún tiempo, Google Maps comenzó
‫a requerir una tarjeta de crédito
‫para poder usar Google Maps.
‫Y no creo que sea una buena idea para un curso
‫como este y, de hecho, también me gusta
‫mucho Mapbox, por lo que creo que es perfecto para que lo usemos en este curso.
‫También tienen una excelente documentación
‫que probaremos en un segundo aquí.
‫Pero por ahora, comencemos y creemos una nueva cuenta.
‫Así que pulsa aquí para empezar a construir.
‫Y luego, por supuesto, cree su cuenta gratuita.
‫Ya tengo uno, así que
‫pause el video en este punto para crear esa cuenta.
‫Y después de crear su cuenta,
‫debe llegar a una página que se parezca a esta.
‫Ahora, para cuando esté viendo este
‫video, esta página aquí podría,
‫por supuesto, haber cambiado, y probablemente lo haya
‫hecho, pero lo
‫que tenemos que hacer ahora es encontrar un enlace
‫que diga algo como esto, así que instale el desarrollo
‫del software de mapas. kit, así que esto de aquí, o también integrar Mapbox,
‫que debería ser más o menos lo mismo.
‫Así que haré clic aquí para instalar los mapas para JavaScript.
‫Y lo que vamos a
‫hacer aquí es usar Mapbox CDN para que
‫sea la red de entrega de contenido
‫y, por ahora, al
‫menos no el paquete de módulos NPM.
‫Entonces, el primer paso, como dice aquí,
‫es incluir estos archivos aquí y en el archivo HTML.
‫Y ahí es donde ahora necesitamos esa
‫técnica de extender la cabeza que teníamos antes.
‫Y ahí es donde ahora
‫realmente necesitamos extender la técnica de la cabeza.
‫Aquí en la gira,
‫recuerden cómo sacamos esto de la cabeza, en realidad.
‫Pero ahora todavía necesitamos algunas cosas que
‫debemos agregar a la cabeza.
‫Y ese es este guión, y también esta hoja de estilo.
‫Traduzcamos rápidamente esto aquí a pug.
‫Y el enlace también, y
‫eso es todo.
‫Deshagámonos de
‫esta parte y volvamos al siguiente paso aquí.
‫A continuación, debemos copiar este código JavaScript aquí,
‫en nuestro archivo.
‫Y a nuestro guión, por supuesto.
‫Así que aquí mismo, en mapbox. js.
‫Ahora probablemente no tendrá este token de acceso
‫en este punto, por
‫lo que es necesario que ya lo haga o,
‫de lo contrario, le mostraré cómo hacerlo en un segundo.
‫Sangremos esta parte aquí.
‫Con esto, ya estamos listos para comenzar.
‫De hecho, esto ya debería crear
‫un mapa y mostrarlo en nuestra página.
‫Eso es porque el contenedor aquí está configurado para mapear.
‫Y lo que eso significa es que colocará
‫el mapa en un elemento con el ID de mapa.
‫Es por eso que aquí, en nuestro recorrido, tenemos
‫este elemento aquí, oh, ¿dónde
‫está eso?
‫Así que aquí mismo tenemos un elemento con mapa de identificación.
‫La razón de esto es que aquí en Mapbox, en
‫realidad necesitamos un elemento
‫con un ID que luego podemos especificar aquí.
‫Y el valor predeterminado es
‫mapa, y así es como lo llamé en html.
‫Entonces también tenemos este estilo predeterminado aquí, que
‫vamos a cambiar en un segundo.
‫Por ahora, volvamos a nuestras instrucciones
‫aquí, por lo que dice que hemos terminado aquí.
‫Pero ahora regresemos a nuestra
‫cuenta y creemos ese token que
‫necesitamos para poder acceder a Mapbox.
‫Por favor, no solo copie
‫mi token, eso no funcionará bien para usted.
‫Pero en lugar de eso, crea el tuyo propio.
‫Puede simplemente crear un nuevo nombre para él.
‫Llamémoslo así.
‫Y luego crea token aquí.
‫Luego, ingresa
‫su contraseña, y así, puede usar ese token.
‫Entonces, nuevamente, no estoy seguro de si
‫ya creó este token para usted, o si realmente
‫necesitaba crear uno nuevo.
‫De todos modos, también es bueno tener un token para cada proyecto,
‫de modo que
‫luego pueda restringir ese token solo a ese proyecto.
‫Creé mi cuenta aquí hace mucho tiempo, por lo que
‫no estoy realmente seguro, nuevamente, cómo funcionó, pero
‫de todos modos, teniendo ese token ahora debería estar listo.
‫De hecho, esto ya debería mostrar nuestro mapa predeterminado.
‫Así que recarguemos, y de hecho, este es nuestro mapa predeterminado.
‫No se ve muy bien, bueno,
‫podemos acercarnos, pero
‫en realidad, el estilo no es tan
‫agradable y no coincide con nuestro sitio
‫web y,
‫por supuesto, tampoco tenemos nuestras ubicaciones
‫en ningún lugar trazadas en el mapa.
‫Y ahora, ocupémonos de todo eso.
‫Volvamos a Mapbox, y
‫ahora vamos a nuestro estudio de diseño.
‫Hagamos clic aquí en "comenzar a diseñar un
‫mapa", o nuevamente, si su sitio
‫web se ve un
‫poco diferente en este punto, busque el estudio de diseño.
‫Quizás aparezca en algún lugar de aquí.
‫Así que intentemos eso.
‫Aquí, realmente podemos hacer todo tipo de cosas
‫relacionadas con el diseño de un mapa.
‫En realidad, esto no es realmente lo que
‫esperaba, porque es un poco complejo cambiar todas
‫estas cosas
‫aquí, pero hay algunos estilos predeterminados, ah sí, esto
‫es lo que estaba buscando.
‫Creemos un nuevo estilo
‫aquí, y luego desde allí podemos elegir un estilo predeterminado.
‫Y realmente lo que quiero es este estilo ligero.
‫Así que crea, y de hecho estoy muy contento con la
‫forma en que se ve fuera de la caja.
‫Ahora, por alguna razón, no veo
‫nada aquí, está bien, eso es porque se acercó al mar.
‫Pero de todos modos, vamos a acercarnos a algún lugar aquí,
‫y creo que ya se ve
‫bastante bien, así que simplemente agreguemos un nombre
‫aquí, y
‫lo llamo Grabación de video de Natour porque ya
‫tengo un estilo de Natour, pero tú
‫por supuesto, puedes llamarlo como quieras.
‫Confirmemos el nombre aquí, retrocedamos, y luego aquí
‫en compartir y usar.
‫Y lo que queremos no es compartir, sino utilizar.
‫En algún lugar aquí abajo, deberíamos ver nuestra URL de estilo, y así,
‫sí, esa es la indicada.
‫Por lo tanto, tiene que ser una URL que comience básicamente con Mapbox.
‫Copiemos, retrocedamos y luego reemplacemos el estilo que
‫tenemos aquí como predeterminado, con el que
‫acabamos de crear.
‫Salvarlo, y
‫sí,
‫se ve mucho mejor.
‫Y es exactamente el estilo que acabamos de crear.
‫Así que ahora podemos acercar, alejar o,
‫en realidad, al revés, podemos
‫desplazar el mapa a donde queramos,
‫y también podemos definir un montón de propiedades, de opciones
‫para este mapa.
‫En este momento, cada vez que
‫cargamos el mapa, siempre
‫se ve igual, siempre centrado aquí en Boston.
‫Pero podemos cambiar eso especificando el
‫centro aquí.
‫Y entonces necesitamos pasar una matriz de dos coordenadas.
‫De hecho, obtengamos el de Los Ángeles que
‫usamos antes en Postman, así que exactamente
‫esto,
‫pero, en realidad, Mapbox es exactamente como MongoDB, en
‫el aspecto de requerir primero una longitud y
‫luego la latitud.
‫Tenemos que cambiarlos aquí.
‫Y echemos un vistazo a lo que obtenemos.
‫Y, bueno, eso realmente no nos lleva a ninguna parte.
‫También especifiquemos un nivel de zoom aquí.
‫Digamos cuatro.
‫Quizás eso lo arregle.
‫Y de hecho, esa era esta ilusión.
‫Entonces hay diferentes niveles de zoom.
‫Por ejemplo, podemos probar uno aquí
‫también, y entonces debería estar mucho más acercado,
‫o tal vez alejado, no estoy muy seguro.
‫Ah, está bien, eso realmente lo aleja del todo.
‫Así que digamos 10 aquí, por
‫ejemplo, y como ves, realmente me
‫gusta jugar con este
‫tipo de cosas, y sí, en 10 ahora está muy cerca.
‫También podemos decir que queremos que no sea interactivo,
‫y eso es muy simple.
‫Establezcamos interactivo en falso.
‫Y luego, básicamente, su mapa
‫se verá como una simple imagen en su sitio web.
‫Como puede ver, no puedo desplazar nada
‫aquí, y tampoco puedo desplazarlo.
‫Entonces no hay nada que pueda hacer ahora.
‫Y estas son en realidad solo un par de opciones que
‫podemos configurar.
‫De hecho, volvamos aquí a Mapbox
‫y a la documentación y JavaScript de Mapbox.
‫Aquí obtiene toda la documentación de
‫todo lo que puede hacer con la versión JavaScript de Mapbox.
‫Lo que solo quería mostrarles es que las cosas que
‫les acabo de mostrar están en realidad aquí.
‫Entonces tenemos el contenedor que especificamos, tenemos
‫el estilo y
‫realmente tenemos un montón de cosas.
‫Tan interactivo, y si
‫lo desea, por supuesto, puede jugar con
‫todos estos.
‫Solo quería mostrarte que así es
‫como puedes aprender más cosas sobre Mapbox.
‫Ahora, en realidad no queremos nada de esto.
‫Porque no queremos centrar el mapa en ningún lugar, sino
‫que queremos que averigüe automáticamente la posición
‫del mapa en función de los puntos de ubicación de nuestro recorrido.
‫Lo que vamos a hacer
‫ahora es básicamente poner todas las ubicaciones para un recorrido
‫determinado en el mapa, y luego
‫permitir que el mapa básicamente averigüe automáticamente qué parte del
‫mapa debería mostrar para ajustar todos estos puntos correctamente.
‫Lo primero que debemos hacer es
‫crear una variable vinculada.
‫Los límites equivalen a un nuevo Mapbox GL. límites de longitud latitutde.
‫Y obtenemos acceso a este objeto Mapbox porque
‫incluimos la biblioteca Mapbox al comienzo
‫de nuestra página.
‫Aquí mismo,
‫incluyendo este script aquí, por
‫lo que esta biblioteca Mapbox,
‫esto es lo que expone el objeto Mapbox GL, que
‫luego podemos usar en todo nuestro sitio.
‫Este objeto de límites aquí es básicamente
‫el área que se mostrará en el mapa.
‫Ahora ampliaremos eso con todas las ubicaciones que están
‫en nuestra matriz de ubicaciones.
‫Y esto tendrá un poco más de sentido una
‫vez que comencemos a usarlo.
‫Ahora recorramos todas nuestras ubicaciones y agreguemos un
‫marcador para cada una de ellas.
‫Para cada uno,
‫y veamos bloquear las ubicaciones,
‫por lo que aquí queremos agregar un marcador.
‫Y para eso, en realidad necesitamos
‫crear un nuevo elemento html,
‫en este sentido, realmente es de un nivel un poco bajo,
‫pero lo encuentro realmente
‫muy bueno, porque, así, tenemos mucho control
‫sobre lo que realmente está sucediendo. en nuestro mapa.
‫Y lo que les estoy mostrando
‫aquí es en realidad solo una pequeña fracción
‫de todas las cosas geniales que pueden hacer con Mapbox.
‫Esto aquí es solo un JavaScript estándar,
‫por lo que podemos
‫usar crear elemento para crear elementos.
‫Tal como lo dice el
‫nombre, y aquí queremos crear una nueva diferencia.
‫Y también queremos dar un nombre de clase y
‫ponerlo en el marcador.
‫Y aquí está, es un punto y coma.
‫Entonces, en el CSS, tenemos una
‫clase para este marcador.
‫Marcador, aquí ves la imagen de fondo que se especifica,
‫que es este pin verde aquí.
‫Ese alfiler que verás en un segundo en el mapa, es
‫en realidad una imagen personalizada que diseñé.
‫No viene directamente de Mapbox.
‫Así, realmente puedes ajustarlo a tu propio estilo y a tu
‫propia marca.
‫También definí el tamaño del marcador aquí, sí,
‫es realmente personalizable.
‫Ahora creamos un nuevo marcador dentro de Mapbox diciendo
‫new Mapbox GL. marcador.
‫Y luego, pasamos el elemento que acabamos de crear, entonces L,
‫y luego también especificamos una propiedad de anclaje.
‫Lo que
‫puse al fondo aquí.
‫Y eso significa que es la parte inferior del elemento y,
‫en este caso, la parte inferior de
‫ese pin, que se ubicará en la ubicación exacta del GPS.
‫También podríamos ponerlo en el
‫centro, pero creo que tiene más sentido
‫que abramos esa imagen de nuevo, creo que
‫tiene más sentido que este extremo aquí de la
‫imagen sea el que realmente apunte a la
‫ubicación exacta del GPS.
‫Eso es lo que hacemos con esta propiedad de anclaje.
‫Así que ese es
‫el marcador, y ahora, sobre eso, podemos llamar a un par de métodos.
‫En este momento, Mapbox no sabe nada sobre las coordenadas GPS
‫de este marcador.
‫No lo pusimos en ningún lado.
‫Hagámoslo ahora, así
‫que configure la longitud, la latitud y la igual a
‫la ubicación. coordenadas.
‫Recuerde que esto aquí es una matriz de longitud
‫y latitud forzada.
‫Eso es exactamente lo que espera Mapbox.
‫Solo para asegurarnos de que realmente lo entiendes, echemos
‫un vistazo a los recorridos.
‫Una vez más, cada ubicación tiene estas propiedades de coordenadas, y de
‫ahí es de donde ahora estamos leyendo las coordenadas.
‫Localización. coordenadas.
‫Y luego, finalmente, agregue y luego nuestra variable de mapa.
‫Entonces, este mapa aquí es esta variable de mapa
‫donde creamos nuestro nuevo Mapbox. mapa desde el principio.
‫Y ahora, todo lo que tenemos que hacer para
‫terminar es extender nuestros límites.
‫Así límites. extender y también con ubicaciones, o en realidad "loc",
‫que es la ubicación actual. coordenadas.
‫Esta primera parte aquí realmente agrega el
‫marcador, o
‫crea, hagámoslo aún más específico,
‫creemos
‫el marcador, luego
‫agreguemos el marcador y luego aquí, extienda los límites
‫del mapa para incluir la ubicación actual.
‫Pero eso todavía no es suficiente, porque ahora también
‫lo hacemos para que el mapa realmente se
‫ajuste a los límites.
‫Entonces mapa. ajustar, no no encontrar, pero ajustar límites, y
‫luego, por supuesto, nuestro objeto de límites.
‫Uf.
‫Entonces, mucho trabajo solo para poner algunos marcadores en el mapa.
‫Pero, de nuevo, me resulta muy agradable
‫trabajar con esta biblioteca.
‫Y ahora echemos un vistazo y
‫no estoy seguro de si todo salió bien aquí.
‫Y, de hecho, no fue así, por
‫lo que nuestros mapas no se encuentran en ningún lugar,
‫simplemente alejemos un poco para ver si realmente
‫están en algún lugar, y
‫no lo están.
‫Echemos un vistazo a nuestra consola,
‫y de hecho hay algún tipo de error.
‫Entonces lat, los límites de longitud no son un constructor,
‫y de hecho es al revés.
‫Entonces, nuevamente, Mapbox, al igual que MongoDB, espera
‫que las coordenadas sean primero la longitud
‫y luego la latitud.
‫Eso es lo
‫que tenemos aquí en este nombre, por
‫lo que aquí debería ser igual.
‫Entonces longitud, latitud.
‫Intentémoslo de nuevo aquí.
‫Ahh, ahora eso funciona.
‫Muy agradable.
‫Viste ese bonito zoom.
‫Eso es lo que hace el método de ajuste de límites.
‫Por lo tanto, mueve y amplía el mapa hasta los límites
‫para que se ajuste realmente a nuestros marcadores.
‫Ahora, ves que tenemos este tipo de otros elementos aquí
‫superpuestos a nuestro mapa.
‫Y eso se debe a este diseño
‫que creé con estos bordes aquí.
‫Pero eso no es un
‫problema porque en realidad podemos especificar manualmente algún relleno para estos límites.
‫Podemos pasar un objeto aquí,
‫digamos 200 píxeles superiores, 200 píxeles inferiores
‫y luego 100
‫píxeles izquierdo y derecho.
‫Y no tenemos que especificar los píxeles
‫aquí, supongo que solo soy yo escribiendo tanto CSS.
‫Intentémoslo de nuevo.
‫Oh, bonita animación de
‫zoom, pero eso realmente no respetó nuestra configuración.
‫Y, de hecho, eso se debe a que esto no es correcto.
‫Entonces, en su lugar, deberíamos crear un objeto,
‫y luego allí debemos especificar la propiedad de relleno, que
‫luego tiene todo esto.
‫Así que hagámoslo.
‫Relleno.
‫Y ahora,
‫corta esto y ponlo ahí.
‫Salvarlo aquí.
‫Una vez más.
‫Hombre, algo todavía anda mal aquí.
‫¿Que es eso?
‫Ahh, y por supuesto este código no debería estar aquí.
‫No está en la extensión, de hecho está aquí dentro de los límites adecuados.
‫Así que aquí es donde tiene sentido estar.
‫Arreglemos este código aquí, y ahora tiene sentido.
‫Por supuesto, debe estar en
‫los límites de ajuste, que es al final, la
‫función que ejecuta el movimiento y el zoom.
‫Ahí es donde debería estar
‫el relleno, y podríamos especificar un montón de otras opciones.
‫Y nuevamente, si está
‫interesado en eso, simplemente consulte la documentación.
‫Así que un tercer
‫intento aquí, esperemos que esta vez
‫lo haya hecho bien, ah, y sí, se ve mucho mejor.
‫Pero, todavía hay algunas cosas que podemos mejorar aquí, porque en
‫este momento ni siquiera podemos saber qué es
‫cada una de estas ubicaciones.
‫Y entonces queremos una especie de ventana emergente aquí,
‫que luego muestre información sobre la ubicación.
‫No solo el marcador, sino que también queremos agregar una ventana emergente.
‫Y eso es un poco similar a agregar el
‫marcador, entonces decimos nuevo Mapbox GL. surgir.
‫Luego, como antes, especificamos las coordenadas de
‫esa ventana emergente.
‫Así que ese de aquí.
‫Luego también necesitamos definir el html para esta ventana
‫emergente, y lo haré ahora usando el método set
‫html, porque eso me permitirá agregar algo
‫de contenido directamente en ese
‫html, así que configure html, y luego un cadena de plantilla aquí.
‫Quiero que sea un párrafo
‫y la información que quiero mostrar aquí es
‫el día en el que estaremos en esta ubicación
‫y luego el nombre de la ubicación.
‫Básicamente, quiero mostrar el día, por eso
‫creamos estas propiedades de día aquí, y luego
‫la descripción.
‫Día, y luego ubicación, recuerda cuál es la ubicación indie actual
‫para cada bucle, y luego
‫el día, la
‫ubicación. descripción.
‫Salvarlo aquí,
‫se ve mucho mejor ahora.
‫Y luego, al igual que con el
‫otro, también debemos agregar y luego nuestra variable de mapa.
‫Y esto no se verá perfecto,
‫porque necesitamos especificar algunas opciones, pero todavía
‫quería mostrarles el resultado en este punto.
‫Y entonces, ves que en realidad ahora se superponen
‫a los marcadores.
‫De hecho, podemos arreglar eso usando una propiedad de compensación.
‫Pasamos esas opciones aquí mismo a la nueva ventana emergente.
‫Decimos
‫desplazamiento de 30 píxeles.
‫Y también noté que
‫tenemos demasiado acolchado en la parte
‫inferior, así que reduzcamos eso a 150 y hagamos esto nuevamente.
‫Y entonces, esto se ve bastante bien, creo.
‫Entonces, quienquiera que eche un vistazo
‫a nuestra página, puede ver muy rápidamente
‫qué tipo de itinerario será en este recorrido.
‫Y si hay demasiada
‫información, también podemos cerrar estas ventanas emergentes.
‫Y realmente podríamos agregar todo tipo de cosas a este mapa.
‫Por ejemplo, podríamos crear estas líneas aquí
‫entre estos puntos y
‫unirlas, como una línea verde aquí o algo así.
‫O también podríamos mostrar la ruta
‫real de un
‫punto a otro usando básicamente direcciones,
‫pero hagámoslo simple aquí.
‫Lo único que me queda
‫por hacer aquí es desactivar la función de zoom.
‫Porque en este momento,
‫digamos que estamos haciendo zoom
‫en esta página, o en realidad
‫si estamos desplazándonos en esta página,
‫y una vez que llegamos a esto
‫aquí, y luego seguimos desplazándonos aquí, entonces desplazamos el mapa en lugar de la página.
‫Esa no es una buena experiencia de usuario, por
‫lo que todo lo que
‫tenemos que hacer ahora es básicamente desactivar la función de desplazamiento
‫en este mapa.
‫Aún permitiremos que las personas se muevan de esta manera, pero
‫el zoom estará deshabilitado.
‫Vayamos aquí a nuestro mapa y agreguemos eso.
‫Y no estamos usando valores predeterminados interactivos, porque entonces ni
‫siquiera podríamos desplazarnos por el mapa.
‫Pero de nuevo, eso al menos debería estar permitido.
‫La opción que estoy configurando aquí es el zoom de desplazamiento falso.
‫Y de nuevo, para conocer todas las
‫opciones posibles que puede
‫establecer aquí, siga adelante y eche un vistazo a la referencia.
‫Y ahora, cuando ponemos nuestro mouse aquí y nos desplazamos,
‫no cambia el nivel de zoom.
‫Perfecto.
‫Todavía podemos hacer una panorámica, así que creo que ahora se ve muy bien.
‫Probemos esto en otro.
‫Digamos aquí el excursionista del bosque.
‫Y entonces, eso todavía funciona.
‫Y estos aquí se superponen, pero
‫no hay problema, siempre podemos cerrarlos si queremos.
‫Echemos un vistazo aquí, por ejemplo, explorador marino.
‫Y si somos
‫lo suficientemente rápidos, incluso podemos ver
‫la animación de zoom moviendo el mapa a esa ubicación.
‫De acuerdo, perfecto.
‫Así que espero que hayas podido
‫seguir realmente este ejemplo con todo lo que hicimos en Mapbox.
‫Ahora, en caso de que algo no funcione, asegúrese
‫de que está usando
‫una versión similar a la mía,
‫así que lo que quiero decir es una versión similar de la biblioteca Mapbox.
‫Que en mi caso aquí es la versión 0. 54.
‫El tuyo probablemente no debería ser 1. alguna cosa.
‫Entonces, si está
‫viendo este video mucho tiempo después de esta grabación y tiene un
‫V1 aquí, continúe y cámbielo a 0. algo, de modo que
‫básicamente no haya cambios importantes allí.
‫De todos modos, con eso, terminamos nuestra página del recorrido, por lo
‫que ya no necesitamos nada de
‫esto, el mapa también está allí y,
‫por lo tanto, esta parte del sitio web está realmente terminada.
‫Impresionante.
‫Felicitaciones por hacerlo realidad, por comenzar a
‫construir este hermoso sitio web utilizando todas estas
‫increíbles tecnologías que ha aprendido
‫hasta ahora.