A criação de mapas pode ser bastante poderosa, mas muitas vezes você fica preso às opções de código aberto para as imagens do mapa que podem não ajudar na legibilidade dos seus dados. Como podemos aproveitar as APIs de bloco do Mapbox para adicionar um mapa base personalizado ao nosso aplicativo React Leaflet?

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.

gatsby starter leaflet with mapbox tilelayer
Folheto para iniciantes de Gatsby com mapa base do Mapbox

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.

coronavirus map dashboard demo
Mapa personalizado de Coronavirus (COVID-19)

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.

mapbox homepage
mapbox.com

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. Além disso, à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.

mapbox studio
Mapbox Studio

Quando estivermos no painel do Studio, queremos selecionar o botão Novo estilo.

mapbox studio new style
Crie um novo estilo no Mapbox Studio

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.

mapbox studio new style choose template
Selecione e personalize um modelo para um novo estilo no Mapbox Studio

E agora entramos em nossa interface de personalização.

mapbox customize style
UI do estilo de personalização da caixa de mapas

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.

mapbox account
Criando um novo token na 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.

Além disso, é 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 .

mapbox create token
Crie um novo token de acesso no Mapbox

Configurando nosso Terminal Customizado

Para este tutorial, vamos usar Serviço Static Tiles da Mapbox.

mapbox static tiles map api
API de mapas de blocos estáticos do 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.

mapbox studio style url
Localizando o URL do estilo no Mapbox Studio

No meu exemplo, meu URL de estilo se parece com:

mapbox://styles/colbyfayock/ck8lryjfq0jdo1ip9ctmuhc6p

colbyfayock é 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=MYACCESSTOKEN

Parte 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 componente, que define as imagens do mundo em que você baseia seu mapa.

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.

  OpenStreetMap contributors"
  />

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=MYACCESSTOKEN

Para 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 © Mapbox

Quando conectado ao nosso TileLayer, nosso código agora deve ficar assim:

  OpenStreetMap contributors, CC-BY-SA, Imagery © Mapbox"
  />

E uma vez que abrimos nosso mapa, devemos ver nosso novo mapa base!

react leaflet mapbox basemap
Reagir folheto com um mapa base do Mapbox

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!

gatsby starter leaflet in browser
Novo aplicativo Leaflet Gatsby no navegador

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!

gatsby starter leaflet with mapbox tilelayer in browser
Folheto para iniciantes Gatsby com mapa base personalizado do Mapbox no navegador

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:

Siga-me para mais Javascript, UX e outras coisas interessantes!





Fonte