Sessão 4: Personalização e controlo no Leaflet

Objetivo: melhorar a experiência do utilizador (UX) e personalizar o aspeto dos mapas interactivos.

Diapo 1: Personalizar os marcadores

Personalizar os marcadores

1. Introdução: Porquê personalizar os marcadores?

Por defeito, o Leaflet utiliza um ícone azul padrão para os marcadores. No entanto, em muitos casos, é preferível substituir este ícone por uma imagem personalizada. Isto permite que o tipo de localização ou ponto de interesse seja melhor representado no mapa.

Vantagens da personalização dos marcadores:

Categorização dos pontos: Cada tipo de ponto (restaurante, museu, hotel, ponto de emergência, etc.) pode ser associado a um ícone diferente. Por exemplo, um ícone que representa um prato para um restaurante, uma cama para um hotel, etc.

Coerência visual: É possível adaptar os ícones a uma carta gráfica ou tema específico, criando uma experiência mais estética e profissional.

Melhoria da experiência do utilizador: os ícones personalizados permitem aos utilizadores localizar rapidamente diferentes tipos de pontos de interesse no mapa. Isto torna o mapa mais intuitivo e acessível.

2. Como é que personalizo um marcador no Leaflet?

Eis um exemplo de código para personalizar um marcador com um ícone personalizado: melhorar a experiência do utilizador (UX) e personalizar o aspeto dos mapas interactivos.

// Créer une icône personnalisée
const myIcon = L.icon({
    iconUrl: 'images/restaurant.png', // URL de l'image de l'icône
    iconSize: [32, 32], // Taille de l'icône (en pixels)
    iconAnchor: [16, 32], // Point de l'icône qui correspond à la position du marqueur (le centre du marqueur ici)
    popupAnchor: [0, -32] // Position du popup par rapport au marqueur
});

// Ajouter un marqueur avec l'icône personnalisée sur la carte
L.marker([48.8566, 2.3522], { icon: myIcon })
    .addTo(map) // Ajouter à la carte
    .bindPopup("Restaurant Parisien"); // Ajouter un popup

Explicaciones de las opciones de icono:

• iconUrl: la URL o ruta relativa de la imagen que desea utilizar como icono (aquí, images/restaurant.png).
• iconSize: especifica el tamaño del icono en píxeles. Aquí, el icono es de 32×32 píxeles.
• iconAnchor: el punto del icono que corresponde a la posición del marcador. Por ejemplo, si iconAnchor: [16, 32], significa que el marcador se anclará en la parte inferior del centro del icono.
• popupAnchor: la posición de la ventana emergente en relación con el icono. En este ejemplo, el popup aparecerá 32 píxeles por encima del icono.

3. Formatos de imagen compatibles

Leaflet le permite utilizar diferentes formatos de imagen para los iconos:

• PNG, JPG: formatos de imagen estándar. Asegúrate de que la imagen sea de buena calidad para no perjudicar la legibilidad.
• SVG: este formato vectorial es especialmente útil si quieres iconos que no pierdan calidad al cambiar de tamaño.

Las imágenes deben ser accesibles desde la carpeta del proyecto o desde una URL pública.

4. Exemplos de ícones personalizados

• Ícone de um restaurante: uma imagem que representa um prato ou talheres.
• Ícone de museu: uma imagem de uma pintura ou monumento.
• Ícone de um posto de gasolina: uma imagem de uma bomba de gasolina.

Conclusão

A personalização de marcadores no Leaflet é uma ótima maneira de tornar seus mapas mais legíveis, visualmente consistentes e adaptados à experiência do usuário. Isso permite que você categorize melhor os diferentes tipos de pontos de interesse e reforça o impacto visual do mapa.

Slide 2 – Estilos personalizados para formas vetoriais

Estilos personalizados para formas vetoriais

1. Introdução: O que é uma forma vetorial?

No Leaflet, uma forma vetorial é uma característica geográfica representada no mapa usando dados geométricos. Isso inclui :

• Polilinhas: linhas desenhadas entre vários pontos (por exemplo, uma rota).
• Polígonos: formas fechadas que delimitam áreas (por exemplo, parcelas de terra, regiões).
• Círculos: uma forma especial de polígono, baseada em um raio em torno de um ponto.

