Tutorial Leaflet: sessão 1

5 maio 202528 abril 2025 Atilio Francois No Comments

Introdução ao Leaflet
Bem-vindo ao curso de introdução ao Leaflet.js

Criar mapas interativos na Web nunca foi tão fácil.
Usando a biblioteca JavaScript Leaflet, você aprenderá a representar lugares, rotas e dados e a aprimorar seus mapas com marcadores, estilos, interações e muito mais.

Objetivo do curso

O objetivo deste curso é capacitá-lo a criar mapas interativos usando o Leaflet.
Ao final do programa, você será capaz de :

Exibir um mapa centrado em um local,

Adicionar marcadores, polígonos, imagens, etc.,

Estilizar e personalizar os objetos do mapa,

Integrar interações (cliques, hovers, pop-ups),

E até mesmo publicar o mapa na Web.

Não é necessário ter experiência prévia com o Leaflet. Um conhecimento básico de HTML/JavaScript é útil, mas não essencial: tudo é explicado passo a passo. n’est requise. Une base en HTML/JavaScript est utile mais non obligatoire : tout est expliqué pas à pas.

Organização do curso

Cada sessão segue uma progressão lógica:

Uma apresentação de slides resumida para introduzir os principais conceitos

Um texto explicativo detalhando cada ponto

Um exercício prático para aplicar o que você aprendeu

Uma chave de respostas acessível para verificar seu trabalho

Duração recomendada por sessão: aproximadamente 1-2 horas.
Você pode acompanhar o curso de forma independente, conforme sua conveniência.ance.

Materiais necessários

Um navegador da Web (Chrome, Firefox, etc.)

Um editor de código (Visual Studio Code ou até mesmo um editor on-line, como JSFiddle ou CodePen)

Uma conexão com a Internet (para carregar os mapas de fundo)

Faça o download do kit inicial aqui, para ser descompactado em um diretório de sua escolha.

starter kit

1 arquivo(s) 0.00 KB

Download

Um método simples e ativo

Este curso enfatiza o aprendizado pela prática.
O objetivo não é apenas ler, mas testar, modificar e experimentar. Quanto mais você brincar com o código, mais naturalmente reterá os conceitos.

Vamos começar! Vamos começar!

Contenu

Slide 1: O que é Leaflet?

Introdução ao Leaflet

O Leaflet é uma biblioteca JavaScript de código aberto leve e avançada para a criação de mapas interativos e dinâmicos em páginas da Web. É uma das ferramentas mais populares para mapas da Web e é amplamente utilizada por sua simplicidade e capacidade de integração com uma variedade de fontes de dados geográficos.

Principais recursos do Leaflet

Leveza: o Leaflet é uma biblioteca muito leve (cerca de 40 KB compactados), o que o torna ideal para aplicativos da Web em que o desempenho é essencial.

Facilidade de uso: com sua sintaxe simples e clara, o Leaflet é acessível até mesmo para iniciantes em JavaScript.

Extensibilidade: embora a biblioteca básica ofereça a funcionalidade essencial para mapas interativos, o Leaflet pode ser estendido com vários plug-ins para adicionar outras funcionalidades (por exemplo, gerenciamento de camadas, geolocalização, desenho de formas geográficas etc.).

Compatibilidade com outros formatos: o Leaflet pode ser facilmente usado com blocos rasterizados (imagens de mapas) e dados vetoriais (GeoJSON, KML etc.).

Por que usar o Leaflet?

O Leaflet permite que você crie mapas da Web que atendam a uma variedade de necessidades, desde simples mapas de localização até complexas visualizações de dados geoespaciais. Veja a seguir alguns exemplos de casos de uso do Leaflet:

Exibição de mapas interativos com blocos, como OpenStreetMap, Mapbox ou outros serviços de blocos.

Criação de mapas leves de Sistema de Informações Geográficas (GIS) para visualização de dados geoespaciais.

Mapas de rastreamento em tempo real (por exemplo, para rastrear veículos ou pessoas).

Aplicativos de geolocalização, para exibição de posições em mapas.

Mapas usados em aplicativos de turismo, nos quais são indicados pontos de interesse ou rotas.

Slide 2: Componentes básicos

