1 00:00:00,780 --> 00:00:04,163 ‫-: Continuemos ahora construyendo nuestra integración de mapas. 2 00:00:05,720 --> 00:00:08,637 ‫Y ahora vayamos a Mapbox. 3 00:00:11,036 --> 00:00:15,090 ‫Entonces, ahora estoy usando Mapbox en lugar de Google Maps y 4 00:00:15,090 --> 00:00:16,710 ‫eso se debe a 5 00:00:16,710 --> 00:00:19,260 ‫que hace algún tiempo, Google Maps comenzó 6 00:00:19,260 --> 00:00:21,300 ‫a requerir una tarjeta de crédito 7 00:00:21,300 --> 00:00:23,220 ‫para poder usar Google Maps. 8 00:00:23,220 --> 00:00:26,640 ‫Y no creo que sea una buena idea para un curso 9 00:00:26,640 --> 00:00:29,160 ‫como este y, de hecho, también me gusta 10 00:00:29,160 --> 00:00:33,723 ‫mucho Mapbox, por lo que creo que es perfecto para que lo usemos en este curso. 11 00:00:35,500 --> 00:00:37,720 ‫También tienen una excelente documentación 12 00:00:37,720 --> 00:00:40,130 ‫que probaremos en un segundo aquí. 13 00:00:40,130 --> 00:00:43,330 ‫Pero por ahora, comencemos y creemos una nueva cuenta. 14 00:00:43,330 --> 00:00:45,623 ‫Así que pulsa aquí para empezar a construir. 15 00:00:48,208 --> 00:00:51,960 ‫Y luego, por supuesto, cree su cuenta gratuita. 16 00:00:51,960 --> 00:00:54,370 ‫Ya tengo uno, así que 17 00:00:54,370 --> 00:00:58,200 ‫pause el video en este punto para crear esa cuenta. 18 00:00:58,200 --> 00:01:00,210 ‫Y después de crear su cuenta, 19 00:01:00,210 --> 00:01:02,960 ‫debe llegar a una página que se parezca a esta. 20 00:01:02,960 --> 00:01:05,009 ‫Ahora, para cuando esté viendo este 21 00:01:05,009 --> 00:01:06,820 ‫video, esta página aquí podría, 22 00:01:06,820 --> 00:01:09,430 ‫por supuesto, haber cambiado, y probablemente lo haya 23 00:01:09,430 --> 00:01:11,020 ‫hecho, pero lo 24 00:01:11,020 --> 00:01:13,900 ‫que tenemos que hacer ahora es encontrar un enlace 25 00:01:13,900 --> 00:01:17,281 ‫que diga algo como esto, así que instale el desarrollo 26 00:01:17,281 --> 00:01:21,850 ‫del software de mapas. kit, así que esto de aquí, o también integrar Mapbox, 27 00:01:21,850 --> 00:01:24,455 ‫que debería ser más o menos lo mismo. 28 00:01:24,455 --> 00:01:29,025 ‫Así que haré clic aquí para instalar los mapas para JavaScript. 29 00:01:29,025 --> 00:01:30,720 ‫Y lo que vamos a 30 00:01:30,720 --> 00:01:33,100 ‫hacer aquí es usar Mapbox CDN para que 31 00:01:33,100 --> 00:01:35,050 ‫sea la red de entrega de contenido 32 00:01:35,050 --> 00:01:36,500 ‫y, por ahora, al 33 00:01:36,500 --> 00:01:38,503 ‫menos no el paquete de módulos NPM. 34 00:01:40,230 --> 00:01:43,500 ‫Entonces, el primer paso, como dice aquí, 35 00:01:43,500 --> 00:01:47,941 ‫es incluir estos archivos aquí y en el archivo HTML. 36 00:01:47,941 --> 00:01:51,121 ‫Y ahí es donde ahora necesitamos esa 37 00:01:51,121 --> 00:01:54,663 ‫técnica de extender la cabeza que teníamos antes. 38 00:01:56,970 --> 00:01:58,860 ‫Y ahí es donde ahora 39 00:01:58,860 --> 00:02:01,293 ‫realmente necesitamos extender la técnica de la cabeza. 40 00:02:02,443 --> 00:02:04,060 ‫Aquí en la gira, 41 00:02:04,060 --> 00:02:07,690 ‫recuerden cómo sacamos esto de la cabeza, en realidad. 42 00:02:07,690 --> 00:02:10,550 ‫Pero ahora todavía necesitamos algunas cosas que 43 00:02:10,550 --> 00:02:12,940 ‫debemos agregar a la cabeza. 44 00:02:12,940 --> 00:02:16,533 ‫Y ese es este guión, y también esta hoja de estilo. 45 00:02:17,570 --> 00:02:19,833 ‫Traduzcamos rápidamente esto aquí a pug. 46 00:02:26,250 --> 00:02:28,533 ‫Y el enlace también, y 47 00:02:31,470 --> 00:02:33,300 ‫eso es todo. 48 00:02:33,300 --> 00:02:34,663 ‫Deshagámonos de 49 00:02:35,930 --> 00:02:39,370 ‫esta parte y volvamos al siguiente paso aquí. 50 00:02:39,370 --> 00:02:43,720 ‫A continuación, debemos copiar este código JavaScript aquí, 51 00:02:43,720 --> 00:02:45,885 ‫en nuestro archivo. 52 00:02:45,885 --> 00:02:48,050 ‫Y a nuestro guión, por supuesto. 53 00:02:48,050 --> 00:02:51,140 ‫Así que aquí mismo, en mapbox. js. 54 00:02:51,140 --> 00:02:53,860 ‫Ahora probablemente no tendrá este token de acceso 55 00:02:53,860 --> 00:02:55,360 ‫en este punto, por 56 00:02:55,360 --> 00:02:58,180 ‫lo que es necesario que ya lo haga o, 57 00:02:58,180 --> 00:03:01,343 ‫de lo contrario, le mostraré cómo hacerlo en un segundo. 58 00:03:02,586 --> 00:03:05,230 ‫Sangremos esta parte aquí. 59 00:03:05,230 --> 00:03:09,510 ‫Con esto, ya estamos listos para comenzar. 60 00:03:09,510 --> 00:03:11,640 ‫De hecho, esto ya debería crear 61 00:03:11,640 --> 00:03:14,090 ‫un mapa y mostrarlo en nuestra página. 62 00:03:14,090 --> 00:03:17,760 ‫Eso es porque el contenedor aquí está configurado para mapear. 63 00:03:17,760 --> 00:03:20,260 ‫Y lo que eso significa es que colocará 64 00:03:20,260 --> 00:03:23,270 ‫el mapa en un elemento con el ID de mapa. 65 00:03:23,270 --> 00:03:26,410 ‫Es por eso que aquí, en nuestro recorrido, tenemos 66 00:03:27,280 --> 00:03:29,010 ‫este elemento aquí, oh, ¿dónde 67 00:03:29,010 --> 00:03:30,003 ‫está eso? 68 00:03:31,100 --> 00:03:34,760 ‫Así que aquí mismo tenemos un elemento con mapa de identificación. 69 00:03:34,760 --> 00:03:37,730 ‫La razón de esto es que aquí en Mapbox, en 70 00:03:37,730 --> 00:03:39,390 ‫realidad necesitamos un elemento 71 00:03:39,390 --> 00:03:41,940 ‫con un ID que luego podemos especificar aquí. 72 00:03:41,940 --> 00:03:43,920 ‫Y el valor predeterminado es 73 00:03:43,920 --> 00:03:46,750 ‫mapa, y así es como lo llamé en html. 74 00:03:46,750 --> 00:03:48,900 ‫Entonces también tenemos este estilo predeterminado aquí, que 75 00:03:48,900 --> 00:03:50,700 ‫vamos a cambiar en un segundo. 76 00:03:52,070 --> 00:03:54,393 ‫Por ahora, volvamos a nuestras instrucciones 77 00:03:56,530 --> 00:03:59,720 ‫aquí, por lo que dice que hemos terminado aquí. 78 00:03:59,720 --> 00:04:02,707 ‫Pero ahora regresemos a nuestra 79 00:04:02,707 --> 00:04:06,185 ‫cuenta y creemos ese token que 80 00:04:06,185 --> 00:04:09,650 ‫necesitamos para poder acceder a Mapbox. 81 00:04:09,650 --> 00:04:11,460 ‫Por favor, no solo copie 82 00:04:11,460 --> 00:04:13,990 ‫mi token, eso no funcionará bien para usted. 83 00:04:13,990 --> 00:04:16,270 ‫Pero en lugar de eso, crea el tuyo propio. 84 00:04:16,270 --> 00:04:19,363 ‫Puede simplemente crear un nuevo nombre para él. 85 00:04:21,760 --> 00:04:23,713 ‫Llamémoslo así. 86 00:04:26,010 --> 00:04:28,200 ‫Y luego crea token aquí. 87 00:04:28,200 --> 00:04:29,550 ‫Luego, ingresa 88 00:04:32,040 --> 00:04:35,640 ‫su contraseña, y así, puede usar ese token. 89 00:04:35,640 --> 00:04:38,150 ‫Entonces, nuevamente, no estoy seguro de si 90 00:04:38,150 --> 00:04:40,860 ‫ya creó este token para usted, o si realmente 91 00:04:40,860 --> 00:04:42,360 ‫necesitaba crear uno nuevo. 92 00:04:42,360 --> 00:04:46,500 ‫De todos modos, también es bueno tener un token para cada proyecto, 93 00:04:46,500 --> 00:04:47,820 ‫de modo que 94 00:04:47,820 --> 00:04:50,668 ‫luego pueda restringir ese token solo a ese proyecto. 95 00:04:50,668 --> 00:04:54,160 ‫Creé mi cuenta aquí hace mucho tiempo, por lo que 96 00:04:54,160 --> 00:04:57,530 ‫no estoy realmente seguro, nuevamente, cómo funcionó, pero 97 00:04:57,530 --> 00:05:01,073 ‫de todos modos, teniendo ese token ahora debería estar listo. 98 00:05:03,730 --> 00:05:07,883 ‫De hecho, esto ya debería mostrar nuestro mapa predeterminado. 99 00:05:09,250 --> 00:05:13,990 ‫Así que recarguemos, y de hecho, este es nuestro mapa predeterminado. 100 00:05:13,990 --> 00:05:15,960 ‫No se ve muy bien, bueno, 101 00:05:15,960 --> 00:05:17,313 ‫podemos acercarnos, pero 102 00:05:19,390 --> 00:05:21,620 ‫en realidad, el estilo no es tan 103 00:05:21,620 --> 00:05:24,110 ‫agradable y no coincide con nuestro sitio 104 00:05:24,110 --> 00:05:25,090 ‫web y, 105 00:05:25,090 --> 00:05:27,198 ‫por supuesto, tampoco tenemos nuestras ubicaciones 106 00:05:27,198 --> 00:05:29,627 ‫en ningún lugar trazadas en el mapa. 107 00:05:29,627 --> 00:05:33,700 ‫Y ahora, ocupémonos de todo eso. 108 00:05:33,700 --> 00:05:35,914 ‫Volvamos a Mapbox, y 109 00:05:35,914 --> 00:05:38,783 ‫ahora vamos a nuestro estudio de diseño. 110 00:05:40,280 --> 00:05:42,900 ‫Hagamos clic aquí en "comenzar a diseñar un 111 00:05:42,900 --> 00:05:44,720 ‫mapa", o nuevamente, si su sitio 112 00:05:44,720 --> 00:05:46,200 ‫web se ve un 113 00:05:46,200 --> 00:05:49,313 ‫poco diferente en este punto, busque el estudio de diseño. 114 00:05:50,680 --> 00:05:53,093 ‫Quizás aparezca en algún lugar de aquí. 115 00:05:56,220 --> 00:05:57,433 ‫Así que intentemos eso. 116 00:06:01,560 --> 00:06:04,330 ‫Aquí, realmente podemos hacer todo tipo de cosas 117 00:06:04,330 --> 00:06:07,010 ‫relacionadas con el diseño de un mapa. 118 00:06:07,010 --> 00:06:10,340 ‫En realidad, esto no es realmente lo que 119 00:06:10,340 --> 00:06:13,670 ‫esperaba, porque es un poco complejo cambiar todas 120 00:06:13,670 --> 00:06:15,090 ‫estas cosas 121 00:06:15,090 --> 00:06:18,670 ‫aquí, pero hay algunos estilos predeterminados, ah sí, esto 122 00:06:18,670 --> 00:06:20,670 ‫es lo que estaba buscando. 123 00:06:21,520 --> 00:06:23,640 ‫Creemos un nuevo estilo 124 00:06:23,640 --> 00:06:27,790 ‫aquí, y luego desde allí podemos elegir un estilo predeterminado. 125 00:06:27,790 --> 00:06:30,483 ‫Y realmente lo que quiero es este estilo ligero. 126 00:06:31,400 --> 00:06:34,560 ‫Así que crea, y de hecho estoy muy contento con la 127 00:06:34,560 --> 00:06:37,330 ‫forma en que se ve fuera de la caja. 128 00:06:37,330 --> 00:06:39,972 ‫Ahora, por alguna razón, no veo 129 00:06:39,972 --> 00:06:43,937 ‫nada aquí, está bien, eso es porque se acercó al mar. 130 00:06:43,937 --> 00:06:48,937 ‫Pero de todos modos, vamos a acercarnos a algún lugar aquí, 131 00:06:50,570 --> 00:06:53,830 ‫y creo que ya se ve 132 00:06:53,830 --> 00:06:57,407 ‫bastante bien, así que simplemente agreguemos un nombre 133 00:06:57,407 --> 00:06:58,550 ‫aquí, y 134 00:07:00,790 --> 00:07:04,968 ‫lo llamo Grabación de video de Natour porque ya 135 00:07:04,968 --> 00:07:08,430 ‫tengo un estilo de Natour, pero tú 136 00:07:08,430 --> 00:07:11,724 ‫por supuesto, puedes llamarlo como quieras. 137 00:07:11,724 --> 00:07:16,340 ‫Confirmemos el nombre aquí, retrocedamos, y luego aquí 138 00:07:16,340 --> 00:07:19,230 ‫en compartir y usar. 139 00:07:19,230 --> 00:07:23,393 ‫Y lo que queremos no es compartir, sino utilizar. 140 00:07:23,393 --> 00:07:28,393 ‫En algún lugar aquí abajo, deberíamos ver nuestra URL de estilo, y así, 141 00:07:28,640 --> 00:07:30,960 ‫sí, esa es la indicada. 142 00:07:30,960 --> 00:07:34,877 ‫Por lo tanto, tiene que ser una URL que comience básicamente con Mapbox. 143 00:07:37,480 --> 00:07:40,630 ‫Copiemos, retrocedamos y luego reemplacemos el estilo que 144 00:07:40,630 --> 00:07:43,640 ‫tenemos aquí como predeterminado, con el que 145 00:07:43,640 --> 00:07:45,363 ‫acabamos de crear. 146 00:07:47,699 --> 00:07:49,363 ‫Salvarlo, y 147 00:07:50,750 --> 00:07:51,630 ‫sí, 148 00:07:54,060 --> 00:07:56,650 ‫se ve mucho mejor. 149 00:07:56,650 --> 00:07:59,650 ‫Y es exactamente el estilo que acabamos de crear. 150 00:07:59,650 --> 00:08:02,473 ‫Así que ahora podemos acercar, alejar o, 151 00:08:02,473 --> 00:08:04,830 ‫en realidad, al revés, podemos 152 00:08:04,830 --> 00:08:07,433 ‫desplazar el mapa a donde queramos, 153 00:08:08,964 --> 00:08:13,136 ‫y también podemos definir un montón de propiedades, de opciones 154 00:08:13,136 --> 00:08:15,123 ‫para este mapa. 155 00:08:15,960 --> 00:08:17,810 ‫En este momento, cada vez que 156 00:08:17,810 --> 00:08:19,230 ‫cargamos el mapa, siempre 157 00:08:19,230 --> 00:08:21,510 ‫se ve igual, siempre centrado aquí en Boston. 158 00:08:21,510 --> 00:08:24,230 ‫Pero podemos cambiar eso especificando el 159 00:08:25,720 --> 00:08:26,803 ‫centro aquí. 160 00:08:28,600 --> 00:08:31,580 ‫Y entonces necesitamos pasar una matriz de dos coordenadas. 161 00:08:31,580 --> 00:08:34,610 ‫De hecho, obtengamos el de Los Ángeles que 162 00:08:34,610 --> 00:08:37,473 ‫usamos antes en Postman, así que exactamente 163 00:08:42,356 --> 00:08:43,189 ‫esto, 164 00:08:48,210 --> 00:08:51,870 ‫pero, en realidad, Mapbox es exactamente como MongoDB, en 165 00:08:51,870 --> 00:08:55,200 ‫el aspecto de requerir primero una longitud y 166 00:08:55,200 --> 00:08:56,603 ‫luego la latitud. 167 00:08:58,270 --> 00:09:00,020 ‫Tenemos que cambiarlos aquí. 168 00:09:02,925 --> 00:09:05,363 ‫Y echemos un vistazo a lo que obtenemos. 169 00:09:07,330 --> 00:09:10,083 ‫Y, bueno, eso realmente no nos lleva a ninguna parte. 170 00:09:12,330 --> 00:09:15,953 ‫También especifiquemos un nivel de zoom aquí. 171 00:09:17,310 --> 00:09:18,400 ‫Digamos cuatro. 172 00:09:18,400 --> 00:09:19,843 ‫Quizás eso lo arregle. 173 00:09:26,030 --> 00:09:29,153 ‫Y de hecho, esa era esta ilusión. 174 00:09:30,221 --> 00:09:33,150 ‫Entonces hay diferentes niveles de zoom. 175 00:09:33,150 --> 00:09:35,820 ‫Por ejemplo, podemos probar uno aquí 176 00:09:35,820 --> 00:09:38,760 ‫también, y entonces debería estar mucho más acercado, 177 00:09:38,760 --> 00:09:41,460 ‫o tal vez alejado, no estoy muy seguro. 178 00:09:41,460 --> 00:09:45,040 ‫Ah, está bien, eso realmente lo aleja del todo. 179 00:09:45,040 --> 00:09:46,943 ‫Así que digamos 10 aquí, por 180 00:09:49,180 --> 00:09:51,430 ‫ejemplo, y como ves, realmente me 181 00:09:51,430 --> 00:09:53,320 ‫gusta jugar con este 182 00:09:53,320 --> 00:09:57,360 ‫tipo de cosas, y sí, en 10 ahora está muy cerca. 183 00:09:57,360 --> 00:10:00,913 ‫También podemos decir que queremos que no sea interactivo, 184 00:10:02,130 --> 00:10:04,400 ‫y eso es muy simple. 185 00:10:04,400 --> 00:10:07,683 ‫Establezcamos interactivo en falso. 186 00:10:08,610 --> 00:10:10,610 ‫Y luego, básicamente, su mapa 187 00:10:10,610 --> 00:10:13,823 ‫se verá como una simple imagen en su sitio web. 188 00:10:15,960 --> 00:10:18,570 ‫Como puede ver, no puedo desplazar nada 189 00:10:18,570 --> 00:10:20,650 ‫aquí, y tampoco puedo desplazarlo. 190 00:10:20,650 --> 00:10:22,955 ‫Entonces no hay nada que pueda hacer ahora. 191 00:10:22,955 --> 00:10:25,940 ‫Y estas son en realidad solo un par de opciones que 192 00:10:25,940 --> 00:10:26,803 ‫podemos configurar. 193 00:10:29,010 --> 00:10:32,090 ‫De hecho, volvamos aquí a Mapbox 194 00:10:32,090 --> 00:10:36,093 ‫y a la documentación y JavaScript de Mapbox. 195 00:10:39,160 --> 00:10:42,020 ‫Aquí obtiene toda la documentación de 196 00:10:42,020 --> 00:10:46,300 ‫todo lo que puede hacer con la versión JavaScript de Mapbox. 197 00:10:46,300 --> 00:10:48,790 ‫Lo que solo quería mostrarles es que las cosas que 198 00:10:48,790 --> 00:10:51,240 ‫les acabo de mostrar están en realidad aquí. 199 00:10:51,240 --> 00:10:53,550 ‫Entonces tenemos el contenedor que especificamos, tenemos 200 00:10:53,550 --> 00:10:55,023 ‫el estilo y 201 00:10:55,990 --> 00:10:57,970 ‫realmente tenemos un montón de cosas. 202 00:10:57,970 --> 00:10:59,720 ‫Tan interactivo, y si 203 00:10:59,720 --> 00:11:02,750 ‫lo desea, por supuesto, puede jugar con 204 00:11:02,750 --> 00:11:03,873 ‫todos estos. 205 00:11:05,192 --> 00:11:08,120 ‫Solo quería mostrarte que así es 206 00:11:08,120 --> 00:11:11,400 ‫como puedes aprender más cosas sobre Mapbox. 207 00:11:11,400 --> 00:11:14,496 ‫Ahora, en realidad no queremos nada de esto. 208 00:11:14,496 --> 00:11:17,800 ‫Porque no queremos centrar el mapa en ningún lugar, sino 209 00:11:17,800 --> 00:11:20,490 ‫que queremos que averigüe automáticamente la posición 210 00:11:20,490 --> 00:11:24,551 ‫del mapa en función de los puntos de ubicación de nuestro recorrido. 211 00:11:24,551 --> 00:11:26,739 ‫Lo que vamos a hacer 212 00:11:26,739 --> 00:11:30,410 ‫ahora es básicamente poner todas las ubicaciones para un recorrido 213 00:11:30,410 --> 00:11:32,660 ‫determinado en el mapa, y luego 214 00:11:32,660 --> 00:11:36,180 ‫permitir que el mapa básicamente averigüe automáticamente qué parte del 215 00:11:36,180 --> 00:11:39,280 ‫mapa debería mostrar para ajustar todos estos puntos correctamente. 216 00:11:39,280 --> 00:11:41,540 ‫Lo primero que debemos hacer es 217 00:11:41,540 --> 00:11:43,713 ‫crear una variable vinculada. 218 00:11:47,060 --> 00:11:52,060 ‫Los límites equivalen a un nuevo Mapbox GL. límites de longitud latitutde. 219 00:12:00,360 --> 00:12:03,320 ‫Y obtenemos acceso a este objeto Mapbox porque 220 00:12:03,320 --> 00:12:05,520 ‫incluimos la biblioteca Mapbox al comienzo 221 00:12:05,520 --> 00:12:06,983 ‫de nuestra página. 222 00:12:09,210 --> 00:12:10,113 ‫Aquí mismo, 223 00:12:11,270 --> 00:12:12,883 ‫incluyendo este script aquí, por 224 00:12:14,050 --> 00:12:15,760 ‫lo que esta biblioteca Mapbox, 225 00:12:15,760 --> 00:12:18,760 ‫esto es lo que expone el objeto Mapbox GL, que 226 00:12:18,760 --> 00:12:21,193 ‫luego podemos usar en todo nuestro sitio. 227 00:12:24,180 --> 00:12:26,870 ‫Este objeto de límites aquí es básicamente 228 00:12:26,870 --> 00:12:29,589 ‫el área que se mostrará en el mapa. 229 00:12:29,589 --> 00:12:32,860 ‫Ahora ampliaremos eso con todas las ubicaciones que están 230 00:12:32,860 --> 00:12:35,043 ‫en nuestra matriz de ubicaciones. 231 00:12:35,043 --> 00:12:37,597 ‫Y esto tendrá un poco más de sentido una 232 00:12:37,597 --> 00:12:39,333 ‫vez que comencemos a usarlo. 233 00:12:41,490 --> 00:12:44,050 ‫Ahora recorramos todas nuestras ubicaciones y agreguemos un 234 00:12:44,050 --> 00:12:46,203 ‫marcador para cada una de ellas. 235 00:12:48,150 --> 00:12:49,750 ‫Para cada uno, 236 00:12:49,750 --> 00:12:52,313 ‫y veamos bloquear las ubicaciones, 237 00:12:54,840 --> 00:12:58,150 ‫por lo que aquí queremos agregar un marcador. 238 00:12:58,150 --> 00:13:00,160 ‫Y para eso, en realidad necesitamos 239 00:13:00,160 --> 00:13:02,053 ‫crear un nuevo elemento html, 240 00:13:04,228 --> 00:13:07,900 ‫en este sentido, realmente es de un nivel un poco bajo, 241 00:13:07,900 --> 00:13:09,780 ‫pero lo encuentro realmente 242 00:13:09,780 --> 00:13:12,230 ‫muy bueno, porque, así, tenemos mucho control 243 00:13:12,230 --> 00:13:15,110 ‫sobre lo que realmente está sucediendo. en nuestro mapa. 244 00:13:15,110 --> 00:13:17,070 ‫Y lo que les estoy mostrando 245 00:13:17,070 --> 00:13:19,366 ‫aquí es en realidad solo una pequeña fracción 246 00:13:19,366 --> 00:13:22,083 ‫de todas las cosas geniales que pueden hacer con Mapbox. 247 00:13:23,525 --> 00:13:26,593 ‫Esto aquí es solo un JavaScript estándar, 248 00:13:26,593 --> 00:13:28,928 ‫por lo que podemos 249 00:13:28,928 --> 00:13:31,490 ‫usar crear elemento para crear elementos. 250 00:13:31,490 --> 00:13:33,040 ‫Tal como lo dice el 251 00:13:33,040 --> 00:13:35,490 ‫nombre, y aquí queremos crear una nueva diferencia. 252 00:13:35,490 --> 00:13:38,653 ‫Y también queremos dar un nombre de clase y 253 00:13:44,700 --> 00:13:46,193 ‫ponerlo en el marcador. 254 00:13:47,945 --> 00:13:50,170 ‫Y aquí está, es un punto y coma. 255 00:13:50,170 --> 00:13:52,500 ‫Entonces, en el CSS, tenemos una 256 00:13:52,500 --> 00:13:54,313 ‫clase para este marcador. 257 00:13:57,140 --> 00:14:00,870 ‫Marcador, aquí ves la imagen de fondo que se especifica, 258 00:14:00,870 --> 00:14:03,459 ‫que es este pin verde aquí. 259 00:14:03,459 --> 00:14:07,210 ‫Ese alfiler que verás en un segundo en el mapa, es 260 00:14:07,210 --> 00:14:10,110 ‫en realidad una imagen personalizada que diseñé. 261 00:14:10,110 --> 00:14:13,070 ‫No viene directamente de Mapbox. 262 00:14:13,070 --> 00:14:16,500 ‫Así, realmente puedes ajustarlo a tu propio estilo y a tu 263 00:14:16,500 --> 00:14:17,333 ‫propia marca. 264 00:14:17,333 --> 00:14:21,733 ‫También definí el tamaño del marcador aquí, sí, 265 00:14:23,500 --> 00:14:25,363 ‫es realmente personalizable. 266 00:14:27,362 --> 00:14:32,335 ‫Ahora creamos un nuevo marcador dentro de Mapbox diciendo 267 00:14:32,335 --> 00:14:37,257 ‫new Mapbox GL. marcador. 268 00:14:40,230 --> 00:14:45,230 ‫Y luego, pasamos el elemento que acabamos de crear, entonces L, 269 00:14:45,400 --> 00:14:49,503 ‫y luego también especificamos una propiedad de anclaje. 270 00:14:51,100 --> 00:14:52,090 ‫Lo que 271 00:14:53,440 --> 00:14:54,910 ‫puse al fondo aquí. 272 00:14:54,910 --> 00:14:58,610 ‫Y eso significa que es la parte inferior del elemento y, 273 00:14:58,610 --> 00:15:01,230 ‫en este caso, la parte inferior de 274 00:15:01,230 --> 00:15:04,683 ‫ese pin, que se ubicará en la ubicación exacta del GPS. 275 00:15:05,790 --> 00:15:07,710 ‫También podríamos ponerlo en el 276 00:15:07,710 --> 00:15:10,113 ‫centro, pero creo que tiene más sentido 277 00:15:11,260 --> 00:15:13,690 ‫que abramos esa imagen de nuevo, creo que 278 00:15:13,690 --> 00:15:16,520 ‫tiene más sentido que este extremo aquí de la 279 00:15:16,520 --> 00:15:19,110 ‫imagen sea el que realmente apunte a la 280 00:15:19,110 --> 00:15:20,663 ‫ubicación exacta del GPS. 281 00:15:22,512 --> 00:15:26,040 ‫Eso es lo que hacemos con esta propiedad de anclaje. 282 00:15:26,040 --> 00:15:27,680 ‫Así que ese es 283 00:15:27,680 --> 00:15:31,896 ‫el marcador, y ahora, sobre eso, podemos llamar a un par de métodos. 284 00:15:31,896 --> 00:15:35,600 ‫En este momento, Mapbox no sabe nada sobre las coordenadas GPS 285 00:15:35,600 --> 00:15:36,635 ‫de este marcador. 286 00:15:36,635 --> 00:15:39,250 ‫No lo pusimos en ningún lado. 287 00:15:39,250 --> 00:15:40,580 ‫Hagámoslo ahora, así 288 00:15:40,580 --> 00:15:44,960 ‫que configure la longitud, la latitud y la igual a 289 00:15:44,960 --> 00:15:47,423 ‫la ubicación. coordenadas. 290 00:15:49,364 --> 00:15:54,301 ‫Recuerde que esto aquí es una matriz de longitud 291 00:15:54,301 --> 00:15:55,990 ‫y latitud forzada. 292 00:15:55,990 --> 00:15:59,471 ‫Eso es exactamente lo que espera Mapbox. 293 00:15:59,471 --> 00:16:02,540 ‫Solo para asegurarnos de que realmente lo entiendes, echemos 294 00:16:02,540 --> 00:16:04,633 ‫un vistazo a los recorridos. 295 00:16:05,719 --> 00:16:09,670 ‫Una vez más, cada ubicación tiene estas propiedades de coordenadas, y de 296 00:16:09,670 --> 00:16:12,693 ‫ahí es de donde ahora estamos leyendo las coordenadas. 297 00:16:13,915 --> 00:16:16,323 ‫Localización. coordenadas. 298 00:16:18,040 --> 00:16:23,040 ‫Y luego, finalmente, agregue y luego nuestra variable de mapa. 299 00:16:25,070 --> 00:16:28,850 ‫Entonces, este mapa aquí es esta variable de mapa 300 00:16:28,850 --> 00:16:33,093 ‫donde creamos nuestro nuevo Mapbox. mapa desde el principio. 301 00:16:34,507 --> 00:16:38,320 ‫Y ahora, todo lo que tenemos que hacer para 302 00:16:38,320 --> 00:16:40,463 ‫terminar es extender nuestros límites. 303 00:16:41,490 --> 00:16:46,490 ‫Así límites. extender y también con ubicaciones, o en realidad "loc", 304 00:16:48,540 --> 00:16:52,033 ‫que es la ubicación actual. coordenadas. 305 00:16:56,310 --> 00:16:59,720 ‫Esta primera parte aquí realmente agrega el 306 00:16:59,720 --> 00:17:00,950 ‫marcador, o 307 00:17:00,950 --> 00:17:03,120 ‫crea, hagámoslo aún más específico, 308 00:17:03,120 --> 00:17:04,310 ‫creemos 309 00:17:08,550 --> 00:17:09,910 ‫el marcador, luego 310 00:17:11,500 --> 00:17:15,540 ‫agreguemos el marcador y luego aquí, extienda los límites 311 00:17:18,600 --> 00:17:21,653 ‫del mapa para incluir la ubicación actual. 312 00:17:22,624 --> 00:17:25,410 ‫Pero eso todavía no es suficiente, porque ahora también 313 00:17:25,410 --> 00:17:27,850 ‫lo hacemos para que el mapa realmente se 314 00:17:27,850 --> 00:17:29,560 ‫ajuste a los límites. 315 00:17:29,560 --> 00:17:34,560 ‫Entonces mapa. ajustar, no no encontrar, pero ajustar límites, y 316 00:17:39,310 --> 00:17:41,743 ‫luego, por supuesto, nuestro objeto de límites. 317 00:17:42,640 --> 00:17:43,473 ‫Uf. 318 00:17:43,473 --> 00:17:48,473 ‫Entonces, mucho trabajo solo para poner algunos marcadores en el mapa. 319 00:17:48,530 --> 00:17:50,829 ‫Pero, de nuevo, me resulta muy agradable 320 00:17:50,829 --> 00:17:52,533 ‫trabajar con esta biblioteca. 321 00:17:53,840 --> 00:17:55,800 ‫Y ahora echemos un vistazo y 322 00:17:55,800 --> 00:17:58,450 ‫no estoy seguro de si todo salió bien aquí. 323 00:18:00,430 --> 00:18:02,300 ‫Y, de hecho, no fue así, por 324 00:18:02,300 --> 00:18:05,264 ‫lo que nuestros mapas no se encuentran en ningún lugar, 325 00:18:05,264 --> 00:18:07,630 ‫simplemente alejemos un poco para ver si realmente 326 00:18:07,630 --> 00:18:09,083 ‫están en algún lugar, y 327 00:18:10,049 --> 00:18:11,253 ‫no lo están. 328 00:18:13,070 --> 00:18:15,220 ‫Echemos un vistazo a nuestra consola, 329 00:18:15,220 --> 00:18:17,883 ‫y de hecho hay algún tipo de error. 330 00:18:18,910 --> 00:18:23,250 ‫Entonces lat, los límites de longitud no son un constructor, 331 00:18:23,250 --> 00:18:26,150 ‫y de hecho es al revés. 332 00:18:26,150 --> 00:18:28,750 ‫Entonces, nuevamente, Mapbox, al igual que MongoDB, espera 333 00:18:28,750 --> 00:18:31,350 ‫que las coordenadas sean primero la longitud 334 00:18:31,350 --> 00:18:32,900 ‫y luego la latitud. 335 00:18:32,900 --> 00:18:34,314 ‫Eso es lo 336 00:18:34,314 --> 00:18:36,420 ‫que tenemos aquí en este nombre, por 337 00:18:36,420 --> 00:18:38,350 ‫lo que aquí debería ser igual. 338 00:18:38,350 --> 00:18:42,813 ‫Entonces longitud, latitud. 339 00:18:44,616 --> 00:18:47,193 ‫Intentémoslo de nuevo aquí. 340 00:18:48,990 --> 00:18:51,360 ‫Ahh, ahora eso funciona. 341 00:18:51,360 --> 00:18:52,900 ‫Muy agradable. 342 00:18:52,900 --> 00:18:54,660 ‫Viste ese bonito zoom. 343 00:18:54,660 --> 00:18:57,290 ‫Eso es lo que hace el método de ajuste de límites. 344 00:18:57,290 --> 00:19:00,370 ‫Por lo tanto, mueve y amplía el mapa hasta los límites 345 00:19:00,370 --> 00:19:03,000 ‫para que se ajuste realmente a nuestros marcadores. 346 00:19:03,000 --> 00:19:07,180 ‫Ahora, ves que tenemos este tipo de otros elementos aquí 347 00:19:07,180 --> 00:19:08,943 ‫superpuestos a nuestro mapa. 348 00:19:08,943 --> 00:19:11,740 ‫Y eso se debe a este diseño 349 00:19:11,740 --> 00:19:14,470 ‫que creé con estos bordes aquí. 350 00:19:14,470 --> 00:19:16,490 ‫Pero eso no es un 351 00:19:16,490 --> 00:19:20,323 ‫problema porque en realidad podemos especificar manualmente algún relleno para estos límites. 352 00:19:21,290 --> 00:19:23,860 ‫Podemos pasar un objeto aquí, 353 00:19:23,860 --> 00:19:27,363 ‫digamos 200 píxeles superiores, 200 píxeles inferiores 354 00:19:30,430 --> 00:19:32,830 ‫y luego 100 355 00:19:32,830 --> 00:19:35,273 ‫píxeles izquierdo y derecho. 356 00:19:42,561 --> 00:19:45,100 ‫Y no tenemos que especificar los píxeles 357 00:19:45,100 --> 00:19:47,883 ‫aquí, supongo que solo soy yo escribiendo tanto CSS. 358 00:19:50,780 --> 00:19:52,053 ‫Intentémoslo de nuevo. 359 00:19:53,635 --> 00:19:55,440 ‫Oh, bonita animación de 360 00:19:55,440 --> 00:19:58,023 ‫zoom, pero eso realmente no respetó nuestra configuración. 361 00:19:59,110 --> 00:20:02,850 ‫Y, de hecho, eso se debe a que esto no es correcto. 362 00:20:02,850 --> 00:20:05,180 ‫Entonces, en su lugar, deberíamos crear un objeto, 363 00:20:05,180 --> 00:20:08,150 ‫y luego allí debemos especificar la propiedad de relleno, que 364 00:20:08,150 --> 00:20:09,673 ‫luego tiene todo esto. 365 00:20:10,920 --> 00:20:11,770 ‫Así que hagámoslo. 366 00:20:14,130 --> 00:20:14,963 ‫Relleno. 367 00:20:17,180 --> 00:20:18,013 ‫Y ahora, 368 00:20:19,020 --> 00:20:20,913 ‫corta esto y ponlo ahí. 369 00:20:23,970 --> 00:20:25,113 ‫Salvarlo aquí. 370 00:20:27,790 --> 00:20:28,883 ‫Una vez más. 371 00:20:31,750 --> 00:20:34,310 ‫Hombre, algo todavía anda mal aquí. 372 00:20:34,310 --> 00:20:35,840 ‫¿Que es eso? 373 00:20:35,840 --> 00:20:39,560 ‫Ahh, y por supuesto este código no debería estar aquí. 374 00:20:39,560 --> 00:20:43,913 ‫No está en la extensión, de hecho está aquí dentro de los límites adecuados. 375 00:20:45,060 --> 00:20:47,633 ‫Así que aquí es donde tiene sentido estar. 376 00:20:52,620 --> 00:20:57,333 ‫Arreglemos este código aquí, y ahora tiene sentido. 377 00:20:59,144 --> 00:21:00,890 ‫Por supuesto, debe estar en 378 00:21:00,890 --> 00:21:03,460 ‫los límites de ajuste, que es al final, la 379 00:21:03,460 --> 00:21:05,750 ‫función que ejecuta el movimiento y el zoom. 380 00:21:05,750 --> 00:21:07,430 ‫Ahí es donde debería estar 381 00:21:07,430 --> 00:21:10,400 ‫el relleno, y podríamos especificar un montón de otras opciones. 382 00:21:10,400 --> 00:21:12,320 ‫Y nuevamente, si está 383 00:21:12,320 --> 00:21:14,713 ‫interesado en eso, simplemente consulte la documentación. 384 00:21:15,810 --> 00:21:17,680 ‫Así que un tercer 385 00:21:17,680 --> 00:21:19,730 ‫intento aquí, esperemos que esta vez 386 00:21:19,730 --> 00:21:23,520 ‫lo haya hecho bien, ah, y sí, se ve mucho mejor. 387 00:21:23,520 --> 00:21:26,980 ‫Pero, todavía hay algunas cosas que podemos mejorar aquí, porque en 388 00:21:26,980 --> 00:21:29,680 ‫este momento ni siquiera podemos saber qué es 389 00:21:29,680 --> 00:21:31,670 ‫cada una de estas ubicaciones. 390 00:21:31,670 --> 00:21:35,290 ‫Y entonces queremos una especie de ventana emergente aquí, 391 00:21:35,290 --> 00:21:38,373 ‫que luego muestre información sobre la ubicación. 392 00:21:41,110 --> 00:21:45,043 ‫No solo el marcador, sino que también queremos agregar una ventana emergente. 393 00:21:49,270 --> 00:21:52,630 ‫Y eso es un poco similar a agregar el 394 00:21:52,630 --> 00:21:57,133 ‫marcador, entonces decimos nuevo Mapbox GL. surgir. 395 00:21:59,800 --> 00:22:02,300 ‫Luego, como antes, especificamos las coordenadas de 396 00:22:02,300 --> 00:22:03,623 ‫esa ventana emergente. 397 00:22:05,940 --> 00:22:07,523 ‫Así que ese de aquí. 398 00:22:08,610 --> 00:22:11,900 ‫Luego también necesitamos definir el html para esta ventana 399 00:22:11,900 --> 00:22:14,990 ‫emergente, y lo haré ahora usando el método set 400 00:22:14,990 --> 00:22:17,730 ‫html, porque eso me permitirá agregar algo 401 00:22:17,730 --> 00:22:19,950 ‫de contenido directamente en ese 402 00:22:19,950 --> 00:22:24,353 ‫html, así que configure html, y luego un cadena de plantilla aquí. 403 00:22:26,040 --> 00:22:28,030 ‫Quiero que sea un párrafo 404 00:22:28,030 --> 00:22:30,760 ‫y la información que quiero mostrar aquí es 405 00:22:30,760 --> 00:22:33,630 ‫el día en el que estaremos en esta ubicación 406 00:22:33,630 --> 00:22:36,250 ‫y luego el nombre de la ubicación. 407 00:22:36,250 --> 00:22:39,730 ‫Básicamente, quiero mostrar el día, por eso 408 00:22:39,730 --> 00:22:43,300 ‫creamos estas propiedades de día aquí, y luego 409 00:22:43,300 --> 00:22:44,753 ‫la descripción. 410 00:22:50,170 --> 00:22:54,520 ‫Día, y luego ubicación, recuerda cuál es la ubicación indie actual 411 00:22:54,520 --> 00:22:56,623 ‫para cada bucle, y luego 412 00:22:57,860 --> 00:22:58,853 ‫el día, la 413 00:23:01,720 --> 00:23:03,543 ‫ubicación. descripción. 414 00:23:06,870 --> 00:23:07,980 ‫Salvarlo aquí, 415 00:23:07,980 --> 00:23:10,210 ‫se ve mucho mejor ahora. 416 00:23:10,210 --> 00:23:14,010 ‫Y luego, al igual que con el 417 00:23:14,010 --> 00:23:19,010 ‫otro, también debemos agregar y luego nuestra variable de mapa. 418 00:23:22,130 --> 00:23:24,380 ‫Y esto no se verá perfecto, 419 00:23:24,380 --> 00:23:26,730 ‫porque necesitamos especificar algunas opciones, pero todavía 420 00:23:26,730 --> 00:23:29,083 ‫quería mostrarles el resultado en este punto. 421 00:23:32,070 --> 00:23:35,100 ‫Y entonces, ves que en realidad ahora se superponen 422 00:23:35,100 --> 00:23:36,453 ‫a los marcadores. 423 00:23:37,920 --> 00:23:41,083 ‫De hecho, podemos arreglar eso usando una propiedad de compensación. 424 00:23:43,560 --> 00:23:46,883 ‫Pasamos esas opciones aquí mismo a la nueva ventana emergente. 425 00:23:48,396 --> 00:23:49,770 ‫Decimos 426 00:23:51,390 --> 00:23:54,940 ‫desplazamiento de 30 píxeles. 427 00:23:54,940 --> 00:23:57,081 ‫Y también noté que 428 00:23:57,081 --> 00:23:59,840 ‫tenemos demasiado acolchado en la parte 429 00:23:59,840 --> 00:24:04,840 ‫inferior, así que reduzcamos eso a 150 y hagamos esto nuevamente. 430 00:24:09,610 --> 00:24:13,190 ‫Y entonces, esto se ve bastante bien, creo. 431 00:24:13,190 --> 00:24:15,750 ‫Entonces, quienquiera que eche un vistazo 432 00:24:15,750 --> 00:24:18,609 ‫a nuestra página, puede ver muy rápidamente 433 00:24:18,609 --> 00:24:21,533 ‫qué tipo de itinerario será en este recorrido. 434 00:24:21,533 --> 00:24:23,740 ‫Y si hay demasiada 435 00:24:23,740 --> 00:24:26,423 ‫información, también podemos cerrar estas ventanas emergentes. 436 00:24:27,680 --> 00:24:30,700 ‫Y realmente podríamos agregar todo tipo de cosas a este mapa. 437 00:24:30,700 --> 00:24:33,440 ‫Por ejemplo, podríamos crear estas líneas aquí 438 00:24:33,440 --> 00:24:35,250 ‫entre estos puntos y 439 00:24:35,250 --> 00:24:38,570 ‫unirlas, como una línea verde aquí o algo así. 440 00:24:38,570 --> 00:24:41,096 ‫O también podríamos mostrar la ruta 441 00:24:41,096 --> 00:24:42,820 ‫real de un 442 00:24:42,820 --> 00:24:45,350 ‫punto a otro usando básicamente direcciones, 443 00:24:45,350 --> 00:24:47,610 ‫pero hagámoslo simple aquí. 444 00:24:47,610 --> 00:24:49,990 ‫Lo único que me queda 445 00:24:49,990 --> 00:24:53,430 ‫por hacer aquí es desactivar la función de zoom. 446 00:24:53,430 --> 00:24:55,320 ‫Porque en este momento, 447 00:24:55,320 --> 00:24:57,230 ‫digamos que estamos haciendo zoom 448 00:24:57,230 --> 00:24:59,400 ‫en esta página, o en realidad 449 00:24:59,400 --> 00:25:01,450 ‫si estamos desplazándonos en esta página, 450 00:25:01,450 --> 00:25:03,740 ‫y una vez que llegamos a esto 451 00:25:03,740 --> 00:25:08,740 ‫aquí, y luego seguimos desplazándonos aquí, entonces desplazamos el mapa en lugar de la página. 452 00:25:09,034 --> 00:25:12,060 ‫Esa no es una buena experiencia de usuario, por 453 00:25:12,060 --> 00:25:13,673 ‫lo que todo lo que 454 00:25:13,673 --> 00:25:17,110 ‫tenemos que hacer ahora es básicamente desactivar la función de desplazamiento 455 00:25:17,110 --> 00:25:18,410 ‫en este mapa. 456 00:25:18,410 --> 00:25:22,880 ‫Aún permitiremos que las personas se muevan de esta manera, pero 457 00:25:22,880 --> 00:25:24,883 ‫el zoom estará deshabilitado. 458 00:25:26,200 --> 00:25:29,463 ‫Vayamos aquí a nuestro mapa y agreguemos eso. 459 00:25:30,743 --> 00:25:33,760 ‫Y no estamos usando valores predeterminados interactivos, porque entonces ni 460 00:25:33,760 --> 00:25:35,970 ‫siquiera podríamos desplazarnos por el mapa. 461 00:25:35,970 --> 00:25:39,317 ‫Pero de nuevo, eso al menos debería estar permitido. 462 00:25:39,317 --> 00:25:43,680 ‫La opción que estoy configurando aquí es el zoom de desplazamiento falso. 463 00:25:46,580 --> 00:25:49,202 ‫Y de nuevo, para conocer todas las 464 00:25:49,202 --> 00:25:50,888 ‫opciones posibles que puede 465 00:25:50,888 --> 00:25:55,190 ‫establecer aquí, siga adelante y eche un vistazo a la referencia. 466 00:25:55,190 --> 00:25:58,730 ‫Y ahora, cuando ponemos nuestro mouse aquí y nos desplazamos, 467 00:25:58,730 --> 00:26:01,463 ‫no cambia el nivel de zoom. 468 00:26:03,040 --> 00:26:04,530 ‫Perfecto. 469 00:26:04,530 --> 00:26:09,060 ‫Todavía podemos hacer una panorámica, así que creo que ahora se ve muy bien. 470 00:26:09,060 --> 00:26:12,083 ‫Probemos esto en otro. 471 00:26:12,920 --> 00:26:14,653 ‫Digamos aquí el excursionista del bosque. 472 00:26:17,290 --> 00:26:19,450 ‫Y entonces, eso todavía funciona. 473 00:26:19,450 --> 00:26:22,130 ‫Y estos aquí se superponen, pero 474 00:26:22,130 --> 00:26:25,553 ‫no hay problema, siempre podemos cerrarlos si queremos. 475 00:26:28,120 --> 00:26:30,713 ‫Echemos un vistazo aquí, por ejemplo, explorador marino. 476 00:26:32,420 --> 00:26:33,440 ‫Y si somos 477 00:26:33,440 --> 00:26:35,231 ‫lo suficientemente rápidos, incluso podemos ver 478 00:26:35,231 --> 00:26:38,100 ‫la animación de zoom moviendo el mapa a esa ubicación. 479 00:26:38,100 --> 00:26:39,890 ‫De acuerdo, perfecto. 480 00:26:39,890 --> 00:26:42,680 ‫Así que espero que hayas podido 481 00:26:42,680 --> 00:26:46,670 ‫seguir realmente este ejemplo con todo lo que hicimos en Mapbox. 482 00:26:46,670 --> 00:26:49,060 ‫Ahora, en caso de que algo no funcione, asegúrese 483 00:26:49,060 --> 00:26:50,330 ‫de que está usando 484 00:26:50,330 --> 00:26:51,863 ‫una versión similar a la mía, 485 00:26:52,870 --> 00:26:56,500 ‫así que lo que quiero decir es una versión similar de la biblioteca Mapbox. 486 00:26:56,500 --> 00:26:59,403 ‫Que en mi caso aquí es la versión 0. 54. 487 00:27:00,870 --> 00:27:04,363 ‫El tuyo probablemente no debería ser 1. alguna cosa. 488 00:27:05,250 --> 00:27:06,600 ‫Entonces, si está 489 00:27:06,600 --> 00:27:10,430 ‫viendo este video mucho tiempo después de esta grabación y tiene un 490 00:27:10,430 --> 00:27:14,891 ‫V1 aquí, continúe y cámbielo a 0. algo, de modo que 491 00:27:14,891 --> 00:27:18,213 ‫básicamente no haya cambios importantes allí. 492 00:27:19,242 --> 00:27:24,242 ‫De todos modos, con eso, terminamos nuestra página del recorrido, por lo 493 00:27:24,560 --> 00:27:27,140 ‫que ya no necesitamos nada de 494 00:27:27,140 --> 00:27:30,140 ‫esto, el mapa también está allí y, 495 00:27:30,140 --> 00:27:34,740 ‫por lo tanto, esta parte del sitio web está realmente terminada. 496 00:27:34,740 --> 00:27:35,573 ‫Impresionante. 497 00:27:35,573 --> 00:27:38,660 ‫Felicitaciones por hacerlo realidad, por comenzar a 498 00:27:38,660 --> 00:27:42,200 ‫construir este hermoso sitio web utilizando todas estas 499 00:27:42,200 --> 00:27:44,200 ‫increíbles tecnologías que ha aprendido 500 00:27:44,200 --> 00:27:45,663 ‫hasta ahora.