Essas formas podem ser estilizadas para se adequar melhor à aparência do mapa e proporcionar uma melhor experiência ao usuário.

2. Por que personalizar estilos?

Ao personalizar os estilos das formas vetoriais, você pode :

• Améliorer la lisibilité : Des couleurs et des épaisseurs de ligne distinctes aident à mieux visualiser les données.
• Adapter l’apparence à une charte graphique : Vous pouvez définir des couleurs, des bordures et des ombres spécifiques pour que la carte corresponde au style de votre projet.
• Mettre en valeur certaines zones ou itinéraires : Par exemple, vous pouvez utiliser une couleur différente pour un itinéraire conseillé ou une zone protégée.

3. Como posso personalizar os estilos?

O Leaflet permite que você personalize os estilos de formas vetoriais usando objetos JavaScript. Aqui estão alguns exemplos de polilinhas, polígonos e círculos.

Exemplo de personalização de uma polilinha :

const polyline = L.polyline([
    [48.8566, 2.3522],  // Point de départ
    [48.8584, 2.2945],  // Point d'arrivée
], {
    color: 'blue',       // Couleur de la ligne
    weight: 4,           // Epaisseur de la ligne
    opacity: 0.7         // Opacité de la ligne
}).addTo(map);

Explicações sobre as opções de estilo:

• color: define a cor da linha (neste caso, azul).
• weight: especifica a espessura da linha (neste caso, 4 pixels).
• opacity: define a opacidade da linha (neste caso, 70%).

Exemplo de como personalizar um polígono:

const polygon = L.polygon([
    [48.8566, 2.3522], 
    [48.8584, 2.2945], 
    [48.8600, 2.2920]
], {
    color: 'green',      // Couleur du contour
    fillColor: 'lightgreen',  // Couleur de remplissage
    fillOpacity: 0.5,    // Opacité du remplissage
    weight: 3            // Epaisseur du contour
}).addTo(map);

Explicações das opções de estilo:

• color: cor do contorno (neste caso, verde).
• fillColor: cor de preenchimento dentro do polígono (neste caso, verde claro).
• fillOpacity: opacidade de preenchimento (neste caso, 50%).
• weight: espessura do contorno (neste caso, 3 pixels).

Exemplo de personalização de um círculo:

const circle = L.circle([48.8566, 2.3522], {
    radius: 500,        // Rayon du cercle en mètres
    color: 'red',       // Couleur du contour
    fillColor: 'red',   // Couleur de remplissage
    fillOpacity: 0.2,   // Opacité du remplissage
    weight: 2           // Epaisseur du contour
}).addTo(map);

Explicações das opções de estilo:

• radius: define o raio do círculo (neste caso, 500 metros).
• color: cor do contorno (neste caso, vermelho).
• fillColor: cor do preenchimento (neste caso, vermelho claro).
• fillOpacity: opacidade do preenchimento (neste caso, 20%).
• weight: espessura do contorno (neste caso, 2 pixels).

Atualizações dinâmicas de estilo

Também é possível modificar dinamicamente os estilos de uma forma após ela ter sido adicionada ao mapa. Por exemplo, para alterar a cor de um polígono ao passar o mouse:forme après qu’elle a été ajoutée à la carte. Par exemple, pour changer la couleur d’un polygone au survol de la souris :

polygon.on('mouseover', function () {
    this.setStyle({
        color: 'orange',   // Nouvelle couleur du contour
        fillColor: 'yellow', // Nouvelle couleur de remplissage
    });
});
polygon.on('mouseout', function () {
    this.setStyle({
        color: 'green',    // Couleur de contour d'origine
        fillColor: 'lightgreen', // Couleur de remplissage d'origine
    });
});

5.Estilo condicional

Os estilos também podem ser definidos dinamicamente como uma função dos dados. Por exemplo, você pode colorir um polígono de acordo com sua população ou tipo:

