‫Narrador: A continuación, aprenderá
‫a integrar un mapa agradable que muestre todas las ubicaciones
‫de un recorrido determinado en nuestro sitio web utilizando Mapbox.
‫Pero antes de hacer
‫eso, primero tenemos que arreglar un pequeño error que acabo de encontrar.
‫Así que en este momento estamos en el tour de
‫autocaravanas del parque, pero ves que aquí en realidad
‫dice "The Forest Hiker", ¿de acuerdo? Y entonces, eso obviamente
‫está mal y eso
‫es
‫porque aquí en nuestro controlador de gira, siempre
‫estamos pasando este título, así que "The
‫Forest Hiker Tour".
‫Lo cual, por supuesto, no es correcto, así que arreglemos eso.
‫Bien, digamos aquí
‫tour. nombre y luego
‫tour.
‫Hagamos eso en mayúsculas en realidad.
‫Entonces, ahora deberíamos ver la gira "The park
‫camper" y sí, aquí está.
‫Y ahora sobre ese mapa que
‫se mostrará aquí en esta
‫área vacía, usaremos una biblioteca muy agradable llamada "Mapbox"
‫y esa biblioteca realmente se ejecuta en el front-end.
‫Y así, en esta conferencia
‫vamos a escribir un poco de código
‫de front-end, y no tanto sobre el back-end.
‫Pero esto sigue siendo muy
‫importante porque ahora aprenderá a escribir JavaScript para
‫el lado del cliente y luego a integrarlo en nuestras plantillas.
‫¿Okey?
‫Así que hagamos
‫eso y, en primer lugar, recordemos que todos los datos, es decir,
‫todos los activos que están disponibles en el cliente,
‫están aquí en esta carpeta pública.
‫Entonces, por ejemplo, nuestro archivo CSS, nuestras imágenes y
‫también tenemos una carpeta aquí para JavaScript.
‫Y actualmente está vacío, así que
‫ahora creemos un nuevo archivo aquí llamado
‫Mapbox.
‫js ¿Está bien? Y esto básicamente es un archivo
‫JavaScript que vamos a integrar en nuestro HTML
‫y que luego se ejecutará en el lado del cliente.
‫¿Está bien? Así que como JavaScript
‫normal que has estado escribiendo toda tu vida (Risas) ¿Verdad?
‫Pero por ahora, simplemente hagamos una consola simple. inicie sesión aquí antes
‫de que realmente lo conectemos con nuestro back-end.
‫Así que digamos consola. log hola desde el lado del cliente.
‫Muy
‫bien, y ahora integremoslo en nuestras plantillas.
‫Ahora, podría parecer que el
‫mejor lugar para hacer esta integración es aquí en nuestra plantilla base, ¿verdad?
‫Pero, de hecho, solo queremos incluir el script Mapbox en
‫la página del recorrido, ¿verdad?
‫Entonces, ¿cómo podríamos hacer eso?
‫Y la solución para eso es una vez más,
‫extender un bloque aquí en nuestra plantilla base, así que
‫voy a crear un nuevo bloque
‫aquí que luego vamos a extender del recorrido. ¿Okey?
‫Y de hecho, este bloque estará aquí,
‫y lo llamo
‫"cabeza" y todo este contenido estará allí.
‫Ahora puede que se pregunte por qué hacemos eso,
‫porque cuando ampliamos el
‫bloque, el contenido que hay dentro desaparece.
‫Entonces eso es lo que pasó aquí, ¿verdad?
‫Pero en realidad hay otra forma de extender bloques, que
‫luego simplemente agregará el nuevo contenido al final o
‫al comienzo del bloque.
‫¿Está bien? Así que veamos cómo podemos hacer eso.
‫Y así, justo al comienzo de nuestra plantilla
‫de
‫gira, digamos ahora:
‫block head, y en realidad decimos block append head, ¿de acuerdo?
‫Y así, todo lo que escribamos en este
‫bloque aquí se agregará al contenido que
‫ya está en ese bloque.
‫¿Okey? Y también podríamos
‫usar "anteponer" y luego se agregaría al comienzo del bloque, ¿de acuerdo?
‫Y ahora, todo lo que vamos a hacer aquí es agregar
‫un nuevo guión.
‫Entonces, usando una etiqueta de secuencia de comandos y
‫luego especificando el atributo de origen, por
‫ahora eso es "js / mapbox. js "¿de acuerdo?
‫Entonces, nuevamente, esta plantilla aquí ya extiende nuestra plantilla
‫base, y
‫con esto aquí, básicamente podemos inyectar esta línea
‫de código, en el
‫bloque principal que ya está en nuestra plantilla base.
‫Y entonces, agregamos eso, y entonces aparecerá aquí al final
‫de este bloque de cabeza, así que aquí.
‫Y de hecho, intentemos ahora.
‫Entonces, cuando vuelva
‫a cargar, ahora deberíamos obtener ese mensaje en nuestra
‫consola y, de hecho, "Hola desde el lado del
‫cliente".
‫Genial. A continuación, queremos tener acceso a los datos
‫de ubicación del recorrido que
‫estamos tratando de mostrar actualmente. aquí
‫mismo en el archivo JavaScript.
‫Entonces, ¿cómo vas a hacer eso?
‫Bueno, entonces podemos hacer una solicitud Ajax, así que
‫básicamente una llamada a nuestra API y obtener
‫los datos desde allí.
‫Pero eso no es realmente necesario en este caso.
‫Entonces, déjame mostrarte un buen truco.
‫Entonces, aquí en nuestra plantilla de
‫recorrido, ya tenemos todos los datos sobre el recorrido en
‫sí, por lo que ahora
‫podemos simplemente poner esos datos en nuestro
‫HTML para que JavaScript pueda leerlos desde allí, ¿de acuerdo?
‫Básicamente, vamos a exponer los datos de ubicación,
‫aquí mismo como una cadena en el HTML
‫y nuestro JavaScript los recogerá desde
‫allí sin tener que hacerlo, como cualquier llamada a la API por separado.
‫Entonces, bajemos aquí a nuestra
‫clase o sección de mapas, ¿de acuerdo?
‫Entonces, esta sección aquí, y ya tiene un elemento Diff
‫con una clase
‫de mapa, y verá por qué es una ID un poco
‫más tarde, ¿de acuerdo? Pero por ahora quiero especificar
‫un atributo de datos aquí, ¿de acuerdo?
‫Entonces, hay un truco muy bueno en JavaScript
‫donde podemos especificar un atributo de datos en HTML, y luego
‫leer dicho atributo usando JavaScript de una
‫manera muy fácil.
‫Y así es como
‫funciona, entonces podemos decir "datos /" y
‫luego aquí como queramos llamarlo,
‫en este caso decimos
‫"ubicaciones", ¿de acuerdo? Y luego lo configuramos para nuestro recorrido. ubicaciones.
‫Ahora, antes de
‫hacer eso, necesitamos transformar esa matriz en una cadena, ¿verdad?
‫Entonces, echemos un vistazo rápido a eso.
‫Entonces, nuestras ubicaciones son toda esta matriz con
‫estos objetos allí.
‫Pero en HTML, por supuesto, no podemos tener matrices u
‫objetos ni nada de eso, así que lo que
‫tenemos que hacer
‫es convertir todo eso en una cadena.
‫Y eso, afortunadamente, es bastante fácil.
‫Todo lo que tenemos que hacer es "JSON. stringify "¿de acuerdo?
‫Y luego aquí gira. ubicación, o en realidad
‫esas
‫son ubicaciones. ¿Está bien?
‫Y si lo
‫guardamos ahora, vamos a abrirlo aquí e inspeccionar este mapa aquí, y ahora
‫verá las ubicaciones de los datos, y
‫tenemos esta cadena enorme aquí, que
‫básicamente contiene todos nuestros datos de ubicación.
‫Muy bien, y
‫ahora en nuestro JavaScript podemos conseguirlo
‫muy fácilmente.
‫Entonces, las ubicaciones están en
‫document. getElementById y luego
‫map, y ahora aquí va la parte del truco, porque lo
‫que sea que pongamos en un atributo de datos como este, se almacenará en la
‫propiedad del conjunto de datos y, en este caso,
‫en el conjunto de datos. ubicaciones, porque
‫se llama datos / o ubicación de datos.
‫¿Okey? Así que
‫así, conjunto de datos. ubicaciones, ¿de acuerdo?
‫Y ahora tenemos todos estos
‫errores aquí provenientes
‫de ESlint, y eso es porque ESlint está configurado
‫para Node. js y no
‫para JavaScript, por lo que
‫lo que podemos hacer aquí es básicamente deshabilitar
‫ESlint para todo este archivo, hasta que digamos básicamente con un
‫comentario al principio aquí, ESlint deshabilitar y entonces sí, entonces entenderá esto
‫y lo cambiará por completo. desactivado para todo este archivo, ¿de acuerdo?
‫Entonces, esos son los datos de
‫ubicación aquí que acabamos de poner en
‫nuestro HTML, pero recuerde que es una
‫cadena y, por lo tanto, debemos convertirla de nuevo a JSON, y
‫luego a JSON. analizar y
‫luego todo lo que hay aquí.
‫Muy bien, y ahora echemos un vistazo a eso solo para
‫ver si todo está funcionando correctamente.
‫Recarguemos, y
‫ahora algo salió mal aquí en nuestro archivo Mapbox, bueno, eso
‫también parece correcto en realidad, así
‫que probemos si realmente se llama mapa aquí y, de hecho, es una
‫ID con mapa, por lo que creo
‫que probablemente el problema es que en ese momento
‫llamamos o obtenemos el elemento
‫por ID, así que esto aquí,
‫así que probablemente en
‫este momento el DOM no esté ya
‫cargado, ¿de acuerdo? Y eso es
‫porque tenemos nuestro script integrado justo al principio del archivo, por lo que este
‫script aquí está justo
‫en la cabecera, mientras que en realidad debería estar
‫al final de la página. ¿Okey?
‫Así que déjame copiar este aquí
‫y ponerlo manualmente en la
‫base, así que lo copiaré y lo comentaré,
‫pero no te preocupes, todavía usaremos esta técnica de
‫agregar bloques aquí un poco más adelante en el video, porque
‫hay algunas cosas que vienen de Mapbox que
‫todavía necesitamos poner en la
‫cabeza, ¿de acuerdo? Pero, por ahora, coloquemos este
‫script aquí, en la parte inferior de la página.
‫¿Okey?
‫Eso (risas) por
‫supuesto, solo quería ir a otro
‫archivo, para poder guardarlo para que el servidor
‫realmente se recargue porque estos
‫archivos pug, como probablemente
‫hayas notado aquí, no activan un reinicio
‫de nuestro servidor. , ¿está bien?
‫De todos modos, tengo la esperanza de que ahora vaya a
‫funcionar y, de hecho, lo hace.
‫Tenemos una variedad aquí
‫y, de hecho, estas son las cuatro ubicaciones de nuestro recorrido.
‫Bien, ahora tenemos todo muy bien integrado y
‫listo para integrar Mapbox y crear nuestro
‫propio mapa aquí.
‫Pero para no crear un video demasiado largo,
‫lo haré en el siguiente.