1.O mapa (L.map)

Esse é o contêiner principal do seu aplicativo de mapeamento.

let map = L.map('map').setView([48.8566, 2.3522], 13);  // Paris avec un zoom de 13

2.Planos de fundo do mapa (blocos)

Essas são imagens divididas em pequenos blocos (256×256 px) carregados de acordo com o nível de zoom e a posição.

L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png', {
  attribution: '&copy; OpenStreetMap contributors'
}).addTo(map);

3.Marcadores (L.marker)

Indicam uma posição precisa no mapa (geralmente com um ícone ou símbolo).

L.marker([48.8566, 2.3522]).addTo(map)
  .bindPopup('Paris').openPopup();

4.Formas vetoriais

O Leaflet permite que você desenhe :

Polígonos (L.polygon)

Polilinhas (L.polyline)

Círculos (L.circle)

Retângulos (L.rectangle)

Exemplo:

L.polygon([
  [48.85, 2.35],
  [48.85, 2.37],
  [48.87, 2.37]
]).addTo(map);

5.Popups e dicas de ferramentas

Para exibir informações ao passar o mouse ou ao clicar.

marcador.bindPopup(“Aqui está um pop-up”);
marker.bindTooltip(“Uma pequena dica de ferramenta”, {permanent: true});

6.Controle de camadas (L.control.layers)

Para alternar entre vários mapas de base ou camadas de informações.

let baseMaps = {
  "OSM": osmLayer,
  "Satellite": satelliteLayer
};

let overlayMaps = {
  "Réseaux": networkLayer
};

L.control.layers(baseMaps, overlayMaps).addTo(map);

7.Eventos

Cada elemento (mapa, marcador, polígono, etc.) pode ouvir eventos: cliques, passar o mouse, zoom, etc.

map.on('click', function(e) {
  alert("Coordonnées : " + e.latlng);
});

8.Camadas GeoJSON

Para exibir dados vetoriais dinâmicos (geralmente de bancos de dados ou arquivos).

L.geoJSON(geojsonData).addTo(map);

9.Plug-ins

O Leaflet tem uma grande comunidade. Você pode adicionar funções como pesquisa, clusters, métricas, etc., por meio de plug-ins.

Os exemplos incluem :

Leaflet.draw (desenho interativo)

Leaflet.markercluster

Leaflet.fullscreen

Slide 3: Exemplo de um cartão de Leaflet

Exemplo básico de uso do Leaflet

Explicação: Este slide explica como inicializar um mapa usando o Leaflet. O código de exemplo mostra como :

Inicializar o mapa com L.map(‘id’).

Posicionar o mapa no centro usando setView(), definindo as coordenadas geográficas (latitude, longitude) e o nível de zoom.

Adicione uma camada de ladrilhos com L.tileLayer(), usando ladrilhos gratuitos do OpenStreetMap.

O objetivo é entender como definir os parâmetros básicos para a exibição de um mapa do Leaflet.

Aqui está um exemplo simples de como inicializar um mapa do Leaflet e adicionar um marcador:

exemple_leaflet.html

<!DOCTYPE html>

<html>

<head>

<title>Exemple Leaflet</title>

<style>

#map { height: 400px; }

</style>

</head>

<body>

<h3>Ma première carte avec Leaflet</h3>

var map = L.map(‘map’).setView([48.8566, 2.3522], 13); // Coordonnées de Paris

// Ajout d’une couche de tuiles

L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, {

attribution: ‘© <a href=”https://www.openstreetmap.org/copyright”>OpenStreetMap</a> contributors’

}).addTo(map);

// Ajout d’un marqueur

L.marker([48.8566, 2.3522]).addTo(map)

.bindPopup(“<b>Paris</b><br>La capitale de la France”)

.openPopup();

</script>

</body>

</html>

Esse código cria um mapa centrado em Paris, com um marcador que exibe um pop-up com texto descritivo. Os usuários podem aumentar o zoom, mover o mapa e interagir com ele.

Visualize o mapa em uma nova guia.

Slide 4: Adicionando um marcador e um pop-up