const getStyle = (feature) => {
    return {
        color: feature.properties.type === 'parc' ? 'green' : 'blue',
        fillColor: feature.properties.type === 'parc' ? 'lightgreen' : 'lightblue',
        weight: 2
    };
};

L.geoJSON(data, { style: getStyle }).addTo(map);

Neste exemplo, os polígonos que representam os parques terão contorno e preenchimento verdes, enquanto os outros serão azuis.

Conclusão

A personalização dos estilos das formas vetoriais no Leaflet pode tornar os mapas mais informativos, visualmente atraentes e adaptados às necessidades específicas do seu projeto. Você pode ajustar parâmetros como cor, espessura e opacidade para adaptar as formas às suas preferências ou à carta gráfica do projeto. É possível até mesmo adicionar interações dinâmicas para aprimorar ainda mais a experiência do usuário.

Slide 3: Controles adicionais para aprimorar a interface

Controles adicionais para aprimorar a interface

1. Introdução: Por que adicionar controles adicionais?

O Leaflet oferece uma ampla gama de controles integrados para melhorar a legibilidade e a navegação do mapa. Esses controles tornam a interface mais interativa e prática, proporcionando uma melhor experiência ao usuário. Entre esses controles, a adição de uma escala, um minimapa e a personalização da atribuição são elementos usados com frequência para melhorar a compreensão do mapa e sua aparência profissional.

2. Adicionar uma escala

Um controle de escala exibe uma escala gráfica no mapa, permitindo que os usuários vejam a distância real correspondente a uma parte do mapa, levando em conta o nível de zoom.

Código para adicionar a escala :

L.control.scale().addTo(map);

Recurso:

• A escala se ajusta automaticamente de acordo com o nível de zoom do mapa. Por exemplo, quando você aumenta o zoom em uma área menor, a escala exibirá uma unidade de medida mais precisa (por exemplo, 100 metros em vez de 10 km).
• Ela pode exibir unidades métricas (metros, quilômetros) ou imperiais (pés, milhas), dependendo das preferências do usuário ou do mapa.

Benefícios:

• Precisão: os usuários podem ver rapidamente a distância real entre dois pontos.
• Acessibilidade: melhora a experiência de navegação para quem não está familiarizado com o mapa.

3. Adicione um mini-mapa

Um mini-mapa é uma versão reduzida do mapa principal que fornece uma visão geral rápida do contexto geográfico, permitindo que os usuários se orientem facilmente na área.

Código para adicionar o mini-mapa :

const miniMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');
const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,  // Permet de basculer la mini-carte
    minimized: false      // Définit si la mini-carte est minimisée au départ
}).addTo(map);

Recurso:

• O mini-mapa geralmente é colocado em um canto do mapa principal (geralmente no canto superior esquerdo ou direito).
• Ele mostra uma visão geral do mapa em uma escala maior, permitindo que os usuários se situem melhor em relação à área mais ampla.
• Opção de alternância: os usuários podem optar por ocultar ou mostrar o minimapa a qualquer momento.

Benefícios:

• Visão geral: oferece uma perspectiva global do mapa e permite que os usuários aumentem o zoom e se concentrem em áreas específicas.
• Acessibilidade: ajuda os usuários a manter uma visão geral sem perder sua posição no mapa principal.

Observação importante: A adição de um minimapa requer a instalação do plug-in Leaflet MiniMap, que veremos no próximo slide.

4. Personalize a atribuição

A atribuição indica a fonte dos dados usados para exibir o mapa e é importante para a conformidade com as licenças de dados (por exemplo, OpenStreetMap). O Leaflet fornece um controle de atribuição padrão, mas ele pode ser personalizado para exibir informações específicas.

Código para personalizar a atribuição :

map.attributionControl.setPrefix('');  // Retire le texte par défaut
map.attributionControl.addAttribution('Carte personnalisée © 2025');  // Ajoute une attribution personnalisée

Recurso:

• Você pode modificar ou acrescentar informações adicionais de atribuição, por exemplo, uma referência ao seu próprio mapa ou a uma fonte de dados específica.
• Esse recurso é útil para estar em conformidade com as licenças dos dados usados (como as do OpenStreetMap) ou para adicionar uma atribuição personalizada (por exemplo, “Mapa feito por [Seu nome]”).

