1 00:00:00,780 --> 00:00:04,163 ‫-: Vamos agora continuar construindo nossa integração de mapas. 2 00:00:05,720 --> 00:00:08,637 ‫E agora vamos realmente ir para o Mapbox. 3 00:00:11,036 --> 00:00:15,090 ‫E então, estou usando o Mapbox em vez do Google Maps agora e 4 00:00:15,090 --> 00:00:16,710 ‫isso é porque há 5 00:00:16,710 --> 00:00:19,260 ‫algum tempo, o Google Maps começou a exigir 6 00:00:19,260 --> 00:00:21,300 ‫um cartão de crédito de você 7 00:00:21,300 --> 00:00:23,220 ‫para poder usar o Google Maps. 8 00:00:23,220 --> 00:00:26,640 ‫E não acho que seja uma boa ideia para um 9 00:00:26,640 --> 00:00:29,160 ‫curso como este e, na verdade, também 10 00:00:29,160 --> 00:00:33,723 ‫gosto muito do Mapbox e, portanto, acho que é perfeito para usarmos neste curso. 11 00:00:35,500 --> 00:00:37,720 ‫Eles também têm uma documentação excelente 12 00:00:37,720 --> 00:00:40,130 ‫que vamos testar em um segundo aqui. 13 00:00:40,130 --> 00:00:43,330 ‫Mas, por agora, vamos começar e criar uma nova conta. 14 00:00:43,330 --> 00:00:45,623 ‫Então, basta clicar aqui para começar a construir. 15 00:00:48,208 --> 00:00:51,960 ‫E então, é claro, crie sua conta gratuita. 16 00:00:51,960 --> 00:00:54,370 ‫Já tenho um e então, 17 00:00:54,370 --> 00:00:58,200 ‫basta pausar o vídeo neste momento para criar essa conta. 18 00:00:58,200 --> 00:01:00,210 ‫E depois de criar sua conta, 19 00:01:00,210 --> 00:01:02,960 ‫você deve chegar a uma página parecida com esta. 20 00:01:02,960 --> 00:01:05,009 ‫Agora que você está assistindo 21 00:01:05,009 --> 00:01:06,820 ‫este vídeo, esta página 22 00:01:06,820 --> 00:01:09,430 ‫aqui pode, é claro, ter mudado, e 23 00:01:09,430 --> 00:01:11,020 ‫provavelmente mudou, mas 24 00:01:11,020 --> 00:01:13,900 ‫o que precisamos fazer agora é encontrar um 25 00:01:13,900 --> 00:01:17,281 ‫link que diga algo assim, então instale o desenvolvimento 26 00:01:17,281 --> 00:01:21,850 ‫do software de mapas kit, então isso aqui, ou também integrar Mapbox, 27 00:01:21,850 --> 00:01:24,455 ‫que deve ser praticamente o mesmo. 28 00:01:24,455 --> 00:01:29,025 ‫Então, clicarei aqui para instalar os mapas para JavaScript. 29 00:01:29,025 --> 00:01:30,720 ‫E o que vamos fazer 30 00:01:30,720 --> 00:01:33,100 ‫aqui é usar o Mapbox CDN para a 31 00:01:33,100 --> 00:01:35,050 ‫rede de distribuição de conteúdo e, 32 00:01:35,050 --> 00:01:36,500 ‫por enquanto, pelo menos 33 00:01:36,500 --> 00:01:38,503 ‫não o empacotador do módulo NPM. 34 00:01:40,230 --> 00:01:43,500 ‫Então o primeiro passo, como diz aqui, 35 00:01:43,500 --> 00:01:47,941 ‫é incluir esses arquivos aqui e no arquivo HTML obtido. 36 00:01:47,941 --> 00:01:51,121 ‫E é aí que precisamos agora da 37 00:01:51,121 --> 00:01:54,663 ‫técnica de estender a cabeça que tínhamos antes. 38 00:01:56,970 --> 00:01:58,860 ‫E é aí que agora 39 00:01:58,860 --> 00:02:01,293 ‫precisamos dessa técnica de extensão da cabeça. 40 00:02:02,443 --> 00:02:04,060 ‫Aqui no tour, 41 00:02:04,060 --> 00:02:07,690 ‫lembre-se de como tiramos isso da cabeça, na verdade. 42 00:02:07,690 --> 00:02:10,550 ‫Mas agora ainda precisamos de algumas coisas 43 00:02:10,550 --> 00:02:12,940 ‫que precisamos acrescentar à cabeça. 44 00:02:12,940 --> 00:02:16,533 ‫E então esse é este script e também esta folha de estilo. 45 00:02:17,570 --> 00:02:19,833 ‫Vamos traduzir rapidamente para pug. 46 00:02:26,250 --> 00:02:28,533 ‫E o link também, 47 00:02:31,470 --> 00:02:33,300 ‫e é isso. 48 00:02:33,300 --> 00:02:34,663 ‫Vamos nos livrar 49 00:02:35,930 --> 00:02:39,370 ‫dessa parte e voltar para a próxima etapa aqui. 50 00:02:39,370 --> 00:02:43,720 ‫Em seguida, precisamos copiar este código JavaScript aqui, 51 00:02:43,720 --> 00:02:45,885 ‫em nosso arquivo. 52 00:02:45,885 --> 00:02:48,050 ‫E para o nosso roteiro, é claro. 53 00:02:48,050 --> 00:02:51,140 ‫Bem aqui na caixa de mapas. js. 54 00:02:51,140 --> 00:02:53,860 ‫Agora você provavelmente não terá esse token de 55 00:02:53,860 --> 00:02:55,360 ‫acesso neste momento 56 00:02:55,360 --> 00:02:58,180 ‫e, portanto, ele exigia que você já o fizesse 57 00:02:58,180 --> 00:03:01,343 ‫ou, caso contrário, mostrarei como fazê-lo em um segundo. 58 00:03:02,586 --> 00:03:05,230 ‫Vamos apenas recuar esta parte aqui. 59 00:03:05,230 --> 00:03:09,510 ‫Com isso, já estamos prontos. 60 00:03:09,510 --> 00:03:11,640 ‫Na verdade, isso já deve criar 61 00:03:11,640 --> 00:03:14,090 ‫um mapa e exibi-lo em nossa página. 62 00:03:14,090 --> 00:03:17,760 ‫Isso ocorre porque o contêiner aqui está definido para mapear. 63 00:03:17,760 --> 00:03:20,260 ‫E o que isso significa é que ele 64 00:03:20,260 --> 00:03:23,270 ‫colocará o mapa em um elemento com o ID de mapa. 65 00:03:23,270 --> 00:03:26,410 ‫É por isso que aqui, em nosso tour, temos 66 00:03:27,280 --> 00:03:29,010 ‫esse elemento aqui, oh, onde 67 00:03:29,010 --> 00:03:30,003 ‫está isso? 68 00:03:31,100 --> 00:03:34,760 ‫Bem aqui, temos um elemento com mapa de ID. 69 00:03:34,760 --> 00:03:37,730 ‫A razão para isso é que aqui no Mapbox, 70 00:03:37,730 --> 00:03:39,390 ‫realmente precisamos de um 71 00:03:39,390 --> 00:03:41,940 ‫elemento com um ID que podemos especificar aqui. 72 00:03:41,940 --> 00:03:43,920 ‫E o padrão é map, 73 00:03:43,920 --> 00:03:46,750 ‫e é assim que o chamo em html. 74 00:03:46,750 --> 00:03:48,900 ‫Então também temos esse estilo padrão aqui, que 75 00:03:48,900 --> 00:03:50,700 ‫vamos mudar em um segundo. 76 00:03:52,070 --> 00:03:54,393 ‫Por enquanto, vamos voltar às 77 00:03:56,530 --> 00:03:59,720 ‫nossas instruções aqui, e então diz que terminamos aqui. 78 00:03:59,720 --> 00:04:02,707 ‫Mas agora vamos voltar à 79 00:04:02,707 --> 00:04:06,185 ‫nossa conta e criar aquele token de 80 00:04:06,185 --> 00:04:09,650 ‫que precisamos para poder acessar o Mapbox. 81 00:04:09,650 --> 00:04:11,460 ‫Por favor, não copie apenas 82 00:04:11,460 --> 00:04:13,990 ‫meu token, isso não funcionará bem para você. 83 00:04:13,990 --> 00:04:16,270 ‫Mas em vez disso, crie o seu próprio. 84 00:04:16,270 --> 00:04:19,363 ‫Você pode simplesmente criar um novo nome para ele. 85 00:04:21,760 --> 00:04:23,713 ‫Vamos apenas chamá-lo de algo assim. 86 00:04:26,010 --> 00:04:28,200 ‫E então crie o token aqui. 87 00:04:28,200 --> 00:04:29,550 ‫Então você coloca 88 00:04:32,040 --> 00:04:35,640 ‫sua senha, e então, você pode usar esse token. 89 00:04:35,640 --> 00:04:38,150 ‫Então, novamente, não tenho certeza se ele já 90 00:04:38,150 --> 00:04:40,860 ‫criou esse token para você ou se você realmente 91 00:04:40,860 --> 00:04:42,360 ‫precisava criar um novo. 92 00:04:42,360 --> 00:04:46,500 ‫De qualquer forma, também é bom ter um token para cada projeto, 93 00:04:46,500 --> 00:04:47,820 ‫para que você 94 00:04:47,820 --> 00:04:50,668 ‫possa restringir esse token apenas a esse projeto. 95 00:04:50,668 --> 00:04:54,160 ‫Criei minha conta aqui há muito tempo e, portanto, não 96 00:04:54,160 --> 00:04:57,530 ‫tenho certeza, de novo, de como funcionou, mas de 97 00:04:57,530 --> 00:05:01,073 ‫qualquer forma, com esse token, você deve estar pronto para continuar. 98 00:05:03,730 --> 00:05:07,883 ‫Na verdade, isso agora já deve exibir nosso mapa padrão. 99 00:05:09,250 --> 00:05:13,990 ‫Então, vamos recarregar e, de fato, este é nosso mapa padrão. 100 00:05:13,990 --> 00:05:15,960 ‫Não parece muito bom, bem, 101 00:05:15,960 --> 00:05:17,313 ‫podemos ampliar, mas 102 00:05:19,390 --> 00:05:21,620 ‫realmente, o estilo não é tão 103 00:05:21,620 --> 00:05:24,110 ‫bom e realmente não corresponde ao nosso 104 00:05:24,110 --> 00:05:25,090 ‫site e, 105 00:05:25,090 --> 00:05:27,198 ‫claro, também não temos nossas localizações 106 00:05:27,198 --> 00:05:29,627 ‫em nenhum lugar plotadas para o mapa. 107 00:05:29,627 --> 00:05:33,700 ‫E agora vamos cuidar de tudo isso. 108 00:05:33,700 --> 00:05:35,914 ‫Voltemos ao Mapbox e 109 00:05:35,914 --> 00:05:38,783 ‫agora vamos ao nosso estúdio de design. 110 00:05:40,280 --> 00:05:42,900 ‫Vamos apenas clicar aqui em "começar a projetar 111 00:05:42,900 --> 00:05:44,720 ‫um mapa" ou, novamente, se 112 00:05:44,720 --> 00:05:46,200 ‫seu site estiver um 113 00:05:46,200 --> 00:05:49,313 ‫pouco diferente neste ponto, basta procurar o estúdio de design. 114 00:05:50,680 --> 00:05:53,093 ‫Talvez apareça em algum lugar aqui. 115 00:05:56,220 --> 00:05:57,433 ‫Então, vamos tentar isso. 116 00:06:01,560 --> 00:06:04,330 ‫Aqui, podemos realmente fazer todo o tipo de coisas 117 00:06:04,330 --> 00:06:07,010 ‫relacionadas com a concepção de um mapa. 118 00:06:07,010 --> 00:06:10,340 ‫Na verdade, isso não é realmente o que eu 119 00:06:10,340 --> 00:06:13,670 ‫esperava, porque é um pouco complexo mudar todas 120 00:06:13,670 --> 00:06:15,090 ‫essas coisas aqui, 121 00:06:15,090 --> 00:06:18,670 ‫mas existem alguns estilos padrão, ah sim, isso é 122 00:06:18,670 --> 00:06:20,670 ‫o que eu estava procurando. 123 00:06:21,520 --> 00:06:23,640 ‫Vamos criar um novo 124 00:06:23,640 --> 00:06:27,790 ‫estilo aqui e, a partir daí, podemos escolher um padrão. 125 00:06:27,790 --> 00:06:30,483 ‫E realmente o que eu quero é esse estilo leve. 126 00:06:31,400 --> 00:06:34,560 ‫Então crie, e na verdade estou muito feliz 127 00:06:34,560 --> 00:06:37,330 ‫com a aparência que tirou da caixa. 128 00:06:37,330 --> 00:06:39,972 ‫Agora, por algum motivo, não vejo 129 00:06:39,972 --> 00:06:43,937 ‫nada aqui, ok, é porque foi ampliado para o mar. 130 00:06:43,937 --> 00:06:48,937 ‫Mas de qualquer maneira, vamos agora ampliar em algum lugar aqui, e 131 00:06:50,570 --> 00:06:53,830 ‫eu acho que já parece muito bom, 132 00:06:53,830 --> 00:06:57,407 ‫então vamos apenas adicionar um nome a ele aqui, 133 00:06:57,407 --> 00:06:58,550 ‫então estou 134 00:07:00,790 --> 00:07:04,968 ‫chamando de Gravação de Vídeo do Natour porque eu já 135 00:07:04,968 --> 00:07:08,430 ‫tenho um estilo do Natour, mas você é 136 00:07:08,430 --> 00:07:11,724 ‫claro que pode chamá-lo do que quiser. 137 00:07:11,724 --> 00:07:16,340 ‫Vamos confirmar o nome aqui, voltar, e depois vamos 138 00:07:16,340 --> 00:07:19,230 ‫aqui para compartilhar e usar. 139 00:07:19,230 --> 00:07:23,393 ‫E o que queremos não é compartilhar, mas sim usar. 140 00:07:23,393 --> 00:07:28,393 ‫Em algum lugar aqui, devemos ver nosso URL de estilo, e 141 00:07:28,640 --> 00:07:30,960 ‫então, sim, é esse. 142 00:07:30,960 --> 00:07:34,877 ‫Portanto, deve ser um URL basicamente começando com Mapbox. 143 00:07:37,480 --> 00:07:40,630 ‫Vamos apenas copiá-lo, voltar e então substituir o 144 00:07:40,630 --> 00:07:43,640 ‫estilo que temos aqui como padrão, pelo 145 00:07:43,640 --> 00:07:45,363 ‫que acabamos de criar. 146 00:07:47,699 --> 00:07:51,630 ‫Salve e, sim, parece 147 00:07:54,060 --> 00:07:56,650 ‫muito melhor. 148 00:07:56,650 --> 00:07:59,650 ‫E é exatamente o estilo que acabamos de criar. 149 00:07:59,650 --> 00:08:02,473 ‫Portanto, agora podemos aumentar ou diminuir o 150 00:08:02,473 --> 00:08:04,830 ‫zoom ou, na verdade, o contrário, 151 00:08:04,830 --> 00:08:07,433 ‫podemos movimentar o mapa para onde 152 00:08:08,964 --> 00:08:13,136 ‫quisermos e também podemos definir uma tonelada de propriedades, de 153 00:08:13,136 --> 00:08:15,123 ‫opções para este mapa. 154 00:08:15,960 --> 00:08:17,810 ‫Agora, sempre que carregamos o mapa, 155 00:08:17,810 --> 00:08:19,230 ‫ele sempre parece 156 00:08:19,230 --> 00:08:21,510 ‫o mesmo, sempre centralizado aqui em Boston. 157 00:08:21,510 --> 00:08:24,230 ‫Mas podemos mudar isso especificando o 158 00:08:25,720 --> 00:08:26,803 ‫centro aqui. 159 00:08:28,600 --> 00:08:31,580 ‫E então precisamos passar um array de duas coordenadas. 160 00:08:31,580 --> 00:08:34,610 ‫Vamos pegar aquele de LA que usamos 161 00:08:34,610 --> 00:08:37,473 ‫antes no Postman, exatamente isso, mas, 162 00:08:42,356 --> 00:08:43,189 ‫na 163 00:08:48,210 --> 00:08:51,870 ‫verdade, o Mapbox é exatamente como o MongoDB, 164 00:08:51,870 --> 00:08:55,200 ‫no aspecto de requerer primeiro uma longitude e 165 00:08:55,200 --> 00:08:56,603 ‫depois a latitude. 166 00:08:58,270 --> 00:09:00,020 ‫Precisamos trocá-los aqui. 167 00:09:02,925 --> 00:09:05,363 ‫E vamos dar uma olhada no que temos. 168 00:09:07,330 --> 00:09:10,083 ‫E, bem, isso realmente não nos leva a lugar nenhum. 169 00:09:12,330 --> 00:09:15,953 ‫Vamos também especificar um nível de zoom aqui. 170 00:09:17,310 --> 00:09:18,400 ‫Digamos quatro. 171 00:09:18,400 --> 00:09:19,843 ‫Talvez isso resolva. 172 00:09:26,030 --> 00:09:29,153 ‫E, na verdade, era essa ilusão. 173 00:09:30,221 --> 00:09:33,150 ‫Portanto, existem diferentes níveis de zoom. 174 00:09:33,150 --> 00:09:35,820 ‫Por exemplo, podemos experimentar um 175 00:09:35,820 --> 00:09:38,760 ‫aqui também, e isso deve ser muito mais 176 00:09:38,760 --> 00:09:41,460 ‫ampliado, ou talvez reduzido, não tenho certeza. 177 00:09:41,460 --> 00:09:45,040 ‫Ah, ok, então isso realmente afasta todo o caminho. 178 00:09:45,040 --> 00:09:46,943 ‫Então, digamos 10 aqui, por exemplo, 179 00:09:49,180 --> 00:09:51,430 ‫e como você pode ver, eu realmente 180 00:09:51,430 --> 00:09:53,320 ‫gosto de brincar com 181 00:09:53,320 --> 00:09:57,360 ‫esse tipo de coisa, e sim, em 10 agora está muito próximo. 182 00:09:57,360 --> 00:10:00,913 ‫Também podemos dizer que não queremos que seja interativo, 183 00:10:02,130 --> 00:10:04,400 ‫e isso é muito simples. 184 00:10:04,400 --> 00:10:07,683 ‫Vamos definir interativo como falso. 185 00:10:08,610 --> 00:10:10,610 ‫E então, basicamente, seu mapa 186 00:10:10,610 --> 00:10:13,823 ‫vai se parecer com uma imagem simples em seu site. 187 00:10:15,960 --> 00:10:18,570 ‫Como você pode ver, não consigo rolar nada 188 00:10:18,570 --> 00:10:20,650 ‫aqui e também não consigo deslocar. 189 00:10:20,650 --> 00:10:22,955 ‫Portanto, não há nada que eu possa fazer agora. 190 00:10:22,955 --> 00:10:25,940 ‫E essas são apenas algumas opções que 191 00:10:25,940 --> 00:10:26,803 ‫podemos definir. 192 00:10:29,010 --> 00:10:32,090 ‫Na verdade, vamos voltar aqui para o 193 00:10:32,090 --> 00:10:36,093 ‫Mapbox e para a documentação e o JavaScript do Mapbox. 194 00:10:39,160 --> 00:10:42,020 ‫Aqui você obtém toda a documentação para realmente 195 00:10:42,020 --> 00:10:46,300 ‫tudo o que você pode fazer com a versão JavaScript do Mapbox. 196 00:10:46,300 --> 00:10:48,790 ‫O que eu só queria mostrar a vocês é que as 197 00:10:48,790 --> 00:10:51,240 ‫coisas que acabei de mostrar estão, na verdade, aqui. 198 00:10:51,240 --> 00:10:53,550 ‫Portanto, temos o contêiner que especificamos, temos 199 00:10:53,550 --> 00:10:55,023 ‫o estilo e 200 00:10:55,990 --> 00:10:57,970 ‫realmente um monte de coisas. 201 00:10:57,970 --> 00:10:59,720 ‫Tão interativo e, se 202 00:10:59,720 --> 00:11:02,750 ‫você quiser, pode, é claro, brincar com 203 00:11:02,750 --> 00:11:03,873 ‫tudo isso. 204 00:11:05,192 --> 00:11:08,120 ‫Eu só queria mostrar que é assim que 205 00:11:08,120 --> 00:11:11,400 ‫você pode aprender mais algumas coisas sobre o Mapbox. 206 00:11:11,400 --> 00:11:14,496 ‫Agora, na verdade não queremos nada disso. 207 00:11:14,496 --> 00:11:17,800 ‫Porque não queremos centralizar o mapa em qualquer lugar, mas 208 00:11:17,800 --> 00:11:20,490 ‫em vez disso, queremos que ele descubra automaticamente 209 00:11:20,490 --> 00:11:24,551 ‫a posição do mapa com base em nossos pontos de localização do passeio. 210 00:11:24,551 --> 00:11:26,739 ‫O que vamos fazer agora 211 00:11:26,739 --> 00:11:30,410 ‫é basicamente colocar todos os locais para um determinado passeio 212 00:11:30,410 --> 00:11:32,660 ‫no mapa e, em seguida, permitir 213 00:11:32,660 --> 00:11:36,180 ‫que o mapa descubra automaticamente qual parte do mapa deve 214 00:11:36,180 --> 00:11:39,280 ‫ser exibida para ajustar todos esses pontos corretamente. 215 00:11:39,280 --> 00:11:41,540 ‫A primeira coisa que precisamos fazer 216 00:11:41,540 --> 00:11:43,713 ‫é criar uma variável associada. 217 00:11:47,060 --> 00:11:52,060 ‫Limites são iguais a um novo Mapbox GL. limites de longitude latitutde. 218 00:12:00,360 --> 00:12:03,320 ‫E temos acesso a este objeto Mapbox porque 219 00:12:03,320 --> 00:12:05,520 ‫incluímos a biblioteca Mapbox no início 220 00:12:05,520 --> 00:12:06,983 ‫de nossa página. 221 00:12:09,210 --> 00:12:10,113 ‫Bem 222 00:12:11,270 --> 00:12:12,883 ‫aqui, incluindo este script 223 00:12:14,050 --> 00:12:15,760 ‫aqui, esta biblioteca Mapbox, é 224 00:12:15,760 --> 00:12:18,760 ‫isso que expõe o objeto Mapbox GL, que podemos 225 00:12:18,760 --> 00:12:21,193 ‫então usar em todo o nosso site. 226 00:12:24,180 --> 00:12:26,870 ‫Este objeto de limites aqui é 227 00:12:26,870 --> 00:12:29,589 ‫basicamente a área que será exibida no mapa. 228 00:12:29,589 --> 00:12:32,860 ‫Agora vamos estender isso com todos os locais que 229 00:12:32,860 --> 00:12:35,043 ‫estão em nossa matriz de locais. 230 00:12:35,043 --> 00:12:37,597 ‫E isso fará um pouco mais de sentido 231 00:12:37,597 --> 00:12:39,333 ‫assim que começarmos a usá-lo. 232 00:12:41,490 --> 00:12:44,050 ‫Vamos agora percorrer todos os nossos locais e adicionar 233 00:12:44,050 --> 00:12:46,203 ‫um marcador para cada um deles. 234 00:12:48,150 --> 00:12:49,750 ‫Para cada um, 235 00:12:49,750 --> 00:12:52,313 ‫e vamos ver o bloqueio 236 00:12:54,840 --> 00:12:58,150 ‫para os locais, aqui queremos adicionar um marcador. 237 00:12:58,150 --> 00:13:00,160 ‫E para isso, realmente precisamos criar 238 00:13:00,160 --> 00:13:02,053 ‫um novo elemento html, a 239 00:13:04,228 --> 00:13:07,900 ‫este respeito, é realmente um nível um pouco baixo, mas eu 240 00:13:07,900 --> 00:13:09,780 ‫acho isso realmente muito 241 00:13:09,780 --> 00:13:12,230 ‫bom, porque, assim, temos muito controle sobre 242 00:13:12,230 --> 00:13:15,110 ‫o que realmente está acontecendo em nosso mapa. 243 00:13:15,110 --> 00:13:17,070 ‫E o que estou mostrando aqui 244 00:13:17,070 --> 00:13:19,366 ‫é, na verdade, apenas uma pequena fração de todas 245 00:13:19,366 --> 00:13:22,083 ‫as coisas excelentes que você pode fazer com o Mapbox. 246 00:13:23,525 --> 00:13:26,593 ‫Este aqui é apenas um JavaScript padrão 247 00:13:26,593 --> 00:13:28,928 ‫e, portanto, podemos usar 248 00:13:28,928 --> 00:13:31,490 ‫criar elemento para criar elementos. 249 00:13:31,490 --> 00:13:33,040 ‫Exatamente como o nome já 250 00:13:33,040 --> 00:13:35,490 ‫diz, e aqui queremos criar um novo diff. 251 00:13:35,490 --> 00:13:38,653 ‫E também queremos dar um nome de classe e 252 00:13:44,700 --> 00:13:46,193 ‫defini-lo como marcador. 253 00:13:47,945 --> 00:13:50,170 ‫E aqui está, é um ponto e vírgula. 254 00:13:50,170 --> 00:13:52,500 ‫E assim, no CSS, temos uma 255 00:13:52,500 --> 00:13:54,313 ‫classe para este marcador. 256 00:13:57,140 --> 00:14:00,870 ‫Marcador, aqui você vê a imagem de fundo especificada, 257 00:14:00,870 --> 00:14:03,459 ‫que é este pino verde aqui. 258 00:14:03,459 --> 00:14:07,210 ‫Aquele pino que você verá em um segundo no mapa, é 259 00:14:07,210 --> 00:14:10,110 ‫na verdade uma imagem personalizada que eu projetei. 260 00:14:10,110 --> 00:14:13,070 ‫Não está vindo diretamente do Mapbox. 261 00:14:13,070 --> 00:14:16,500 ‫Assim, você pode realmente ajustá-lo ao seu estilo e à 262 00:14:16,500 --> 00:14:17,333 ‫sua marca. 263 00:14:17,333 --> 00:14:21,733 ‫Eu também defini o tamanho do marcador aqui, sim, 264 00:14:23,500 --> 00:14:25,363 ‫é realmente personalizável. 265 00:14:27,362 --> 00:14:32,335 ‫Agora, na verdade, criamos um novo marcador dentro do Mapbox 266 00:14:32,335 --> 00:14:37,257 ‫dizendo new Mapbox GL. marcador. 267 00:14:40,230 --> 00:14:45,230 ‫E então, passamos o elemento que acabamos de criar, então 268 00:14:45,400 --> 00:14:49,503 ‫L, e então também especificamos uma propriedade âncora. 269 00:14:51,100 --> 00:14:52,090 ‫Que eu 270 00:14:53,440 --> 00:14:54,910 ‫defini para baixo aqui. 271 00:14:54,910 --> 00:14:58,610 ‫E o que isso significa é que é a parte inferior 272 00:14:58,610 --> 00:15:01,230 ‫do elemento e, neste caso, a parte 273 00:15:01,230 --> 00:15:04,683 ‫inferior do pino, que estará localizado na localização GPS exata. 274 00:15:05,790 --> 00:15:07,710 ‫Também poderíamos colocá-lo no centro, 275 00:15:07,710 --> 00:15:10,113 ‫mas acho que faz mais sentido, vamos 276 00:15:11,260 --> 00:15:13,690 ‫abrir essa imagem de novo, acho que 277 00:15:13,690 --> 00:15:16,520 ‫faz mais sentido que este final aqui da 278 00:15:16,520 --> 00:15:19,110 ‫imagem seja o que realmente aponta para a 279 00:15:19,110 --> 00:15:20,663 ‫localização GPS exata. 280 00:15:22,512 --> 00:15:26,040 ‫Isso é o que fazemos com esta propriedade âncora. 281 00:15:26,040 --> 00:15:27,680 ‫Então esse é 282 00:15:27,680 --> 00:15:31,896 ‫o marcador e, agora, podemos chamar alguns métodos. 283 00:15:31,896 --> 00:15:35,600 ‫No momento, o Mapbox não sabe nada sobre as coordenadas GPS 284 00:15:35,600 --> 00:15:36,635 ‫deste marcador. 285 00:15:36,635 --> 00:15:39,250 ‫Nós não definimos isso em nenhum lugar. 286 00:15:39,250 --> 00:15:40,580 ‫Vamos fazer isso 287 00:15:40,580 --> 00:15:44,960 ‫agora, então defina longitude, latitude e igual ao 288 00:15:44,960 --> 00:15:47,423 ‫local. coordenadas. 289 00:15:49,364 --> 00:15:54,301 ‫Lembre-se de que esta aqui é uma matriz de longitude 290 00:15:54,301 --> 00:15:55,990 ‫e latitude forçada. 291 00:15:55,990 --> 00:15:59,471 ‫Isso é exatamente o que o Mapbox espera. 292 00:15:59,471 --> 00:16:02,540 ‫Só para ter certeza de que você realmente entendeu, 293 00:16:02,540 --> 00:16:04,633 ‫vamos dar uma olhada nos tours. 294 00:16:05,719 --> 00:16:09,670 ‫Novamente, cada local tem essas propriedades de coordenadas, e é 295 00:16:09,670 --> 00:16:12,693 ‫daí que agora estamos lendo as coordenadas. 296 00:16:13,915 --> 00:16:16,323 ‫Localização. coordenadas. 297 00:16:18,040 --> 00:16:23,040 ‫E então, finalmente, adicione a e, em seguida, nossa variável de mapa. 298 00:16:25,070 --> 00:16:28,850 ‫Portanto, este mapa aqui é esta variável de mapa 299 00:16:28,850 --> 00:16:33,093 ‫onde criamos nosso novo Mapbox. mapear logo no início. 300 00:16:34,507 --> 00:16:38,320 ‫E agora, tudo o que precisamos fazer para terminar 301 00:16:38,320 --> 00:16:40,463 ‫é realmente estender nossos limites. 302 00:16:41,490 --> 00:16:46,490 ‫Então, limites. estender e também com localizações, ou na verdade "loc", 303 00:16:48,540 --> 00:16:52,033 ‫que é a localização atual. coordenadas. 304 00:16:56,310 --> 00:16:59,720 ‫Esta primeira parte aqui realmente adiciona o marcador, 305 00:16:59,720 --> 00:17:00,950 ‫ou cria, 306 00:17:00,950 --> 00:17:03,120 ‫vamos realmente torná-lo ainda mais 307 00:17:03,120 --> 00:17:04,310 ‫específico, 308 00:17:08,550 --> 00:17:09,910 ‫criar o marcador 309 00:17:11,500 --> 00:17:15,540 ‫e adicionar o marcador e então estender os limites 310 00:17:18,600 --> 00:17:21,653 ‫do mapa para incluir a localização atual. 311 00:17:22,624 --> 00:17:25,410 ‫Mas isso ainda não é suficiente, porque agora 312 00:17:25,410 --> 00:17:27,850 ‫também fazemos com que o mapa realmente 313 00:17:27,850 --> 00:17:29,560 ‫se encaixe nos limites. 314 00:17:29,560 --> 00:17:34,560 ‫Então, mapeie. ajustar, não não localizar, mas ajustar limites e, em 315 00:17:39,310 --> 00:17:41,743 ‫seguida, é claro, nosso objeto de limites. 316 00:17:42,640 --> 00:17:43,473 ‫Uau. 317 00:17:43,473 --> 00:17:48,473 ‫Então, muito trabalho apenas para colocar alguns marcadores no mapa. 318 00:17:48,530 --> 00:17:50,829 ‫Mas, novamente, acho muito agradável trabalhar 319 00:17:50,829 --> 00:17:52,533 ‫com esta biblioteca. 320 00:17:53,840 --> 00:17:55,800 ‫E agora vamos realmente dar uma 321 00:17:55,800 --> 00:17:58,450 ‫olhada e não tenho certeza se tudo correu bem aqui. 322 00:18:00,430 --> 00:18:02,300 ‫E, na verdade, não funcionou, então nossos 323 00:18:02,300 --> 00:18:05,264 ‫mapas não estão em nenhum lugar para ser encontrados, vamos apenas 324 00:18:05,264 --> 00:18:07,630 ‫diminuir um pouco o zoom para ver se eles 325 00:18:07,630 --> 00:18:09,083 ‫estão realmente em algum lugar, 326 00:18:10,049 --> 00:18:11,253 ‫e não estão. 327 00:18:13,070 --> 00:18:15,220 ‫Vamos dar uma olhada em nosso 328 00:18:15,220 --> 00:18:17,883 ‫console e, de fato, há algum tipo de erro. 329 00:18:18,910 --> 00:18:23,250 ‫Portanto, lat, limites de longitude não é um construtor 330 00:18:23,250 --> 00:18:26,150 ‫e, na verdade, é o contrário. 331 00:18:26,150 --> 00:18:28,750 ‫Portanto, novamente, o Mapbox, assim como o MongoDB, 332 00:18:28,750 --> 00:18:31,350 ‫espera que as coordenadas sejam primeiro a longitude 333 00:18:31,350 --> 00:18:32,900 ‫e depois a latitude. 334 00:18:32,900 --> 00:18:34,314 ‫É isso que 335 00:18:34,314 --> 00:18:36,420 ‫temos aqui com este nome e, 336 00:18:36,420 --> 00:18:38,350 ‫portanto, aqui deve ser o mesmo. 337 00:18:38,350 --> 00:18:42,813 ‫Portanto, longitude, latitude. 338 00:18:44,616 --> 00:18:47,193 ‫Vamos tentar de novo aqui. 339 00:18:48,990 --> 00:18:51,360 ‫Ahh, agora isso funciona. 340 00:18:51,360 --> 00:18:52,900 ‫Muito agradável. 341 00:18:52,900 --> 00:18:54,660 ‫Você viu aquele zoom legal. 342 00:18:54,660 --> 00:18:57,290 ‫É isso que o método de limites de ajuste faz. 343 00:18:57,290 --> 00:19:00,370 ‫Portanto, ele move e aumenta o zoom do mapa até os 344 00:19:00,370 --> 00:19:03,000 ‫limites para realmente se ajustar aos nossos marcadores. 345 00:19:03,000 --> 00:19:07,180 ‫Agora, você vê que temos este tipo de outros elementos 346 00:19:07,180 --> 00:19:08,943 ‫aqui sobrepondo nosso mapa. 347 00:19:08,943 --> 00:19:11,740 ‫E isso é por causa deste design 348 00:19:11,740 --> 00:19:14,470 ‫que criei com essas arestas aqui. 349 00:19:14,470 --> 00:19:16,490 ‫Mas isso não é 350 00:19:16,490 --> 00:19:20,323 ‫problema porque podemos especificar manualmente algum preenchimento para esses limites. 351 00:19:21,290 --> 00:19:23,860 ‫Podemos passar um objeto aqui, digamos 352 00:19:23,860 --> 00:19:27,363 ‫200 pixels superiores, inferiores também 200 pixels e, 353 00:19:30,430 --> 00:19:32,830 ‫em seguida, 100 pixels 354 00:19:32,830 --> 00:19:35,273 ‫à esquerda e à direita. 355 00:19:42,561 --> 00:19:45,100 ‫E não temos que especificar os pixels 356 00:19:45,100 --> 00:19:47,883 ‫aqui, acho que sou apenas eu escrevendo muito CSS. 357 00:19:50,780 --> 00:19:52,053 ‫Vamos tentar de novo. 358 00:19:53,635 --> 00:19:55,440 ‫Oh, boa animação de 359 00:19:55,440 --> 00:19:58,023 ‫zoom, mas isso realmente não respeitou nossas configurações. 360 00:19:59,110 --> 00:20:02,850 ‫E, na verdade, isso é porque isso não é correto. 361 00:20:02,850 --> 00:20:05,180 ‫Portanto, devemos criar um objeto e, 362 00:20:05,180 --> 00:20:08,150 ‫em seguida, especificar a propriedade padding, que 363 00:20:08,150 --> 00:20:09,673 ‫contém tudo isso. 364 00:20:10,920 --> 00:20:11,770 ‫Então vamos fazer isso. 365 00:20:14,130 --> 00:20:14,963 ‫Preenchimento. 366 00:20:17,180 --> 00:20:18,013 ‫E agora, 367 00:20:19,020 --> 00:20:20,913 ‫corte isso e coloque lá. 368 00:20:23,970 --> 00:20:25,113 ‫Dê um save aqui. 369 00:20:27,790 --> 00:20:28,883 ‫Mais uma vez. 370 00:20:31,750 --> 00:20:34,310 ‫Cara, ainda há algo errado aqui. 371 00:20:34,310 --> 00:20:35,840 ‫O que é isso? 372 00:20:35,840 --> 00:20:39,560 ‫Ahh, e é claro que esse código não deveria estar aqui. 373 00:20:39,560 --> 00:20:43,913 ‫Não está na extensão, está realmente aqui dentro dos limites adequados. 374 00:20:45,060 --> 00:20:47,633 ‫Portanto, é aqui que faz sentido estar. 375 00:20:52,620 --> 00:20:57,333 ‫Vamos corrigir esse código aqui e agora faz sentido. 376 00:20:59,144 --> 00:21:00,890 ‫Claro que precisa estar nos 377 00:21:00,890 --> 00:21:03,460 ‫limites de ajuste, que é, no final, a função 378 00:21:03,460 --> 00:21:05,750 ‫que executa o movimento e o zoom. 379 00:21:05,750 --> 00:21:07,430 ‫É onde o preenchimento deve 380 00:21:07,430 --> 00:21:10,400 ‫estar, e podemos especificar um monte de outras opções. 381 00:21:10,400 --> 00:21:12,320 ‫E novamente, se você 382 00:21:12,320 --> 00:21:14,713 ‫estiver interessado nisso, basta verificar a documentação. 383 00:21:15,810 --> 00:21:17,680 ‫Então, uma terceira tentativa 384 00:21:17,680 --> 00:21:19,730 ‫aqui, vamos esperar que desta 385 00:21:19,730 --> 00:21:23,520 ‫vez eu tenha acertado, ahh, e sim, parece muito melhor. 386 00:21:23,520 --> 00:21:26,980 ‫Mas, ainda há algumas coisas que podemos melhorar aqui, porque 387 00:21:26,980 --> 00:21:29,680 ‫no momento não podemos nem saber o que 388 00:21:29,680 --> 00:21:31,670 ‫é cada uma dessas localidades. 389 00:21:31,670 --> 00:21:35,290 ‫Na verdade, queremos uma espécie de pop-up aqui, 390 00:21:35,290 --> 00:21:38,373 ‫que exibe informações sobre o local. 391 00:21:41,110 --> 00:21:45,043 ‫Não apenas o marcador, mas também queremos adicionar um pop-up. 392 00:21:49,270 --> 00:21:52,630 ‫E isso é um pouco semelhante a realmente adicionar o 393 00:21:52,630 --> 00:21:57,133 ‫marcador, então dizemos novo Mapbox GL. Aparecer. 394 00:21:59,800 --> 00:22:02,300 ‫Então, como antes, especificamos as coordenadas 395 00:22:02,300 --> 00:22:03,623 ‫desse pop-up. 396 00:22:05,940 --> 00:22:07,523 ‫Então aquele bem aqui. 397 00:22:08,610 --> 00:22:11,900 ‫Em seguida, também precisamos definir o html para este 398 00:22:11,900 --> 00:22:14,990 ‫pop-up, e vou fazer isso agora usando o 399 00:22:14,990 --> 00:22:17,730 ‫método set html, porque isso me permitirá 400 00:22:17,730 --> 00:22:19,950 ‫adicionar algum conteúdo direto nesse 401 00:22:19,950 --> 00:22:24,353 ‫html, então defina html e, em seguida, um string de modelo aqui. 402 00:22:26,040 --> 00:22:28,030 ‫Quero que seja um 403 00:22:28,030 --> 00:22:30,760 ‫parágrafo e as informações que desejo exibir aqui 404 00:22:30,760 --> 00:22:33,630 ‫são o dia em que estaremos neste local 405 00:22:33,630 --> 00:22:36,250 ‫e, em seguida, o nome do local. 406 00:22:36,250 --> 00:22:39,730 ‫Então, basicamente, eu quero exibir o dia, é por 407 00:22:39,730 --> 00:22:43,300 ‫isso que criamos essas propriedades do dia aqui e, em 408 00:22:43,300 --> 00:22:44,753 ‫seguida, a descrição. 409 00:22:50,170 --> 00:22:54,520 ‫Dia e depois local, lembre-se de qual é o local indie 410 00:22:54,520 --> 00:22:56,623 ‫atual para cada loop e, 411 00:22:57,860 --> 00:22:58,853 ‫em seguida, dia, 412 00:23:01,720 --> 00:23:03,543 ‫local. Descrição. 413 00:23:06,870 --> 00:23:07,980 ‫Dê um 414 00:23:07,980 --> 00:23:10,210 ‫save aqui, que parece muito melhor agora. 415 00:23:10,210 --> 00:23:14,010 ‫E então, assim como com o outro, 416 00:23:14,010 --> 00:23:19,010 ‫também precisamos adicionar a, e então nossa variável de mapa. 417 00:23:22,130 --> 00:23:24,380 ‫E isso não vai parecer perfeito, 418 00:23:24,380 --> 00:23:26,730 ‫porque precisamos especificar algumas opções, mas eu 419 00:23:26,730 --> 00:23:29,083 ‫ainda queria mostrar o resultado neste momento. 420 00:23:32,070 --> 00:23:35,100 ‫E então, você vê que eles realmente se sobrepõem 421 00:23:35,100 --> 00:23:36,453 ‫aos marcadores agora. 422 00:23:37,920 --> 00:23:41,083 ‫Na verdade, podemos consertar isso usando uma propriedade de deslocamento. 423 00:23:43,560 --> 00:23:46,883 ‫Passamos essas opções aqui mesmo para o novo pop-up. 424 00:23:48,396 --> 00:23:49,770 ‫Dizemos 425 00:23:51,390 --> 00:23:54,940 ‫deslocamento de 30 pixels. 426 00:23:54,940 --> 00:23:57,081 ‫E também notei que 427 00:23:57,081 --> 00:23:59,840 ‫temos um preenchimento um pouco demais na 428 00:23:59,840 --> 00:24:04,840 ‫parte inferior, então vamos reduzir para 150 e fazer isso de novo. 429 00:24:09,610 --> 00:24:13,190 ‫E então, isso parece muito bom, eu acho. 430 00:24:13,190 --> 00:24:15,750 ‫Assim, quem agora der uma 431 00:24:15,750 --> 00:24:18,609 ‫olhada em nossa página, poderá rapidamente ver 432 00:24:18,609 --> 00:24:21,533 ‫que tipo de roteiro será esse passeio. 433 00:24:21,533 --> 00:24:23,740 ‫E se houver muitas 434 00:24:23,740 --> 00:24:26,423 ‫informações, também podemos fechar esses pop-ups. 435 00:24:27,680 --> 00:24:30,700 ‫E poderíamos realmente adicionar todos os tipos de coisas a este mapa. 436 00:24:30,700 --> 00:24:33,440 ‫Por exemplo, poderíamos criar essas linhas aqui 437 00:24:33,440 --> 00:24:35,250 ‫entre esses pontos e 438 00:24:35,250 --> 00:24:38,570 ‫juntá-los, como uma linha verde aqui ou algo assim. 439 00:24:38,570 --> 00:24:41,096 ‫Ou também podemos exibir a rota 440 00:24:41,096 --> 00:24:42,820 ‫real de um 441 00:24:42,820 --> 00:24:45,350 ‫ponto a outro usando basicamente as 442 00:24:45,350 --> 00:24:47,610 ‫direções, mas vamos mantê-lo simples aqui. 443 00:24:47,610 --> 00:24:49,990 ‫A única coisa que resta fazer 444 00:24:49,990 --> 00:24:53,430 ‫aqui para mim, é realmente desativar a funcionalidade de zoom. 445 00:24:53,430 --> 00:24:55,320 ‫Porque agora, vamos 446 00:24:55,320 --> 00:24:57,230 ‫dizer que estamos ampliando 447 00:24:57,230 --> 00:24:59,400 ‫esta página, ou na verdade 448 00:24:59,400 --> 00:25:01,450 ‫se estamos rolando nesta página, 449 00:25:01,450 --> 00:25:03,740 ‫e assim que chegarmos aqui, 450 00:25:03,740 --> 00:25:08,740 ‫e continuarmos rolando aqui, então rolamos o mapa ao invés da página. 451 00:25:09,034 --> 00:25:12,060 ‫Essa não é uma boa experiência do usuário 452 00:25:12,060 --> 00:25:13,673 ‫e, portanto, tudo o 453 00:25:13,673 --> 00:25:17,110 ‫que precisamos fazer agora é basicamente desativar a funcionalidade de 454 00:25:17,110 --> 00:25:18,410 ‫rolagem neste mapa. 455 00:25:18,410 --> 00:25:22,880 ‫Ainda permitiremos que as pessoas se movimentem dessa forma, mas 456 00:25:22,880 --> 00:25:24,883 ‫o zoom será desativado. 457 00:25:26,200 --> 00:25:29,463 ‫Vamos aqui para o nosso mapa e adicioná-lo. 458 00:25:30,743 --> 00:25:33,760 ‫E não estamos usando padrões interativos, porque assim não 459 00:25:33,760 --> 00:25:35,970 ‫poderíamos nem mesmo deslocar o mapa. 460 00:25:35,970 --> 00:25:39,317 ‫Mas, novamente, isso deveria pelo menos ser permitido. 461 00:25:39,317 --> 00:25:43,680 ‫A opção que estou definindo aqui é scroll zoom false. 462 00:25:46,580 --> 00:25:49,202 ‫E, novamente, para todas as opções possíveis 463 00:25:49,202 --> 00:25:50,888 ‫que você pode 464 00:25:50,888 --> 00:25:55,190 ‫definir aqui, vá em frente e dê uma olhada na referência. 465 00:25:55,190 --> 00:25:58,730 ‫E agora, quando colocamos nosso mouse aqui e rolamos, ele 466 00:25:58,730 --> 00:26:01,463 ‫não altera o nível de zoom. 467 00:26:03,040 --> 00:26:04,530 ‫Perfeito. 468 00:26:04,530 --> 00:26:09,060 ‫Ainda podemos fazer uma panorâmica, então acho que está muito bom agora. 469 00:26:09,060 --> 00:26:12,083 ‫Vamos testar em outro. 470 00:26:12,920 --> 00:26:14,653 ‫Digamos aqui o caminhante da floresta. 471 00:26:17,290 --> 00:26:19,450 ‫E então, isso ainda funciona. 472 00:26:19,450 --> 00:26:22,130 ‫E estes aqui estão meio sobrepostos, 473 00:26:22,130 --> 00:26:25,553 ‫mas sem problemas, podemos sempre fechá-los se quisermos. 474 00:26:28,120 --> 00:26:30,713 ‫Vamos dar uma olhada aqui, por exemplo, explorador do mar. 475 00:26:32,420 --> 00:26:33,440 ‫E se formos 476 00:26:33,440 --> 00:26:35,231 ‫rápidos o suficiente, podemos até mesmo 477 00:26:35,231 --> 00:26:38,100 ‫ver a animação do zoom movendo o mapa para aquele local. 478 00:26:38,100 --> 00:26:39,890 ‫Ok, perfeito. 479 00:26:39,890 --> 00:26:42,680 ‫Espero que você tenha realmente seguido 480 00:26:42,680 --> 00:26:46,670 ‫este exemplo com tudo o que fizemos no Mapbox. 481 00:26:46,670 --> 00:26:49,060 ‫Agora, caso algo não funcione, certifique-se de que 482 00:26:49,060 --> 00:26:50,330 ‫você está usando 483 00:26:50,330 --> 00:26:51,863 ‫uma versão semelhante à minha, 484 00:26:52,870 --> 00:26:56,500 ‫então o que quero dizer é uma versão semelhante da biblioteca Mapbox. 485 00:26:56,500 --> 00:26:59,403 ‫Que no meu caso aqui é a versão 0. 54 486 00:27:00,870 --> 00:27:04,363 ‫O seu provavelmente não deve ser 1. algo. 487 00:27:05,250 --> 00:27:06,600 ‫Então, se você está 488 00:27:06,600 --> 00:27:10,430 ‫assistindo a este vídeo muito tempo depois da gravação e tem um V1 489 00:27:10,430 --> 00:27:14,891 ‫aqui, vá em frente e mude para 0. algo, de modo 490 00:27:14,891 --> 00:27:18,213 ‫que basicamente não haja alterações importantes. 491 00:27:19,242 --> 00:27:24,242 ‫Enfim, com isso encerramos nossa página de tour e não 492 00:27:24,560 --> 00:27:27,140 ‫precisamos mais de nada 493 00:27:27,140 --> 00:27:30,140 ‫disso, o mapa também está 494 00:27:30,140 --> 00:27:34,740 ‫lá, e essa parte do site está realmente finalizada. 495 00:27:34,740 --> 00:27:35,573 ‫Impressionante. 496 00:27:35,573 --> 00:27:38,660 ‫Parabéns por tornar isso realidade, por realmente 497 00:27:38,660 --> 00:27:42,200 ‫começar a construir este lindo site usando todas essas 498 00:27:42,200 --> 00:27:44,200 ‫tecnologias incríveis que você aprendeu 499 00:27:44,200 --> 00:27:45,663 ‫até agora.