Explicação: Este slide mostra como adicionar um marcador ao mapa. O marcador representa um ponto geográfico e, depois de adicionado, um pop-up pode ser associado para exibir informações quando o usuário clicar nesse marcador. O código L.marker().addTo(map) é usado para criar um marcador e bindPopup() para associar um popup contendo uma mensagem.

Slide 5: Personalizando um marcador com um ícone

Explicação: Os marcadores no Leaflet podem ser personalizados com ícones para torná-los mais visuais e representativos. Este slide mostra como usar a classe L.icon() para criar um ícone personalizado e, em seguida, aplicá-lo ao marcador por meio da opção de ícone. Isso permite personalizar a aparência do marcador de acordo com o contexto do aplicativo (por exemplo, um marcador que representa um posto de gasolina ou um hotel com ícones específicos).

Slide 6: Adicionando vários marcadores a um mapa

Explicação: Quando vários pontos de interesse precisam ser adicionados ao mapa, este slide explica como proceder. Você pode criar vários marcadores, cada um com coordenadas específicas, e depois adicioná-los ao mapa. Um código de exemplo mostra como criar uma matriz de coordenadas e, em seguida, usar o loop forEach() para adicionar os marcadores ao mapa. Isso permite que centenas ou milhares de pontos sejam adicionados sem nenhuma sobrecarga de código.

Slide 7: Estrutura básica de uma página de folheto

Resumo dos principais elementos:

Um <div id="map"> para conter o mapa.

CSS obrigatório para definir o tamanho do contêiner.

Os links para os arquivos do folheto (CSS + JS).

Um script JavaScript para :
- criar o mapa,
- adicionar um mapa de fundo,
- possivelmente adicionar camadas, marcadores, pop-ups, etc.

<!DOCTYPE html>
<html>
<head>

<title>Ma première carte Leaflet</title>

<style>       
Définition de la carte
</style>
</head>
<body>   
<h1>Carte interactive avec Leaflet</h1>

… Les éléments de la carte
</script>
</body>
</html>

Exercício prático

Exercício – Sessão 1: Meu primeiro mapa interativo

Objetivo:
Criar um mapa interativo centrado em sua cidade, com três pontos de interesse de sua escolha (locais turísticos, locais pessoais etc.).

Etapas a seguir :

Criar um arquivo index.html
Esse arquivo conterá o código do seu mapa.

Adicionar recursos do Leaflet
Na tag HEAD, cole este código para carregar a biblioteca do Leaflet:

Prepare uma área de exibição para o mapa
No BODY , adicione uma div com um identificador de mapa e dê a ela uma altura em uma tag ou diretamente no CSS :

Inicializar o mapa
Em uma tag <script>

var map = L.map(‘map’).setView([48.8566, 2.3522], 13);// Crie um mapa centrado em sua cidade (Paris, por exemplo)
L.tileLayer(‘https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png’, { attribution: ‘© OpenStreetMap contributors’ }).addTo(map);// Adicione uma camada de fundo (OpenStreetMap)

Adicione 3 marcadores personalizados
Coloque três pontos em seu mapa com bolhas de informações:

L.marker([48.8584, 2.2945]).addTo(map).bindPopup(“Tour Eiffel”);

L.marker([48.8606, 2.3376]).addTo(map).bindPopup(“Louvre”);

L.marker([48.8738, 2.2950]).addTo(map).bindPopup(“Arc de Triomphe”);

Bônus :

Adicione uma interação para exibir coordenadas quando o mapa for clicado:

map.on(‘click’, function(e) {

alert(“Coordonnées : ” + e.latlng);

});

Resultado esperado:

Um mapa é exibido no centro do navegador, com zoom em sua cidade, com três marcadores. Clicar em cada marcador abre uma dica de ferramenta. Clicar em qualquer lugar do mapa exibe as coordenadas do ponto.

Veja o resultado para Paris em uma nova guia

Veja o resultado para a Ilha Rodrigues em uma nova guia.

<-Programa e método

->Sessão 2: Camadas e interatividade

Si cet article vous a intéressé et que vous pensez qu'il pourrait bénéficier à d'autres personnes, n'hésitez pas à le partager sur vos réseaux sociaux en utilisant les boutons ci-dessous. Votre partage est apprécié !