Benefícios:

• Conformidade com a licença: Garante a conformidade com direitos autorais e licenças de dados, como as do OpenStreetMap.
• Personalização: permite que você adicione um elemento de personalização ou reconhecimento para os criadores do mapa.

5. Resumo dos controles adicionais

• Scale (Escala): Exibe uma escala dinâmica para medir distâncias.
• Mini-mapa: Exibe uma visão geral em um canto do mapa principal para ajudá-lo a se orientar.
• Atribuição: Personalize a atribuição para respeitar as licenças de dados ou adicionar informações específicas.

Conclusão

O acréscimo de um controle de escala, um mini-mapa e a atribuição personalizada são pequenos aprimoramentos que tornam a interface mais profissional, informativa e acessível. Esses controles são fáceis de implementar com o Leaflet e seu uso melhora muito a experiência do usuário, tornando o mapa mais intuitivo e compatível com as práticas recomendadas. Essas ferramentas também ajudam a cumprir as licenças dos dados geoespaciais usados e proporcionam uma navegação mais suave.

Slide 4 : Instalação e uso do plugin Leaflet MiniMap

Instalação e uso do plugin Leaflet MiniMap

1. Introdução : O que é um minimapa?

Um minimapa é uma versão reduzida e geralmente interativa do mapa principal, que permite ao usuário manter uma visão geral da área geográfica enquanto navega no mapa principal. Geralmente, ele é colocado em um canto do mapa principal, permitindo que os usuários vejam sua posição em relação ao mapa inteiro e se movimentem com mais facilidade.

Os minimapas são particularmente úteis em aplicativos em que é necessário visualizar uma grande área e, ao mesmo tempo, poder ampliar os detalhes locais. Eles são usados com frequência em mapas de navegação, mapas de rotas ou mapas temáticos.

2. Por que usar o Leaflet MiniMap?

Embora o Leaflet não forneça um minimapa como padrão, você pode adicionar facilmente essa funcionalidade usando o plug-in Leaflet MiniMap. Esse plug-in permite adicionar um pequeno mapa interativo em um canto do mapa principal, oferecendo a opção de aumentar e diminuir o zoom.

Benefícios do mini-mapa:

• Visão geral: permite que os usuários encontrem facilmente o caminho para toda a área.
• Navegação aprimorada: os usuários podem ver rapidamente a área em que estão sem perder sua posição no mapa principal.
• Interface clara: o minimapa oferece uma visualização compacta que não interfere na exibição do mapa principal.

3 Instalação do plugin Leaflet MiniMap

Antes de poder usar o plugin Leaflet MiniMap, você precisa instalá-lo em seu projeto. Se você ainda não incluiu o plug-in, veja como fazer isso.

Adicionar o arquivo JavaScript do plug-in: você pode incluir o plug-in MiniMap adicionando o arquivo JavaScript correspondente ao seu projeto. Esta é a linha que você precisa adicionar ao seu arquivo HTML para carregar o plug-in de um CDN:

<script src=”https://unpkg.com/leaflet-minimap@3.0.0/leaflet-minimap.min.js”></script>

Adicionar o arquivo CSS do plug-in: o plug-in também requer um arquivo CSS para que os estilos do mini-mapa sejam exibidos corretamente. Adicione esta linha à sua tag <head>:

<link rel=”stylesheet” href=”https://unpkg.com/leaflet-minimap@3.0.0/leaflet-minimap.css” />

4. Uso do plugin Leaflet MiniMap

Depois que o plugin for instalado, você poderá adicioná-lo facilmente ao seu mapa do Leaflet. O código a seguir mostra como integrar o mini-mapa em seu projeto:

Exemplo de código para adicionar um mini-mapa :

// Définir la couche de la mini-carte (vous pouvez utiliser n'importe quelle carte de base)
const miniMapLayer = L.tileLayer('https://{s}.tile.openstreetmap.org/{z}/{x}/{y}.png');

// Créer un contrôle de mini-carte
const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,  // Permet d'afficher/masquer la mini-carte
    minimized: false      // Si la mini-carte est affichée de manière réduite au début
}).addTo(map);

