‫-: Vamos agora continuar construindo nossa integração de mapas.
‫E agora vamos realmente ir para o Mapbox.
‫E então, estou usando o Mapbox em vez do Google Maps agora e
‫isso é porque há
‫algum tempo, o Google Maps começou a exigir
‫um cartão de crédito de você
‫para poder usar o Google Maps.
‫E não acho que seja uma boa ideia para um
‫curso como este e, na verdade, também
‫gosto muito do Mapbox e, portanto, acho que é perfeito para usarmos neste curso.
‫Eles também têm uma documentação excelente
‫que vamos testar em um segundo aqui.
‫Mas, por agora, vamos começar e criar uma nova conta.
‫Então, basta clicar aqui para começar a construir.
‫E então, é claro, crie sua conta gratuita.
‫Já tenho um e então,
‫basta pausar o vídeo neste momento para criar essa conta.
‫E depois de criar sua conta,
‫você deve chegar a uma página parecida com esta.
‫Agora que você está assistindo
‫este vídeo, esta página
‫aqui pode, é claro, ter mudado, e
‫provavelmente mudou, mas
‫o que precisamos fazer agora é encontrar um
‫link que diga algo assim, então instale o desenvolvimento
‫do software de mapas kit, então isso aqui, ou também integrar Mapbox,
‫que deve ser praticamente o mesmo.
‫Então, clicarei aqui para instalar os mapas para JavaScript.
‫E o que vamos fazer
‫aqui é usar o Mapbox CDN para a
‫rede de distribuição de conteúdo e,
‫por enquanto, pelo menos
‫não o empacotador do módulo NPM.
‫Então o primeiro passo, como diz aqui,
‫é incluir esses arquivos aqui e no arquivo HTML obtido.
‫E é aí que precisamos agora da
‫técnica de estender a cabeça que tínhamos antes.
‫E é aí que agora
‫precisamos dessa técnica de extensão da cabeça.
‫Aqui no tour,
‫lembre-se de como tiramos isso da cabeça, na verdade.
‫Mas agora ainda precisamos de algumas coisas
‫que precisamos acrescentar à cabeça.
‫E então esse é este script e também esta folha de estilo.
‫Vamos traduzir rapidamente para pug.
‫E o link também,
‫e é isso.
‫Vamos nos livrar
‫dessa parte e voltar para a próxima etapa aqui.
‫Em seguida, precisamos copiar este código JavaScript aqui,
‫em nosso arquivo.
‫E para o nosso roteiro, é claro.
‫Bem aqui na caixa de mapas. js.
‫Agora você provavelmente não terá esse token de
‫acesso neste momento
‫e, portanto, ele exigia que você já o fizesse
‫ou, caso contrário, mostrarei como fazê-lo em um segundo.
‫Vamos apenas recuar esta parte aqui.
‫Com isso, já estamos prontos.
‫Na verdade, isso já deve criar
‫um mapa e exibi-lo em nossa página.
‫Isso ocorre porque o contêiner aqui está definido para mapear.
‫E o que isso significa é que ele
‫colocará o mapa em um elemento com o ID de mapa.
‫É por isso que aqui, em nosso tour, temos
‫esse elemento aqui, oh, onde
‫está isso?
‫Bem aqui, temos um elemento com mapa de ID.
‫A razão para isso é que aqui no Mapbox,
‫realmente precisamos de um
‫elemento com um ID que podemos especificar aqui.
‫E o padrão é map,
‫e é assim que o chamo em html.
‫Então também temos esse estilo padrão aqui, que
‫vamos mudar em um segundo.
‫Por enquanto, vamos voltar às
‫nossas instruções aqui, e então diz que terminamos aqui.
‫Mas agora vamos voltar à
‫nossa conta e criar aquele token de
‫que precisamos para poder acessar o Mapbox.
‫Por favor, não copie apenas
‫meu token, isso não funcionará bem para você.
‫Mas em vez disso, crie o seu próprio.
‫Você pode simplesmente criar um novo nome para ele.
‫Vamos apenas chamá-lo de algo assim.
‫E então crie o token aqui.
‫Então você coloca
‫sua senha, e então, você pode usar esse token.
‫Então, novamente, não tenho certeza se ele já
‫criou esse token para você ou se você realmente
‫precisava criar um novo.
‫De qualquer forma, também é bom ter um token para cada projeto,
‫para que você
‫possa restringir esse token apenas a esse projeto.
‫Criei minha conta aqui há muito tempo e, portanto, não
‫tenho certeza, de novo, de como funcionou, mas de
‫qualquer forma, com esse token, você deve estar pronto para continuar.
‫Na verdade, isso agora já deve exibir nosso mapa padrão.
‫Então, vamos recarregar e, de fato, este é nosso mapa padrão.
‫Não parece muito bom, bem,
‫podemos ampliar, mas
‫realmente, o estilo não é tão
‫bom e realmente não corresponde ao nosso
‫site e,
‫claro, também não temos nossas localizações
‫em nenhum lugar plotadas para o mapa.
‫E agora vamos cuidar de tudo isso.
‫Voltemos ao Mapbox e
‫agora vamos ao nosso estúdio de design.
‫Vamos apenas clicar aqui em "começar a projetar
‫um mapa" ou, novamente, se
‫seu site estiver um
‫pouco diferente neste ponto, basta procurar o estúdio de design.
‫Talvez apareça em algum lugar aqui.
‫Então, vamos tentar isso.
‫Aqui, podemos realmente fazer todo o tipo de coisas
‫relacionadas com a concepção de um mapa.
‫Na verdade, isso não é realmente o que eu
‫esperava, porque é um pouco complexo mudar todas
‫essas coisas aqui,
‫mas existem alguns estilos padrão, ah sim, isso é
‫o que eu estava procurando.
‫Vamos criar um novo
‫estilo aqui e, a partir daí, podemos escolher um padrão.
‫E realmente o que eu quero é esse estilo leve.
‫Então crie, e na verdade estou muito feliz
‫com a aparência que tirou da caixa.
‫Agora, por algum motivo, não vejo
‫nada aqui, ok, é porque foi ampliado para o mar.
‫Mas de qualquer maneira, vamos agora ampliar em algum lugar aqui, e
‫eu acho que já parece muito bom,
‫então vamos apenas adicionar um nome a ele aqui,
‫então estou
‫chamando de Gravação de Vídeo do Natour porque eu já
‫tenho um estilo do Natour, mas você é
‫claro que pode chamá-lo do que quiser.
‫Vamos confirmar o nome aqui, voltar, e depois vamos
‫aqui para compartilhar e usar.
‫E o que queremos não é compartilhar, mas sim usar.
‫Em algum lugar aqui, devemos ver nosso URL de estilo, e
‫então, sim, é esse.
‫Portanto, deve ser um URL basicamente começando com Mapbox.
‫Vamos apenas copiá-lo, voltar e então substituir o
‫estilo que temos aqui como padrão, pelo
‫que acabamos de criar.
‫Salve e, sim, parece
‫muito melhor.
‫E é exatamente o estilo que acabamos de criar.
‫Portanto, agora podemos aumentar ou diminuir o
‫zoom ou, na verdade, o contrário,
‫podemos movimentar o mapa para onde
‫quisermos e também podemos definir uma tonelada de propriedades, de
‫opções para este mapa.
‫Agora, sempre que carregamos o mapa,
‫ele sempre parece
‫o mesmo, sempre centralizado aqui em Boston.
‫Mas podemos mudar isso especificando o
‫centro aqui.
‫E então precisamos passar um array de duas coordenadas.
‫Vamos pegar aquele de LA que usamos
‫antes no Postman, exatamente isso, mas,
‫na
‫verdade, o Mapbox é exatamente como o MongoDB,
‫no aspecto de requerer primeiro uma longitude e
‫depois a latitude.
‫Precisamos trocá-los aqui.
‫E vamos dar uma olhada no que temos.
‫E, bem, isso realmente não nos leva a lugar nenhum.
‫Vamos também especificar um nível de zoom aqui.
‫Digamos quatro.
‫Talvez isso resolva.
‫E, na verdade, era essa ilusão.
‫Portanto, existem diferentes níveis de zoom.
‫Por exemplo, podemos experimentar um
‫aqui também, e isso deve ser muito mais
‫ampliado, ou talvez reduzido, não tenho certeza.
‫Ah, ok, então isso realmente afasta todo o caminho.
‫Então, digamos 10 aqui, por exemplo,
‫e como você pode ver, eu realmente
‫gosto de brincar com
‫esse tipo de coisa, e sim, em 10 agora está muito próximo.
‫Também podemos dizer que não queremos que seja interativo,
‫e isso é muito simples.
‫Vamos definir interativo como falso.
‫E então, basicamente, seu mapa
‫vai se parecer com uma imagem simples em seu site.
‫Como você pode ver, não consigo rolar nada
‫aqui e também não consigo deslocar.
‫Portanto, não há nada que eu possa fazer agora.
‫E essas são apenas algumas opções que
‫podemos definir.
‫Na verdade, vamos voltar aqui para o
‫Mapbox e para a documentação e o JavaScript do Mapbox.
‫Aqui você obtém toda a documentação para realmente
‫tudo o que você pode fazer com a versão JavaScript do Mapbox.
‫O que eu só queria mostrar a vocês é que as
‫coisas que acabei de mostrar estão, na verdade, aqui.
‫Portanto, temos o contêiner que especificamos, temos
‫o estilo e
‫realmente um monte de coisas.
‫Tão interativo e, se
‫você quiser, pode, é claro, brincar com
‫tudo isso.
‫Eu só queria mostrar que é assim que
‫você pode aprender mais algumas coisas sobre o Mapbox.
‫Agora, na verdade não queremos nada disso.
‫Porque não queremos centralizar o mapa em qualquer lugar, mas
‫em vez disso, queremos que ele descubra automaticamente
‫a posição do mapa com base em nossos pontos de localização do passeio.
‫O que vamos fazer agora
‫é basicamente colocar todos os locais para um determinado passeio
‫no mapa e, em seguida, permitir
‫que o mapa descubra automaticamente qual parte do mapa deve
‫ser exibida para ajustar todos esses pontos corretamente.
‫A primeira coisa que precisamos fazer
‫é criar uma variável associada.
‫Limites são iguais a um novo Mapbox GL. limites de longitude latitutde.
‫E temos acesso a este objeto Mapbox porque
‫incluímos a biblioteca Mapbox no início
‫de nossa página.
‫Bem
‫aqui, incluindo este script
‫aqui, esta biblioteca Mapbox, é
‫isso que expõe o objeto Mapbox GL, que podemos
‫então usar em todo o nosso site.
‫Este objeto de limites aqui é
‫basicamente a área que será exibida no mapa.
‫Agora vamos estender isso com todos os locais que
‫estão em nossa matriz de locais.
‫E isso fará um pouco mais de sentido
‫assim que começarmos a usá-lo.
‫Vamos agora percorrer todos os nossos locais e adicionar
‫um marcador para cada um deles.
‫Para cada um,
‫e vamos ver o bloqueio
‫para os locais, aqui queremos adicionar um marcador.
‫E para isso, realmente precisamos criar
‫um novo elemento html, a
‫este respeito, é realmente um nível um pouco baixo, mas eu
‫acho isso realmente muito
‫bom, porque, assim, temos muito controle sobre
‫o que realmente está acontecendo em nosso mapa.
‫E o que estou mostrando aqui
‫é, na verdade, apenas uma pequena fração de todas
‫as coisas excelentes que você pode fazer com o Mapbox.
‫Este aqui é apenas um JavaScript padrão
‫e, portanto, podemos usar
‫criar elemento para criar elementos.
‫Exatamente como o nome já
‫diz, e aqui queremos criar um novo diff.
‫E também queremos dar um nome de classe e
‫defini-lo como marcador.
‫E aqui está, é um ponto e vírgula.
‫E assim, no CSS, temos uma
‫classe para este marcador.
‫Marcador, aqui você vê a imagem de fundo especificada,
‫que é este pino verde aqui.
‫Aquele pino que você verá em um segundo no mapa, é
‫na verdade uma imagem personalizada que eu projetei.
‫Não está vindo diretamente do Mapbox.
‫Assim, você pode realmente ajustá-lo ao seu estilo e à
‫sua marca.
‫Eu também defini o tamanho do marcador aqui, sim,
‫é realmente personalizável.
‫Agora, na verdade, criamos um novo marcador dentro do Mapbox
‫dizendo new Mapbox GL. marcador.
‫E então, passamos o elemento que acabamos de criar, então
‫L, e então também especificamos uma propriedade âncora.
‫Que eu
‫defini para baixo aqui.
‫E o que isso significa é que é a parte inferior
‫do elemento e, neste caso, a parte
‫inferior do pino, que estará localizado na localização GPS exata.
‫Também poderíamos colocá-lo no centro,
‫mas acho que faz mais sentido, vamos
‫abrir essa imagem de novo, acho que
‫faz mais sentido que este final aqui da
‫imagem seja o que realmente aponta para a
‫localização GPS exata.
‫Isso é o que fazemos com esta propriedade âncora.
‫Então esse é
‫o marcador e, agora, podemos chamar alguns métodos.
‫No momento, o Mapbox não sabe nada sobre as coordenadas GPS
‫deste marcador.
‫Nós não definimos isso em nenhum lugar.
‫Vamos fazer isso
‫agora, então defina longitude, latitude e igual ao
‫local. coordenadas.
‫Lembre-se de que esta aqui é uma matriz de longitude
‫e latitude forçada.
‫Isso é exatamente o que o Mapbox espera.
‫Só para ter certeza de que você realmente entendeu,
‫vamos dar uma olhada nos tours.
‫Novamente, cada local tem essas propriedades de coordenadas, e é
‫daí que agora estamos lendo as coordenadas.
‫Localização. coordenadas.
‫E então, finalmente, adicione a e, em seguida, nossa variável de mapa.
‫Portanto, este mapa aqui é esta variável de mapa
‫onde criamos nosso novo Mapbox. mapear logo no início.
‫E agora, tudo o que precisamos fazer para terminar
‫é realmente estender nossos limites.
‫Então, limites. estender e também com localizações, ou na verdade "loc",
‫que é a localização atual. coordenadas.
‫Esta primeira parte aqui realmente adiciona o marcador,
‫ou cria,
‫vamos realmente torná-lo ainda mais
‫específico,
‫criar o marcador
‫e adicionar o marcador e então estender os limites
‫do mapa para incluir a localização atual.
‫Mas isso ainda não é suficiente, porque agora
‫também fazemos com que o mapa realmente
‫se encaixe nos limites.
‫Então, mapeie. ajustar, não não localizar, mas ajustar limites e, em
‫seguida, é claro, nosso objeto de limites.
‫Uau.
‫Então, muito trabalho apenas para colocar alguns marcadores no mapa.
‫Mas, novamente, acho muito agradável trabalhar
‫com esta biblioteca.
‫E agora vamos realmente dar uma
‫olhada e não tenho certeza se tudo correu bem aqui.
‫E, na verdade, não funcionou, então nossos
‫mapas não estão em nenhum lugar para ser encontrados, vamos apenas
‫diminuir um pouco o zoom para ver se eles
‫estão realmente em algum lugar,
‫e não estão.
‫Vamos dar uma olhada em nosso
‫console e, de fato, há algum tipo de erro.
‫Portanto, lat, limites de longitude não é um construtor
‫e, na verdade, é o contrário.
‫Portanto, novamente, o Mapbox, assim como o MongoDB,
‫espera que as coordenadas sejam primeiro a longitude
‫e depois a latitude.
‫É isso que
‫temos aqui com este nome e,
‫portanto, aqui deve ser o mesmo.
‫Portanto, longitude, latitude.
‫Vamos tentar de novo aqui.
‫Ahh, agora isso funciona.
‫Muito agradável.
‫Você viu aquele zoom legal.
‫É isso que o método de limites de ajuste faz.
‫Portanto, ele move e aumenta o zoom do mapa até os
‫limites para realmente se ajustar aos nossos marcadores.
‫Agora, você vê que temos este tipo de outros elementos
‫aqui sobrepondo nosso mapa.
‫E isso é por causa deste design
‫que criei com essas arestas aqui.
‫Mas isso não é
‫problema porque podemos especificar manualmente algum preenchimento para esses limites.
‫Podemos passar um objeto aqui, digamos
‫200 pixels superiores, inferiores também 200 pixels e,
‫em seguida, 100 pixels
‫à esquerda e à direita.
‫E não temos que especificar os pixels
‫aqui, acho que sou apenas eu escrevendo muito CSS.
‫Vamos tentar de novo.
‫Oh, boa animação de
‫zoom, mas isso realmente não respeitou nossas configurações.
‫E, na verdade, isso é porque isso não é correto.
‫Portanto, devemos criar um objeto e,
‫em seguida, especificar a propriedade padding, que
‫contém tudo isso.
‫Então vamos fazer isso.
‫Preenchimento.
‫E agora,
‫corte isso e coloque lá.
‫Dê um save aqui.
‫Mais uma vez.
‫Cara, ainda há algo errado aqui.
‫O que é isso?
‫Ahh, e é claro que esse código não deveria estar aqui.
‫Não está na extensão, está realmente aqui dentro dos limites adequados.
‫Portanto, é aqui que faz sentido estar.
‫Vamos corrigir esse código aqui e agora faz sentido.
‫Claro que precisa estar nos
‫limites de ajuste, que é, no final, a função
‫que executa o movimento e o zoom.
‫É onde o preenchimento deve
‫estar, e podemos especificar um monte de outras opções.
‫E novamente, se você
‫estiver interessado nisso, basta verificar a documentação.
‫Então, uma terceira tentativa
‫aqui, vamos esperar que desta
‫vez eu tenha acertado, ahh, e sim, parece muito melhor.
‫Mas, ainda há algumas coisas que podemos melhorar aqui, porque
‫no momento não podemos nem saber o que
‫é cada uma dessas localidades.
‫Na verdade, queremos uma espécie de pop-up aqui,
‫que exibe informações sobre o local.
‫Não apenas o marcador, mas também queremos adicionar um pop-up.
‫E isso é um pouco semelhante a realmente adicionar o
‫marcador, então dizemos novo Mapbox GL. Aparecer.
‫Então, como antes, especificamos as coordenadas
‫desse pop-up.
‫Então aquele bem aqui.
‫Em seguida, também precisamos definir o html para este
‫pop-up, e vou fazer isso agora usando o
‫método set html, porque isso me permitirá
‫adicionar algum conteúdo direto nesse
‫html, então defina html e, em seguida, um string de modelo aqui.
‫Quero que seja um
‫parágrafo e as informações que desejo exibir aqui
‫são o dia em que estaremos neste local
‫e, em seguida, o nome do local.
‫Então, basicamente, eu quero exibir o dia, é por
‫isso que criamos essas propriedades do dia aqui e, em
‫seguida, a descrição.
‫Dia e depois local, lembre-se de qual é o local indie
‫atual para cada loop e,
‫em seguida, dia,
‫local. Descrição.
‫Dê um
‫save aqui, que parece muito melhor agora.
‫E então, assim como com o outro,
‫também precisamos adicionar a, e então nossa variável de mapa.
‫E isso não vai parecer perfeito,
‫porque precisamos especificar algumas opções, mas eu
‫ainda queria mostrar o resultado neste momento.
‫E então, você vê que eles realmente se sobrepõem
‫aos marcadores agora.
‫Na verdade, podemos consertar isso usando uma propriedade de deslocamento.
‫Passamos essas opções aqui mesmo para o novo pop-up.
‫Dizemos
‫deslocamento de 30 pixels.
‫E também notei que
‫temos um preenchimento um pouco demais na
‫parte inferior, então vamos reduzir para 150 e fazer isso de novo.
‫E então, isso parece muito bom, eu acho.
‫Assim, quem agora der uma
‫olhada em nossa página, poderá rapidamente ver
‫que tipo de roteiro será esse passeio.
‫E se houver muitas
‫informações, também podemos fechar esses pop-ups.
‫E poderíamos realmente adicionar todos os tipos de coisas a este mapa.
‫Por exemplo, poderíamos criar essas linhas aqui
‫entre esses pontos e
‫juntá-los, como uma linha verde aqui ou algo assim.
‫Ou também podemos exibir a rota
‫real de um
‫ponto a outro usando basicamente as
‫direções, mas vamos mantê-lo simples aqui.
‫A única coisa que resta fazer
‫aqui para mim, é realmente desativar a funcionalidade de zoom.
‫Porque agora, vamos
‫dizer que estamos ampliando
‫esta página, ou na verdade
‫se estamos rolando nesta página,
‫e assim que chegarmos aqui,
‫e continuarmos rolando aqui, então rolamos o mapa ao invés da página.
‫Essa não é uma boa experiência do usuário
‫e, portanto, tudo o
‫que precisamos fazer agora é basicamente desativar a funcionalidade de
‫rolagem neste mapa.
‫Ainda permitiremos que as pessoas se movimentem dessa forma, mas
‫o zoom será desativado.
‫Vamos aqui para o nosso mapa e adicioná-lo.
‫E não estamos usando padrões interativos, porque assim não
‫poderíamos nem mesmo deslocar o mapa.
‫Mas, novamente, isso deveria pelo menos ser permitido.
‫A opção que estou definindo aqui é scroll zoom false.
‫E, novamente, para todas as opções possíveis
‫que você pode
‫definir aqui, vá em frente e dê uma olhada na referência.
‫E agora, quando colocamos nosso mouse aqui e rolamos, ele
‫não altera o nível de zoom.
‫Perfeito.
‫Ainda podemos fazer uma panorâmica, então acho que está muito bom agora.
‫Vamos testar em outro.
‫Digamos aqui o caminhante da floresta.
‫E então, isso ainda funciona.
‫E estes aqui estão meio sobrepostos,
‫mas sem problemas, podemos sempre fechá-los se quisermos.
‫Vamos dar uma olhada aqui, por exemplo, explorador do mar.
‫E se formos
‫rápidos o suficiente, podemos até mesmo
‫ver a animação do zoom movendo o mapa para aquele local.
‫Ok, perfeito.
‫Espero que você tenha realmente seguido
‫este exemplo com tudo o que fizemos no Mapbox.
‫Agora, caso algo não funcione, certifique-se de que
‫você está usando
‫uma versão semelhante à minha,
‫então o que quero dizer é uma versão semelhante da biblioteca Mapbox.
‫Que no meu caso aqui é a versão 0. 54
‫O seu provavelmente não deve ser 1. algo.
‫Então, se você está
‫assistindo a este vídeo muito tempo depois da gravação e tem um V1
‫aqui, vá em frente e mude para 0. algo, de modo
‫que basicamente não haja alterações importantes.
‫Enfim, com isso encerramos nossa página de tour e não
‫precisamos mais de nada
‫disso, o mapa também está
‫lá, e essa parte do site está realmente finalizada.
‫Impressionante.
‫Parabéns por tornar isso realidade, por realmente
‫começar a construir este lindo site usando todas essas
‫tecnologias incríveis que você aprendeu
‫até agora.