Tutorial Leaflet: sessão 5

23 maio 202511 maio 2025 Atilio Francois No Comments

Loading…

Taking too long?

Reload document

Open in new tab

Contenu

Slide 1: Principais eventos no Leaflet

No Leaflet, os eventos desempenham um papel fundamental para tornar os mapas interativos e responsivos. O Leaflet pode lidar com uma ampla gama de eventos que ocorrem no mapa, nas camadas ou em objetos específicos (como marcadores ou polígonos). Esses eventos reagem às ações do usuário, como cliques, movimentos do mouse, zooms, alterações de visualização e assim por diante. Aqui está uma visão geral dos principais eventos do Leaflet, usados para adicionar interatividade aos seus mapas.

click’ – clique em um elemento ou no mapa

mouseover’ / ‘mouseout’ – passar o mouse por cima

moveend’, ‘zoomend’ – fim de um movimento ou zoom

Slide 2: Eventos do mapa

Os eventos do mapa (ou eventos globais) dizem respeito a todo o mapa e são frequentemente usados para capturar ações como mudanças de visualização, zoom ou interações com o mapa.

a. zoom e zoomend

-Zoom: esse evento é acionado sempre que o nível de zoom do mapa é alterado, seja manual ou programaticamente.

-zoom out: Esse evento é acionado quando o zoom é totalmente concluído.

b. mover e moverend

-move: esse evento é acionado sempre que o mapa é movido (quando a visualização do mapa muda).

-moveend : Esse evento é acionado quando a movimentação do mapa é concluída.

c. clique

-click: esse evento é acionado quando o usuário clica no mapa (em qualquer área do mapa).

d. dblclick

-d. dblclick -dblclick: esse evento é acionado quando o usuário clica duas vezes no mapa. Ele pode ser usado para aumentar o zoom, por exemplo.

Slide 3: Eventos de camada

Os eventos específicos da camada são usados para capturar interações com elementos como marcadores, polígonos ou círculos.

a. adicionar e remover

-add: esse evento é acionado quando uma camada é adicionada ao mapa.

-remove: esse evento é acionado quando uma camada é removida do mapa.

b. clicar em uma camada

-click: quando um usuário clica em um elemento específico da camada, como um marcador, polígono ou círculo, esse evento é acionado.

c. Passar o mouse e sair do mouse

-mouseover: esse evento é acionado quando o usuário passa o mouse sobre um elemento (como um marcador, polígono ou linha).

-mouseout: esse evento é acionado quando o usuário sai de um elemento com o mouse.

d. arrastar e arrastar

-drag: esse evento é acionado quando o usuário arrasta um elemento (como um marcador) pelo mapa.

-dragend : Esse evento é acionado quando um elemento que foi arrastado pára.

Slide 4: Eventos de geometria (para objetos de dados geoespaciais)

Os eventos vinculados a objetos geoespaciais, como polígonos, linhas e círculos, capturam ações como desenhar, modificar ou excluir geometria.

a. criar (para desenhos)

criar: esse evento é acionado depois que um usuário cria uma nova geometria, por exemplo, um polígono ou círculo, usando uma ferramenta de desenho.

Exemplo :

var drawnItems = new L.FeatureGroup();

map.addLayer(drawnItems);

var drawControl = new L.Control.Draw({

  edit: { featureGroup: drawnItems }

});

map.addControl(drawControl);

map.on('draw:created', function(e) {

  console.log("Une nouvelle géométrie a été créée : ", e.layer);

  drawnItems.addLayer(e.layer);

});

b. edit (para modificar a geometria)

edit: esse evento é acionado quando o usuário modifica a geometria existente (como um polígono ou uma linha).

Exemplo:

map.on('draw:edited', function(e) {

  console.log("Les géométries ont été modifiées : ", e.layers);

});

Slide 5 : Anexar um evento a um marcador no Leaflet

No Leaflet, os marcadores são objetos geográficos interativos que você pode colocar no mapa. É possível anexar facilmente eventos a esses marcadores para capturar ações do usuário, como clicar, passar o mouse ou mover.

Veja a seguir como anexar eventos comuns a um marcador:

1.Criação de um marcador

Antes de anexar eventos, você precisa primeiro criar um marcador. Isso é feito usando a função L.marker(), especificando as coordenadas geográficas onde você deseja colocá-lo no mapa.

Exemplo:

var map = L.map('map').setView([48.8566, 2.3522], 13); // Positionner la carte sur Paris

// Créer un marqueur sur Paris

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

2.Anexar um evento de clique

O evento de clique é um dos eventos mais comuns anexados aos marcadores. Ele é acionado sempre que um usuário clica em um marcador. Você pode usar esse evento para exibir um pop-up, registrar uma ação ou acionar uma função específica.