Explicação do código:

• L.tileLayer: Usamos uma camada de ladrilhos como plano de fundo para o mini-mapa. Estamos usando o OpenStreetMap aqui, mas você também pode usar outros serviços de blocos.
• L.Control.MiniMap: Esse controle adiciona o minimapa ao mapa principal.

  • toggleDisplay: Essa opção permite que o usuário alterne entre exibir ou ocultar o minimapa usando um botão.
  • minimized: Determina se o minimapa é minimizado ou totalmente exibido quando o mapa é carregado.

5. Personalize o mini-mapa

O plug-in Leaflet MiniMap oferece várias opções de personalização para atender às suas necessidades específicas. Veja a seguir algumas das opções disponíveis:

• Posicionamento: Você pode escolher onde exibir o mini-mapa (por exemplo, canto superior direito, canto inferior esquerdo etc.). Por padrão, ele fica no canto superior direito, mas você pode ajustar sua posição usando a opção de posição.
• Zoom: Você também pode definir o nível de zoom do mini-mapa com a opção zoomLevel se quiser que o mini-mapa exiba um zoom diferente do mapa principal.
• Dimensões: Por padrão, o minimapa tem um tamanho fixo, mas você pode ajustar o tamanho para atender às suas necessidades.

Aqui está um exemplo de personalização:

const miniMap = new L.Control.MiniMap(miniMapLayer, {
    toggleDisplay: true,
    minimized: false,
    position: 'bottomright',   // Placer la mini-carte en bas à droite
    zoomLevel: 6,              // Niveau de zoom de la mini-carte
    width: 150,                // Largeur de la mini-carte
    height: 150                // Hauteur de la mini-carte
}).addTo(map);

6. Conclusão: A importância do mini-mapa

Adicionar um mini-mapa ao seu projeto de folheto melhora a interação e a navegação no mapa. Ele permite que os usuários encontrem o caminho e tenham uma visão geral da área, mantendo o foco na área local do mapa principal. Com o plug-in Leaflet MiniMap, a integração dessa funcionalidade é rápida e fácil e ainda oferece muitas opções de personalização para atender às suas necessidades.

Resumo

• Mini-map: exibe uma versão menor e interativa do mapa principal para uma visão geral rápida.
• Instalação: carregue o plug-in JavaScript e CSS em seu projeto.
• Personalização: escolha a posição, o zoom e o tamanho do mini-mapa de acordo com suas preferências.
• Experiência do usuário aprimorada: o mini-mapa melhora a experiência do usuário, tornando a navegação mais suave e a localização espacial mais fácil.

Esse plug-in é uma ótima maneira de adicionar usabilidade aos seus mapas do Leaflet e, ao mesmo tempo, oferecer aos usuários uma ferramenta prática para navegar e encontrar o caminho em grandes áreas.

Slide 5: Controles de zoom e botões personalizados

1. Introdução: A importância dos controles de zoom

Os controles de zoom permitem que o usuário ajuste a escala do mapa para explorar com mais detalhes ou obter uma visão geral. Por padrão, o Leaflet fornece um controle de zoom no canto superior direito do mapa. No entanto, é possível personalizar a aparência e a funcionalidade desses controles para melhor atender às necessidades de um projeto.

Além dos botões de zoom padrão, você também pode adicionar botões personalizados para executar ações específicas no mapa, como centralizar o mapa em um determinado local, ativar um modo de desenho ou aumentar automaticamente o zoom em uma área de interesse.

2. Controle de zoom padrão

O controle de zoom padrão é simples e prático. Ele oferece botões “mais” e “menos” para aumentar e diminuir o zoom e um botão de redefinição para retornar ao nível de zoom padrão. O Leaflet o adiciona automaticamente quando o mapa é criado, mas você pode configurá-lo como quiser.

Código para adicionar o controle de zoom padrão :

const map = L.map('map', {
    zoomControl: true // Active le contrôle de zoom par défaut
}).setView([48.8566, 2.3522], 13);  // Exemple avec Paris

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

Funcionalidade:

• Zoom in/out: permite que você altere a escala do mapa para explorar mais ou menos detalhes.
• Redefinir: permite que você retorne ao nível de zoom padrão inicial.

Personalizar:

Você pode posicionar o controle de zoom em outra parte do mapa ou até mesmo removê-lo se não for necessário.

3. Personalizar os botões de zoom

Por padrão, o Leaflet oferece um layout padrão para os botões de zoom (canto superior direito). No entanto, você pode modificar facilmente a aparência, a posição ou até mesmo os próprios botões para que eles correspondam melhor à interface do seu projeto.

Código para mover o controle de zoom :

L.control.zoom({
    position: 'bottomleft' // Place le contrôle de zoom en bas à gauche
}).addTo(map);

Opções disponíveis:

• position: É possível mover o controle de zoom para os cantos do mapa, como superior direito, superior esquerdo, inferior esquerdo ou inferior direito.
• zoomInText e zoomOutText: Personalize o texto dos botões (por exemplo, use ícones em vez de texto).

4. Adicionar botões personalizados

Além dos controles de zoom, o Leaflet permite adicionar botões personalizados para adicionar funcionalidades específicas ao mapa, como centralizar novamente o mapa em um local, alterar camadas ou iniciar um modo de desenho.

Exemplo de um botão personalizado para centralizar o mapa:

L.control.custom({
    position: 'topright',
    content: '<button>Recentrer</button>',
    onclick: function() {
        map.setView([48.8566, 2.3522], 13);  // Centrer sur Paris
    }
}).addTo(map);

Recurso:

• Você pode definir um botão com texto, uma imagem ou até mesmo um ícone (por exemplo, um botão com um logotipo personalizado).
• Quando um usuário clica nesse botão, você pode associar uma ação específica, como recentrar o mapa, alterar o nível de zoom ou fazer alterações no mapa.

Exemplo de um botão para ativar um modo de desenho:

Você pode adicionar um botão para ativar o modo de desenho ou edição no mapa, por exemplo, com o Leaflet.draw, um plug-in para desenhar formas (polígonos, polilinhas etc.).

const drawControl = new L.Control.Draw({
    draw: {
        polygon: true, // Permet de dessiner des polygones
        polyline: true  // Permet de dessiner des polylignes
    }
});
map.addControl(drawControl);

// Bouton personnalisé pour activer le mode de dessin
L.control.custom({
    position: 'topright',
    content: '<button>Dessiner</button>',
    onclick: function() {
        map.addControl(drawControl);  // Ajoute les outils de dessin à la carte
    }
}).addTo(map);

Benefícios dos botões personalizados:

• Flexibilidade: você pode associar qualquer ação a um botão, como exibir uma mensagem, alterar camadas ou interagir com o mapa de uma forma exclusiva.
• Acessibilidade: melhora a usabilidade ao fornecer funcionalidade adicional sem sobrecarregar a interface do mapa.

5. Combine zoom e botões personalizados

É possível combinar facilmente os controles de zoom padrão com botões personalizados para proporcionar uma interface mais rica e interativa. Por exemplo, você pode ter um botão personalizado para recentrar o mapa, mantendo os botões clássicos de zoom.

Exemplo de uma combinação dos dois:

L.control.zoom({ position: 'bottomright' }).addTo(map); // Zoom classique

L.control.custom({
    position: 'topright',
    content: '<button>Recentrer</button>',
    onclick: function() {
        map.setView([48.8566, 2.3522], 13);  // Recentre sur Paris
    }
}).addTo(map);

Benefícios dessa combinação:

• Navegação suave: Os usuários podem aumentar o zoom facilmente e, ao mesmo tempo, têm a opção de adicionar ações personalizadas.
• Interface intuitiva: Ofereça mais controle aos usuários sem sobrecarregar a interface.

6. Resumo e práticas recomendadas

• Controles de zoom: Adicione, personalize e posicione os controles de zoom para tornar a navegação mais fluida e intuitiva.
• Botões personalizados: Adicione botões para executar ações específicas no mapa, como centralizar o mapa ou alterar as camadas.
• Acessibilidade e ergonomia: combine controles de zoom e botões personalizados para proporcionar uma melhor experiência ao usuário sem sobrecarregar a interface.

Conclusão

Os controles de zoom e os botões personalizados são elementos essenciais para tornar a navegação em um mapa do Leaflet mais interativa e conveniente. Eles não apenas permitem que os usuários ajustem a escala do mapa, mas também oferecem a possibilidade de acionar ações específicas usando botões personalizados. Com esses recursos, é possível criar interfaces de mapa ricas e acessíveis, adequadas às suas necessidades específicas.

Slide 6: Adicionando widgets: Escala e legenda personalizada

Adicionando widgets: Escala e legenda personalizada

1. Introdução: O que é um widget no Leaflet?

Widgets são elementos da interface do usuário que adicionam funcionalidade e informações extras a um mapa do Leaflet. Entre os widgets mais comuns estão a escala e a legenda. Esses elementos são essenciais para fornecer aos usuários informações contextuais, como a distância (escala) ou o significado das cores e dos símbolos (legenda).

O Leaflet facilita a adição desses widgets graças aos controles incorporados e personalizáveis.

2. Widget de escala: exibe uma escala dinâmica

O widget de escala exibe uma escala de distância que se ajusta dinamicamente de acordo com o nível de zoom do mapa. Isso dá ao usuário uma melhor compreensão da distância real no mapa, o que é particularmente útil em aplicativos de geolocalização ou mapeamento temático.

Adição de uma escala ao mapa:

O Leaflet fornece um controle integrado para adicionar uma escala ao mapa, o que é muito fácil de configurar.

Exemplo de código para adicionar uma escala :

L.control.scale({
    metric: true,  // Affiche l'échelle en mètres et kilomètres
    imperial: false, // Désactive l'échelle en miles et yards
    maxWidth: 200  // Largeur maximale de l'échelle
}).addTo(map);

Explicação do código :

• metric (métrica): se essa opção estiver ativada, a escala exibirá a distância em metros e quilômetros.
• imperial: se essa opção estiver ativada, a escala exibirá a distância em milhas e jardas.
• maxWidth: permite definir a largura máxima da escala, útil para ajustar a exibição em telas de tamanhos diferentes.
• O controle de escala é dinâmico: ele se ajusta automaticamente quando o usuário aumenta ou diminui o zoom no mapa. Quanto mais você aumentar o zoom, menor será a distância representada pelos segmentos da escala.

Vantagens da escala :

• Precisão: permite que o usuário exiba com precisão as distâncias no mapa.
• Interatividade: a escala é atualizada automaticamente à medida que o mapa é ampliado, o que torna seu uso fácil e intuitivo.

Widget de legenda: exibe uma legenda personalizada

A legenda é um widget muito útil para explicar o significado das cores, dos símbolos ou dos padrões usados em um mapa. Por exemplo, se você tiver camadas temáticas (por exemplo, para exibir tipos de solo, áreas de risco etc.), uma legenda ajudará o usuário a entender o que cada cor ou ícone representa.

Adicione uma legenda ao mapa:

Você pode criar uma legenda personalizada usando HTML e adicioná-la ao mapa usando L.control().

Exemplo de código para adicionar uma legenda :

const legend = L.control({ position: 'bottomright' });

legend.onAdd = function (map) {
    const div = L.DomUtil.create('div', 'info legend');
    const grades = [0, 10, 20, 30, 40];  // Plages de valeurs (ex : température)
    const labels = [];

    // Boucle pour générer les couleurs et labels de la légende
    for (let i = 0; i < grades.length; i++) {
        labels.push(
            '<i style="background:' + getColor(grades[i] + 1) + '"></i> ' +
            grades[i] + (grades[i + 1] ? '&ndash;' + grades[i + 1] : '+')
        );
    }
    div.innerHTML = labels.join('<br>');
    return div;
};

legend.addTo(map);

// Fonction pour déterminer la couleur en fonction de la valeur
function getColor(d) {
    return d > 30 ? '#800026' :
           d > 20 ? '#BD0026' :
           d > 10 ? '#E31A1C' :
           d > 0  ? '#FC4E2A' :
                    '#FFEDA0';
}

Explicação do código :

• L.control(): Cria um controle personalizado para a legenda e define sua posição no mapa (canto inferior direito aqui).
• legend.onAdd: essa função define como a legenda é gerada. Aqui, usamos intervalos de valores (notas) e associamos cada intervalo a uma cor por meio da função getColor().
• getColor() : Essa função retorna uma cor de acordo com o valor (por exemplo, uma cor mais escura para valores mais altos).

Personalização da legenda :

• Posição: Você pode alterar a posição da legenda ajustando o valor da opção de posição (por exemplo, “topright”, “bottomleft”).
• Conteúdo: A legenda pode conter ícones, texto e até imagens, dependendo de suas necessidades.
• Cores e símbolos: você pode personalizar a legenda para corresponder à cartografia usada (por exemplo, associar cores de zonas específicas a categorias).

Benefícios da legenda :

• Clareza: torna o mapa mais fácil de entender, explicando os símbolos e as cores usados.
• Interatividade: ajuda o usuário a interpretar os dados no mapa, o que é essencial ao trabalhar com mapas temáticos.

4.Combinação de escala e legenda

É prática comum adicionar uma escala e uma legenda a um mapa, pois esses dois widgets têm finalidades diferentes, mas complementares. Enquanto a escala fornece uma ideia das distâncias reais, a legenda ajuda a entender os dados representados graficamente.

Exemplo de código para adicionar ambos os widgets :

L.control.scale({
    metric: true,
    imperial: false
}).addTo(map);

const legend = L.control({ position: 'bottomright' });
legend.onAdd = function (map) {
    const div = L.DomUtil.create('div', 'info legend');
    div.innerHTML = '<i style="background:' + getColor(35) + '"></i> 35-40°C';
    return div;
};
legend.addTo(map);

Vantagens dessa combinação:

• O usuário se beneficia de uma visão geral completa, com a capacidade de medir distâncias e, ao mesmo tempo, ter uma explicação dos dados do mapa.
• Isso aprimora a experiência do usuário ao fornecer ferramentas claras para interagir com o mapa.

5.Resumo e práticas recomendadas

• Widget de escala: adicione uma escala dinâmica para permitir que os usuários visualizem facilmente as distâncias no mapa. Essa é uma ferramenta essencial para mapas interativos.
• Widget de legenda: use uma legenda para explicar os símbolos e as cores, principalmente ao trabalhar com dados temáticos ou geoespaciais complexos.
• Personalização: ambos os widgets podem ser personalizados (cores, conteúdo, posição) para corresponder à carta gráfica de seu projeto.
• UX aprimorada: esses widgets enriquecem a interface do mapa fornecendo informações adicionais, tornando o mapa mais interativo e mais fácil de entender.

Conclusão

A adição de widgets de escala e legenda personalizada ao Leaflet enriquece a experiência do usuário e torna o mapa mais informativo. A escala permite que você meça distâncias em tempo real, enquanto a legenda fornece explicações claras sobre os dados representados. Ao combinar esses dois elementos, você pode criar um mapa mais profissional, funcional e acessível.

Exercício: Mapa temático com estilos e legenda

Objetivo: criar um mapa completo com elementos visuais e controles personalizados para aprimorar a experiência do usuário.

Instruções

• Crie um mapa centrado em uma área de sua escolha
  → Escolha um mapa base (por exemplo, OpenStreetMap, Esri, etc.)
• Adicione uma camada GeoJSON que represente dados temáticos
  → Por exemplo: áreas naturais, edifícios, bairros etc.
• Aplicar um estilo condicional (cor de acordo com uma propriedade)
• Criar uma legenda personalizada correspondente aos estilos
• Adicionar marcadores com ícones personalizados
  → Por exemplo, para localizar pontos de interesse

  • Adicionar widgets:
    Uma escala
    Um controle de zoom que pode ser movido
    Um botão personalizado (por exemplo, centralizar novamente)

Bônus

• Adicione um mini-mapa para ajudá-lo a se orientar
• Adicionar um pop-up dinâmico para cada zona/ponto

Veja o resultado em uma nova guia.

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

Atilio Francois