Introdução

Iniciar a jornada de aprendizagem da programação webGIS pode ser um desafio, especialmente se formos novos no mundo de HTML, CSS e JavaScript. Felizmente, com ferramentas como o Replit podemos começar a aprender de forma simples e direta. Este artigo orientará você nas etapas básicas para criar um aplicativo WebGIS simples usando MapTiler. Com este tutorial aprenderemos como criar mapas interativos que podem ser acessados ​​de qualquer lugar, apenas usando nosso navegador.

Etapa 1. Crie uma conta e um projeto no Replit

1. Inscreva-se no Replit:

• Abrir Relplit
• Clique no botão "Inscrever-se" no canto superior direito.
• Selecione o método de registro desejado (Google, GitHub ou e-mail).
• Após o registro bem-sucedido, seremos direcionados para o painel do Replit.

2. Criando um novo projeto:

• No painel do Replit, clique no botão "Criar Repl".
• Na seção Modelo, selecione "HTML, CSS, JS".
• Nomeie nosso projeto, por exemplo "WebGIS-Simple".
• Clique em "Criar Repl" para criar um projeto. Assim que o projeto for criado, veremos três arquivos principais: index.html, style.css e script.js. Esses arquivos serão usados ​​para construir nossa página web.

Etapa 2: Configurando a estrutura HTML

1. Compreendendo a estrutura HTML básica:

• Abra o arquivo index.html no Replit.
• index.html é um arquivo que determina a estrutura e o conteúdo básico de nossas páginas web.

2. Adicionando Elementos ao Mapa:

• Substitua o conteúdo de index.html pelo seguinte código:

    
    
    
    
    
    


    
WebGIS Sederhana Menggunakan MapTiler
    

    

Explicação:

• : Exibe o título da página.

• : O local onde o mapa será exibido.
• Maplibre GL: Usado para exibir mapas do MapTiler.



Etapa 3: Adicionar estilos com CSS

1. Adicionando CSS para visualização de mapa:

• Abra o arquivo style.css.
• Substitua o conteúdo do arquivo style.css pelo seguinte código:

body, html {
  margin: 0;
  padding: 0;
  height: 100%;
  font-family: Arial, sans-serif;
}

#map {
  width: 100%;
  height: 500px;
  margin-top: 20px;
}

h1 {
  text-align: center;
  color: #333;
}

Explicação:

• body, html: Defina margens e preenchimento para que o mapa possa usar a tela inteira.
• #map: define o tamanho do mapa para largura total e 500px de altura.
• h1: Define a exibição do título no meio da página.



Nota: esta seção de estilo pode ser ajustada de acordo com seu próprio design e necessidades, observando o código de estilo aqui W3 Schools

Etapa 4: Integrando MapTiler com JavaScript

1. Obtendo a chave de API do MapTiler

• Abra o MapTiler.
• Clique em "Inscrever-se" no canto superior direito.
• Preencha o formulário de inscrição com e-mail ou registre-se usando uma conta Google.
• Após o registro, seremos levados ao painel do MapTiler.



2. Obtendo a chave da API:

• No painel do MapTiler, clique na guia "Chaves de API".
• Você verá a chave de API padrão fornecida pelo MapTiler.
• Se você deseja criar uma nova chave de API, clique no botão "Criar uma nova chave".
• Dê um nome à nova chave API, por exemplo "WebGIS-Simple", e clique em "Criar".
• Copie a chave de API que acabamos de criar. Esta chave API será usada para acessar o mapa em nosso projeto.

3. Criando um mapa interativo:

• Abra o arquivo script.js.
• Adicione o seguinte código em script.js:

const map = new maplibregl.Map({
  container: 'map', // ID dari elemen div tempat peta akan dirender
  style: 'https://api.maptiler.com/maps/basic/style.json?key=YOUR_MAPTILER_API_KEY', // URL ke gaya peta dari MapTiler dan bagian API KEY masukan API KEY anda
  center: [106.8272, -6.1751], // Koordinat pusat peta (Jakarta)
  zoom: 10 // Level zoom peta
});

Explicação:

• container: Refere-se ao elemento com o mapa de id em index.html.
• style: URL para o estilo do mapa do MapTiler. Substitua YOUR_MAPTILER_API_KEY pela sua chave de API.
• center: Coordenadas geográficas do centro do mapa (Jacarta).
• zoom: O nível de zoom inicial do mapa.



4. Adicionando marcadores ao mapa (opcional):

• Se você deseja adicionar um marcador ao mapa, adicione o seguinte código na inicialização do mapa.
• O marcador será exibido nas coordenadas especificadas.

const marker = new maplibregl.Marker()
  .setLngLat([106.8272, -6.1751]) // Koordinat Jakarta
  .addTo(map);



Etapa 5: Executando e testando o projeto

1. Projeto em execução:

• Assim que terminarmos de escrever o código, clique no botão "Executar" no Replit. O Replit abrirá uma página da web contendo o mapa que criamos. Observando os resultados:



• Um mapa interativo do MapTiler será exibido na página da web.
• podemos aumentar, diminuir o zoom e deslocar o mapa para ver diferentes partes.



Aqui estão os resultados do Replit que fizemos:

Concluímos este projeto WebGIS simples e você pode ver os resultados no seguinte link Fonte WebGIS Simples.

Este projeto mostra como usar HTML, CSS, JavaScript e a API MapTiler para construir um aplicativo WebGIS simples. Você pode tentar você mesmo ou usar isso como base para um projeto mais complexo.

Seguindo essas etapas, criamos com sucesso um aplicativo WebGIS simples usando Replit e MapTiler. Este guia foi desenvolvido para iniciantes entenderem os fundamentos do desenvolvimento web com HTML, CSS e JavaScript enquanto aprendem a criar mapas interativos.

Incentivo e obrigado, espero que isso seja útil!