Exemplo:

marker.on('click', function() {

  console.log('Vous avez cliqué sur le marqueur.');

  marker.bindPopup('C\'est un marqueur à Paris !').openPopup(); // Afficher un popup

});

Explicação :

on(‘click’, …): Vincula um evento de clique ao marcador.

bindPopup(‘…’): Adiciona um pop-up ao marcador.

openPopup() : Abre o popup quando o clique é detectado.

Slide 6 : Anexar um evento de mouseover e mouseout

Os eventos mouseover e mouseout são acionados quando o mouse passa sobre o marcador e quando o mouse sai do marcador, respectivamente. Esses eventos são freqüentemente usados para criar efeitos visuais interativos, como a alteração da cor ou do tamanho do marcador.

Exemplo:e :

marker.on('mouseover', function() {

  console.log('La souris est sur le marqueur.');

  marker.setIcon(L.icon({

    iconUrl: 'path/to/hover-icon.png',

    iconSize: [32, 32],

  })); // Modifier l'icône du marqueur au survol

});

marker.on('mouseout', function() {

  console.log('La souris a quitté le marqueur.');

  marker.setIcon(L.icon({

    iconUrl: 'path/to/default-icon.png',

    iconSize: [32, 32],

  })); // Restaurer l'icône par défaut

});

Explicação :

setIcon(): Altera o ícone do marcador.

O ícone é alterado ao passar o mouse e restaurado quando o marcador é deixado.

Slide 7 : Anexar um evento de arrastar e arrastar (para um marcador arrastável)

Você pode tornar um marcador arrastável e anexar eventos ao movimento do marcador. O evento de arrastar é acionado enquanto o marcador está sendo movido e o evento de arrastar é acionado quando o movimento é concluído.

Exemplo:

marker.dragging.enable(); // Activer le déplacement du marqueur

marker.on('drag', function() {

  console.log('Le marqueur est en train d\'être déplacé.');

});

marker.on('dragend', function() {

  console.log('Le marqueur a été déplacé.');

  console.log('Nouvelle position : ' + marker.getLatLng()); // Affiche les nouvelles coordonnées

});

Explicação:

dragging.enable(): Permite que o marcador seja arrastado.

getLatLng(): Recupera as novas coordenadas do marcador após ele ter sido movido.

Slide 8 : Anexar um evento de menu de contexto (clique com o botão direito do mouse)

O evento de menu de contexto é acionado quando um marcador é clicado com o botão direito do mouse. Isso pode ser útil para exibir um menu de contexto ou executar uma ação específica quando o usuário clica com o botão direito do mouse.

Exemplo:

marker.on('contextmenu', function(e) {

  console.log('Clic droit détecté sur le marqueur.');

  alert('Clic droit effectué à : ' + e.latlng); // Affiche un message avec les coordonnées du clic

});

Explicação:

e.latlng: contém as coordenadas onde ocorreu o clique com o botão direito do mouse.

Slide 9 : Anexar um evento dblclick (clique duplo)

O evento dblclick é acionado quando um usuário clica duas vezes em um marcador. Você pode usá-lo para executar ações específicas em um clique duplo, como aumentar o zoom no mapa ou alterar as propriedades do marcador.

Exemplo:

marker.on('dblclick', function() {

  console.log('Double-clic sur le marqueur détecté.');

  map.setView(marker.getLatLng(), 16); // Zoomer sur le marqueur après un double-clic

});

Explicação :

map.setView(): Altera a visualização do mapa para centralizá-lo no marcador e aumentar o zoom.

Slide 10: Anexar um evento dragstart (no início de um movimento)

O evento dragstart é acionado logo no início do movimento de um marcador, o que pode ser útil para animações ou ajustes antes de o marcador ser movido.

Exemplo

marker.on('dragstart', function() {

  console.log('Le déplacement du marqueur a commencé.');

});

Slide 11 : Clique no mapa → exibir coordenadas

Você pode exibir as coordenadas onde o usuário clica. Isso é muito útil para localizar um ponto.

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

alert(“Vous avez cliqué à :\nLatitude : ” + e.latlng.lat.toFixed(5) +

“\nLongitude : ” + e.latlng.lng.toFixed(5));

});

Ou, melhor ainda, para colocar um marcador no local.

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

L.marker(e.latlng).addTo(map)

.bindPopup(“Nouveau point :<br>” + e.latlng.toString())

.openPopup();});

Slide 12 : Formulário pop-up interativo (adicionar um comentário)

Você pode exibir um formulário em um pop-up para que o usuário possa inserir informações.

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

var popup = L.popup()

.setLatLng(e.latlng)

.setContent(‘<b>Ajouter un commentaire :</b><br><input type=”text«

id=”inputComment” /><br><button onclick=”saveComment()”>Envoyer</button>’)
.openOn(map);

window.saveComment = function() {

var text = document.getElementById(“inputComment”).value;

alert(“Commentaire enregistré : ” + text);

map.closePopup(); };});

Slide 13: Detecção de zoom ou movimento

Muito útil para atualizar dinamicamente os dados visíveis (por exemplo, carregar dados de acordo com a zona).

map.on(‘moveend zoomend’, function() {

console.log(“Vue actuelle :”, map.getBounds()); console.log(“Niveau de zoom :”, map.getZoom());});

Slide 14: Atualizar um elemento ao passar o mouse

É possível alterar dinamicamente o estilo de um objeto (GeoJSON, polígono, etc.) ao passar o mouse sobre ele.

L.geoJSON(zone, {

style: { color: “green”, weight: 2 },

onEachFeature: function (feature, layer) {

layer.on({

mouseover: function(e) {

e.target.setStyle({ color: “red” });

mouseout: function(e) {

e.target.setStyle({ color: “green” });

}

});

}}).addTo(map);

Slide 15: Modificação dinâmica de um objeto no Leaflet

Modificar dinamicamente um objeto significa alterar suas propriedades ou aparência em resposta a uma ação do usuário (clicar, passar o mouse, aplicar zoom etc.). Isso torna os mapas interativos, intuitivos e mais fáceis de ler.

Por que modificar dinamicamente um objeto?

Reagindo às ações do usuário
Por exemplo, quando o usuário passa o mouse sobre uma área, você pode :
- alterar a cor do polígono,
- exibir uma dica de ferramenta temporária,
- ampliar um marcador.

Atualizar o conteúdo ou o estilo em tempo real
Você pode :
- atualizar os dados em um pop-up (por exemplo, temperatura ao vivo),
- alterar o ícone de um marcador de acordo com um evento (alerta, clima, etc.),
- adaptar o estilo de um gráfico de acordo com um zoom.

Melhore a legibilidade e a experiência do usuário
Um objeto que muda visualmente chama a atenção:
- elementos importantes,
- para possíveis interações.

Exemplos de modificações dinâmicas

// Survol : changer le style d’un polygone
layer.on('mouseover', function () {
  this.setStyle({
    fillColor: 'yellow',
    color: 'orange'
  });
});

// Clic : changer l’icône d’un marqueur
marker.on('click', function () {
  this.setIcon(newIcon);
});

// Double clic : modifier un texte de popup
marker.on('dblclick', function () {
  this.bindPopup("Texte mis à jour").openPopup();
});

Coisas para lembrar

A modificação dinâmica de um objeto dá vida ao mapa: ele responde, informa e orienta. Ele transforma um simples mapa de fundo em uma interface verdadeiramente interativa.

Slide 16: Modificação dinâmica de um objeto ao longo do tempo

No Leaflet, é possível modificar objetos automaticamente, sem interação com o usuário, usando o tempo como um gatilho.

Isso torna possível :

animar visualmente um mapa

chamar a atenção para um elemento

representar uma mudança (por exemplo, uma simulação ou um movimento).

Por que alterar um objeto ao longo do tempo?

Para indicar uma zona de alerta ou perigo (piscando, mudança de cor)

Para mostrar uma mudança ao longo do tempo (por exemplo, movimento de um veículo, mudança de temperatura)

Criar efeitos visuais para aprimorar a interface (pulsação, ícones alternados)

Exemplo: um polígono piscante

A cor se alterna a cada 500 milissegundos.
let isRed = true;

setInterval(() => {
  polygon.setStyle({
    color: isRed ? 'red' : 'orange',
    fillColor: isRed ? 'red' : 'orange'
  });
  isRed = !isRed;
}, 500);
Exemplo: mover um marcador a cada segundo
let lat = -19.7, lng = 63.4;
const marker = L.marker([lat, lng]).addTo(map);

setInterval(() => {
  lat += 0.0005;
  marker.setLatLng([lat, lng]);
}, 1000);
Coisas para lembrar

Com JavaScript puro, o Leaflet pode dar vida ao mapa mesmo sem interação. Isso lhe dá uma dimensão dinâmica.

Slide 17: Modificar dinamicamente um objeto por meio de uma seleção do usuário

Em um aplicativo de mapeamento interativo, muitas vezes é útil permitir que o usuário modifique a aparência dos objetos exibidos no mapa. O Leaflet, combinado com HTML e JavaScript, facilita esse tipo de interação.

Objetivo

Permitir que o usuário personalize a exibição de um objeto (por exemplo, um polígono) de acordo com um valor escolhido em uma interface HTML (por exemplo, menu suspenso). Isso melhora :

Acessibilidade e compreensão dos dados

A interatividade do mapa

Experiência do usuário (UX)

Caso de uso: Escolher a cor de um polígono

Um polígono é exibido no mapa, representando, por exemplo, uma área protegida. Um menu HTML permite que o usuário escolha uma cor. Quando uma nova cor é selecionada, o estilo do polígono é atualizado dinamicamente.

Exemplo de código (extrato simplificado)

<select id="colorSelect">
  <option value="blue">Bleu</option>
  <option value="green">Vert</option>
  <option value="red">Rouge</option>
</select>

<div id="map" style="height: 400px;"></div>

<script>
  const map = L.map('map').setView([48.85, 2.35], 12); // Exemple : Paris

  L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png').addTo(map);

  // Exemple de polygone
  const polygon = L.polygon([
    [48.85, 2.35],
    [48.86, 2.36],
    [48.85, 2.37]
  ], {
    color: 'blue'
  }).addTo(map);

  // Mise à jour du style selon la sélection
  document.getElementById('colorSelect').addEventListener('change', (e) => {
    const newColor = e.target.value;
    polygon.setStyle({ color: newColor });
  });
</script>

Para lembrar

O evento de alteração no menu <select> é acionado sempre que uma alteração é feita.

La méthode .setStyle() de Leaflet permet de changer dynamiquement le style d’un polygone, d’une ligne ou d’un cercle.

Ce principe peut être étendu à d’autres styles : épaisseur (weight), opacité (opacity), remplissage (fillColor), etc.

Conclusão

Anexar eventos a marcadores no Leaflet é essencial para adicionar interatividade ao mapa. Eventos como clicar, passar o mouse, arrastar e menu de contexto permitem que você reaja às ações do usuário e altere dinamicamente o estado ou o conteúdo do seu mapa. O uso de eventos em marcadores torna o mapa mais dinâmico e permite que você crie experiências de usuário mais envolventes e personalizadas.

Exercício prático – Criação de um mapa turístico interativo

Objetivo

Criar um mapa interativo de um destino turístico (cidade, parque, trilha, etc.) em que :

os pontos de interesse são exibidos com informações quando clicados,

a cor de um polígono muda ao passar o mouse,

um pop-up móvel exibe as coordenadas do clique no mapa,

um contador de cliques é exibido no canto superior esquerdo,

Um botão para redefinir o mapa.

Elementos fornecidos

Você encontrará esses elementos no diretório …\leaflet_starter_kit\data

Um arquivo points.geojson contendo 3-4 POIs com propriedades de nome e descrição

Um polígono representando uma área (zone.geojson)

Instruções

Exiba o mapa centrado na área de interesse no nível de zoom apropriado.

Adicione pontos de interesse (points.geojson):
- Exibir um ícone personalizado para os marcadores
- Adicionar um pop-up ao clicar contendo o nome e a descrição
- Alterar o ícone de foco (mouseover / mouseout)

Exibir uma zona (zone.geojson):
- Aplicar um estilo básico
- Alterar a cor de fundo ao passar o mouse
- Restaurar o estilo original quando o mouse sair da zona

Adicionar um evento ao mapa inteiro:
- Quando o usuário clica no mapa, um pop-up móvel é aberto no local do clique com coordenadas lat/lon
- Um contador de cliques é exibido em uma div (#counter) e atualizado a cada clique

Adiciona um botão “Reset”:
- Redefine o mapa para seu estado inicial (visualização e contador)

Bônus (opcional)

Exibe um mini-mapa ou escala

Adiciona uma dica de ferramenta fixa com instruções

Aviso: Se você não conseguir ver as camadas geojson em seu mapa

Diagnóstico: você abriu o arquivo HTML diretamente do disco (file://)

Quando você faz isso, o navegador geralmente bloqueia as solicitações fetch(‘rando1.geojson’) por motivos de segurança.

Solução simples: use um pequeno servidor local

Veja como fazer isso facilmente com Python (não é necessário programar nada):

1. Abra uma janela de terminal na pasta que contém index.html e os arquivos geojson

2. Digite (dependendo da versão do Python) :

# Se Python 3

python -m http.server 8000

3. Abra seu navegador e vá para :

http://localhost:8000

O carregamento com fetch() agora funcionará sem problemas!

Veja a solução em uma nova guia

(Recomendamos que você faça o exercício por conta própria antes de consultar as respostas).

<-Sessão 4 : Camadas e interatividade

->Sessão 6 : Mini-projeto

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é !