O que vamos construir?
Vamos continuar criando uma nova base Estilo da caixa de mapas na nossa Mapbox conta. Uma vez criado, vamos usar o API do mapa para adicionar um mapa base personalizado ao nosso Reagir folheto aplicativo.
Para o nosso mapa, vamos usar isso Folheto Gatsby Starter Eu criei que permitirá que você crie facilmente um novo aplicativo de mapeamento. Antes de falarmos sobre isso, mostrarei como adicioná-lo usando apenas os componentes do React Leaflet.
Um aplicativo de mapeamento?
Sim! Os mapas são usados em todo o mundo para estudar conjuntos de dados para localizações geográficas. São ferramentas importantes para cientistas e outros que estão tentando ajudar o mundo.
Se você quiser saber mais sobre como criar um mapa e adicionar dados a ele, confira algumas das meus outros artigos primeiro, como criar um Mapa do Coronavirus (COVID-19) ou um Mapa da viagem por estrada no verão bem como um pouco de inspiração sobre o porquê Qualquer um pode mapear.
O que é o Mapbox?
O Mapbox é uma plataforma de mapeamento que permite que seus clientes criem soluções de mapeamento personalizadas. Eles também aproveitam uma variedade de APIs que fornecem recursos poderosos para a criação de recursos de mapas.
Para nossos propósitos, utilizaremos a API do mapa, especificamente a API Static Tiles, para exibir um estilo de mapa personalizado que criamos.
Parte 1: Criando um estilo personalizado da Mapbox
Para obter a aparência que queremos para o nosso mapa, é importante ter um mapa base que ajude a fazer com que nossos dados se apresentem sem distrações. Ademais, às vezes é divertido ter um mapa personalizado.
Conta do Mapbox
A primeira coisa que precisamos para configurar nosso estilo personalizado da Mapbox é ter uma conta. Não vou orientá-lo nesse processo, mas você pode ir até Site da Mapbox onde você pode se inscrever gratuitamente: mapbox.com
Criando um novo estilo personalizado
Criar um novo estilo no Mapbox não é tão difícil quanto parece. Embora possa ficar realmente complexo se você quiser algo único, podemos copiar um dos estilos padrão do Mapbox para começar.
Primeiro, vá até o Mapbox’s Painel do Studio clicando no link da sua conta no canto superior direito quando estiver conectado.
Quando estivermos no painel do Studio, queremos selecionar o botão Novo estilo.
Depois de clicar no botão, um modal será exibido, permitindo que você escolha um modelo. Você pode escolher o que quiser aqui, mas eu vou escolher Monocromático com uma variação de Escuro. E depois de selecionar seu modelo, clique no botão Personalizar.
E agora entramos em nossa interface de personalização.
A partir daqui, você pode realmente fazer o que gostaria. Há várias opções para personalizar seu mapa. É um pouco complexo tentar cavar aqui, mas O Mapbox fornece alguns recursos para tentar ajudá-lo a se tornar produtivo.
Gerando um token do Mapbox
Quando estiver satisfeito com seu novo estilo e com tudo publicado, queremos gerar um token que usaremos para fornecer acesso ao nosso Mapa.
Vá para a seção Conta do painel do Mapbox.
O Mapbox fornece um token “padrão” que você pode usar em seus aplicativos. Você é livre para usar isso, mas eu recomendo criar um novo token para fornecer um nome exclusivo, dessa forma, se você passar o tempo nível gratuito do Mapbox, você poderá acompanhar seu uso.
Ademais, é melhor manter um token separado para cada aplicativo, para que você possa girar facilmente uma chave individual, sem precisar atualizar todos os aplicativos que o utilizarem.
Depois de clicar em Criar um token, você pode configurar a chave da maneira que desejar, com os escopos e permissões que escolher, mas para nossos propósitos, você pode deixar todos os escopos Públicos marcados para o nosso mapa, o que eles fazem por padrão .
Configurando nosso Terminal Customizado
Para este tutorial, vamos usar Serviço Static Tiles da Mapbox.
Nosso ponto de extremidade será semelhante ao seguinte:
https://api.mapbox.com/styles/v1/{username}/{style_id}/tiles/256/{z}/{x}/{y}@2x?access_token={access_token}Existem alguns parâmetros aqui que precisamos entender:
- nome de usuário: este será o nome de usuário da sua conta do Mapbox
- style_id: esse será o ID do estilo que você criou antes
- z, x, y: esses são parâmetros que o Leaflet troca programaticamente, então queremos deixá-los como estão
- access_token: esta é a chave do Mapbox que você criou acima
Para encontrar seu nome de usuário e ID do estilo, podemos usar o URL do estilo para o nosso novo estilo do Mapbox para obter esses valores.
No meu exemplo, meu URL de estilo se parece com:
mapbox://styles/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6pcolbyfayock é meu nome de usuário e ck8lryjfq0jdo1ip9ctmuhc6p é o meu ID de estilo.
E assim que eu atualizar meus parâmetros de ponto final, o URL final do ponto de mosaico será semelhante a:
https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKENParte 2: Adicionando um TileLayer personalizado ao React Leaflet
Ao criar um mapa com o React Leaflet, seu componente principal será um que envolve a totalidade da aplicação. É isso que configura o seu Instância do mapa para Folheto.
Para nossos propósitos aqui, usaremos o exemplo no Página inicial do folheto React como nosso ponto de partida.
Reagir o componente TileLayer do folheto
Dentro do seu componente você inclui um
O exemplo na página inicial do React Leaflet usa uma versão pública de OpenStreetMap como seu TileLayer, que é um projeto de mapa de código aberto criado e atualizado por pessoas de todo o mundo.
Isso fornece um mapa básico, mas queremos trocar no Mapbox para que possamos configurar uma aparência personalizada para o nosso mapa.
TileLayer personalizado da caixa de mapeamento
Para adicionar nosso estilo personalizado, queremos atualizar o url e attribution adereços do TileLayer componente.
Para URL, ele será simplesmente o ponto de extremidade de estilo personalizado que criamos anteriormente; portanto, no meu exemplo, ele se parece com:
https://api.mapbox.com/styles/v1/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p/tiles/256/{z}/{x}/{y}@2x?access_token=MYACCESSTOKENPara atribuição, queremos creditar o Mapbox como o serviço, portanto, queremos definir nossa atribuição como:
Map data © OpenStreetMap contributors, CC-BY-SA, Imagery © MapboxQuando conectado ao nosso TileLayer, nosso código agora deve ficar assim:
E uma vez que abrimos nosso mapa, devemos ver nosso novo mapa base!
Veja o código!
Se você quiser ver como eu fiz isso, confira o diff commit por commit.
A única ressalva é que eu criei um .env.development.local arquivo na raiz do meu projeto no qual armazenei uma nova variável de ambiente chamada REACT_APP_MAPBOX_KEY para armazenar minha chave do Mapbox.
Parte 3: Adicionando um mapa base personalizado ao Gatsby Starter Leaflet
Eu escrevi um pouco de outros artigos em Como começar com minha Folheto Gatsby Starter, mas para essa parte, queremos que um aplicativo básico seja ativado, que possamos usar para alterar nossa TileLayer ponto final.
Configurando o aplicativo React Leaflet Gatsby
Para começar, confira as instruções no github Starter:
https://github.com/colbyfayock/gatsby-starter-leaflet
Quando estiver pronto, você deverá ter um aplicativo de mapeamento básico pronto!
Configurando nosso serviço Mapbox
A primeira coisa que queremos fazer é adicionar o Mapbox como um serviço em nossa src/data/map-services.js Arquivo.
Usando nosso URL de terminal personalizado que criamos na Parte 1, vamos configurar um novo objeto com um nome de Mapbox e com um URL e uma atribuição semelhantes ao que fizemos na Parte 2.
export const mapServices = [ { name: ‘OpenStreetMap’, attribution: '© OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox’, url: `https://api.mapbox.com/styles/v1/colbyfayock/ck8c2foj72lqk1jnug0g2haw0/tiles/256/{z}/{x}/{y}@2x?access_token=MY_ACCESS_TOKEN` }];Usando nosso serviço de mapa Mapbox
Depois de configurar o serviço Mapbox, tudo o que resta é abrir o src/pages/index.js arquivo, encontre o mapSettings definição de objeto e atualize o defaultBaseMap propriedade para Mapbox.
const mapSettings = { center: CENTER, defaultBaseMap: ‘Mapbox’, zoom: DEFAULT_ZOOM, mapEffect};Salve essa alteração, atualize o mapa no seu navegador e agora você deverá ver seu estilo de mapa base personalizado!
Veja o código!
Se você quiser ver como eu fiz isso, confira o diff com o commit.
A única ressalva é que eu criei um .env.development arquivo na raiz do meu projeto no qual armazenei uma nova variável de ambiente chamada GATSBY_MAPBOX_KEY para armazenar minha chave do Mapbox.
Protegendo sua chave do Mapbox
Variáveis ambientais
Parte da maioria dos processos de desenvolvimento que usam chaves individuais geralmente as define como variáveis de ambiente. Variáveis de ambiente são configurações definidas que não vivem no próprio código.
Isso é importante porque impede que sua chave seja registrada no seu código, o que é ruim do ponto de vista da segurança, mas também permite que você forneça uma chave diferente para diferentes ambientes.
Ao gerar suas chaves, tente manter isso em mente, pois isso pode economizar a longo prazo.
Bloqueando sua chave do Mapbox
Nas suas configurações ao criar um token ou ao editar um token, o Mapbox permite especificar apenas os URLs dos quais você deseja que sua chave seja acessível.
Embora o Mapbox tenha um nível gratuito generoso, você provavelmente deseja mantê-lo bloqueado apenas nos URLs em que o está usando. Você pode criar várias chaves, onde uma poderia ser para uso público em seu site e outra para o seu desenvolvimento local.
Isso é útil, por exemplo, em que você possui uma chave que nunca será usada publicamente para fins de desenvolvimento, mas, em seguida, possui uma chave com a qual implanta, que pode ser bloqueada apenas para esse URL.
Se alguém pegar sua chave, poderá conectá-la ao próprio site e usar todo o seu nível gratuito, potencialmente aumentando a sua conta!
Deseja saber mais sobre mapas?
Você pode conferir alguns dos meus outros recursos para começar:
