Tutorial Leaflet: sessão 3

14 maio 202511 maio 2025 Atilio Francois No Comments

Dados e estilos GeoJSON

Slide 1 : O que é GeoJSON?

O GeoJSON é um formato de dados leve, amplamente usado para representar objetos geográficos em um ambiente da Web. Ele se baseia no JSON (JavaScript Object Notation), um formato de dados de texto leve que é fácil de ler e escrever, e é amplamente suportado por muitas bibliotecas e ferramentas de desenvolvimento, incluindo Leaflet, OpenLayers e outros sistemas GIS (Geographic Information Systems).

O GeoJSON foi projetado especificamente para descrever objetos geográficos, como pontos, linhas, polígonos e conjuntos desses objetos, incluindo informações adicionais (como atributos) sobre esses objetos. Ele é usado para integrar e trocar dados geoespaciais em aplicativos modernos da Web e sistemas GIS.

Slide 2: Estrutura de um arquivo GeoJSON

Um arquivo GeoJSON é um formato de dados textuais baseado no padrão JSON, projetado para representar objetos geográficos. Ele é comumente usado em aplicativos de mapeamento da Web. Os objetos contidos em um arquivo GeoJSON são organizados em uma estrutura hierárquica, centrada em três elementos principais:

1. FeatureCollection

Esse é o elemento raiz (o contêiner principal) de um arquivo GeoJSON. Ele agrupa um conjunto de características, ou seja, entidades geográficas individuais. Uma FeatureCollection pode conter diferentes tipos de objetos geográficos: pontos, linhas ou polígonos. Como regra geral, um arquivo GeoJSON contém uma única FeatureCollection.

2. Feature (característica geográfica)

Cada entidade geográfica é definida como um feature. Um recurso representa um objeto específico no mapa (como um edifício, uma árvore, um caminho, uma área protegida etc.). Ele é composto de duas partes essenciais:

geometria: essa é a descrição geométrica do objeto, que pode assumir a forma de um ponto, uma cadeia de linhas ou um polígono. A geometria é definida por um tipo e coordenadas.

properties: são as informações descritivas associadas ao objeto (metadados). Podem incluir um nome, uma categoria, uma descrição, uma data, um valor numérico, etc. Essas propriedades são expressas na forma de pares de valores-chave, como em uma carteira de identidade de objeto.

3. Geometria

A geometria especifica a forma e a posição espacial do recurso. Ela se baseia em um tipo e em uma ou mais coordenadas geográficas (longitude, latitude). Os tipos de geometria mais comumente usados são

Ponto: uma única localização no mapa, definida por um par de coordenadas [longitude, latitude].

LineString: uma linha composta de vários pontos conectados.

Polígono: um conjunto de pontos que formam uma superfície fechada (por exemplo, parcela, lago, município).

MultiPoint, MultiLineString, MultiPolygon: esses tipos podem ser usados para agrupar várias geometrias semelhantes no mesmo recurso (por exemplo, um arquipélago, uma rede de estradas, um conjunto de áreas protegidas).

Slide 3: Por que usar o GeoJSON?

Vantagens do GeoJSON

Fácil de ler e escrever: por ser baseado em JSON, o formato é fácil de entender e manipular.

Compatibilidade: é amplamente suportado por bibliotecas JavaScript modernas (como Leaflet, OpenLayers, Mapbox), bem como por muitas ferramentas GIS.

Formato leve: o GeoJSON é um formato leve, baseado em texto, que se presta bem ao uso na Web, especialmente para a transferência de dados geoespaciais.

Extensibilidade: permite que propriedades personalizadas sejam adicionadas a objetos geográficos, tornando-o flexível para uma variedade de aplicativos.

Limitações do GeoJSON

Desempenho: embora o GeoJSON seja leve, o tamanho dos dados pode aumentar consideravelmente quando se trabalha com grandes quantidades de objetos geográficos complexos.

Falta de suporte para várias projeções: o GeoJSON funciona principalmente com a projeção EPSG:4326 (latitude/longitude), o que pode causar problemas para determinados aplicativos que exigem projeções específicas.

Slide 4: Carregando um arquivo GeoJSON

Carregar um arquivo GeoJSON externo no Leaflet é simples e eficiente, seja por meio de um URL direto ou de uma solicitação HTTP como fetch(). Essa funcionalidade é essencial para a integração de dados geoespaciais em tempo real de servidores externos, o que é muito comum em aplicativos de mapeamento da Web

Slide 5 : Usando fetch()

Ao trabalhar com o Leaflet para exibir mapas interativos, você pode carregar um arquivo GeoJSON local diretamente no código JavaScript. Esse arquivo pode ser incluído na mesma pasta do seu aplicativo, de modo que você possa usá-lo sem precisar fazer uma solicitação HTTP externa. Isso é particularmente útil para dados locais ou quando você deseja pré-carregar objetos geográficos no mapa.

Por exemplo, aqui está um arquivo GeoJSON que descreve um ponto que representa um local:

paris.geojson

  "type": "FeatureCollection",

  "features": [

      "type": "Feature",

      "geometry": {

        "type": "Point",

        "coordinates": [2.3522, 48.8566]

},

      "properties": {

        "name": "Paris",

        "description": "La capitale de la France"

Vamos supor que esse arquivo seja salvo com o nome paris.geojson na mesma pasta do seu arquivo HTML.

Se você tiver um arquivo GeoJSON externo no mesmo diretório do seu aplicativo (por exemplo, paris.geojson), poderá usar fetch() para recuperar o arquivo e adicioná-lo ao mapa.

Aqui está um exemplo:

paris_geojson.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec GeoJSON local</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

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

    <script>

        // Initialiser la carte

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

        // Ajouter une couche de base (carte OpenStreetMap)

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

        // Charger le fichier GeoJSON local et l'ajouter à la carte

        fetch('paris.geojson')

            .then(response => response.json()) // Convertir la réponse en JSON

            .then(data => {

                // Ajouter l'objet GeoJSON à la carte

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

})

            .catch(error => console.error('Erreur lors du chargement du fichier GeoJSON :', error));

    </script>

</body>

</html>

Explicação do código:

fetch(‘paris.geojson’): recupera o arquivo GeoJSON local.

response.json(): Converte a resposta em um objeto JavaScript.

L.geoJSON(data).addTo(map): adiciona o objeto GeoJSON ao mapa.

.catch() : Captura erros se o arquivo não puder ser carregado.

Com esse código (L.geoJSON(data).addTo(map)), o ponto GeoJSON é de fato adicionado ao mapa, mas não fica visível porque nenhum estilo ou popup é definido, e um ponto sem um ícone ou popup personalizado não é exibido por padrão no Leaflet.

Aqui está uma versão corrigida do código HTML com um pop-up e um ícone padrão que torna visível o ponto “Paris”:

paris_geojson.html

// Charger le fichier GeoJSON

fetch(‘paris.geojson’)

.then(response => response.json())

.then(data => {

L.geoJSON(data, {

pointToLayer: function (feature, latlng) {

return L.marker(latlng).bindPopup(

“<b>” + feature.properties.name + “</b><br>” + feature.properties.description

);

}

}).addTo(map);

})

.catch(error => console.error(‘Erreur lors du chargement du fichier GeoJSON :’, error));

Visualize a página HTML em uma nova guia.

Slide 6: Inserir diretamente no código

Se preferir não usar um arquivo externo e incluir os dados GeoJSON diretamente no código JavaScript, você poderá definir o objeto GeoJSON em uma variável e adicioná-lo diretamente ao mapa.

Exemplo:

paris_geojson_code.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec GeoJSON local</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

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

    <script>

        // Initialiser la carte

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

        // Ajouter une couche de base (carte OpenStreetMap)

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

        // Définir les données GeoJSON directement dans une variable

        var geojsonData = {

          "type": "FeatureCollection",

          "features": [

              "type": "Feature",

              "geometry": {

                "type": "Point",

                "coordinates": [2.3522, 48.8566]

},

              "properties": {

                "name": "Paris",

                "description": "La capitale de la France"

};

        // Ajouter l'objet GeoJSON à la carte

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

    </script>

</body>

</html>

Explicação do código:

Neste exemplo, o GeoJSON é definido diretamente em uma variável JavaScript (geojsonData).

Essa abordagem é simples e adequada quando você tem dados GeoJSON relativamente pequenos e não deseja fazer nenhuma solicitação externa para carregá-los.

Visualize a página HTML em uma nova guia.

Vantagens e limitações

Vantagens:

Fácil de implementar, especialmente para arquivos GeoJSON simples ou projetos em que os dados são pequenos.

Não há necessidade de lidar com solicitações HTTP complexas.

Limitações:

O método fetch() requer que o arquivo seja servido por meio de um servidor local ou remoto (não há acesso direto a arquivos locais por meio do navegador sem um servidor).

Se você tiver muitos dados geoespaciais, o carregamento direto via JavaScript pode se tornar complicado e menos eficiente.

Conclusão

Carregar um arquivo GeoJSON local no Leaflet é uma operação simples que pode ser executada de duas maneiras principais: usando o método fetch() para carregar um arquivo externo ou incluindo os dados GeoJSON diretamente no código JavaScript. Essa flexibilidade facilita a integração de objetos geográficos em mapas interativos.

Slide 7: Estilo condicional com o Leaflet

O estilo condicional no Leaflet permite personalizar a aparência dos elementos geográficos (pontos, linhas, polígonos) de acordo com suas propriedades ou outros critérios. Isso torna os mapas mais interativos e informativos, exibindo diferentes cores, tamanhos ou formas, dependendo de valores específicos. Por exemplo, os polígonos podem ser coloridos de acordo com sua área de superfície, ou marcadores de tamanhos variados podem ser exibidos de acordo com a população de uma cidade.

No Leaflet, você pode aplicar estilos condicionais com base nas propriedades de um objeto GeoJSON. Isso geralmente é feito na função de estilo, que é passada para o método L.geoJSON(). Essa função é usada para definir um estilo personalizado para cada recurso com base em suas propriedades.

Personalize os estilos dos objetos geoespaciais

Os objetos geoespaciais no Leaflet, como pontos, polilinhas, polígonos ou camadas GeoJSON, podem ser estilizados com a definição de parâmetros como cor, espessura da linha, preenchimento etc. Aqui está um exemplo detalhado de personalização de estilo.

Personalização de estilos com GeoJSON

Ao trabalhar com objetos GeoJSON, você pode personalizar o estilo deles usando uma função de estilo. Essa função é compatível com parâmetros como cor da linha, preenchimento do polígono, opacidade etc.

Aqui está um exemplo de como personalizar o estilo dos objetos GeoJSON:

paris_geojson_code.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec GeoJSON personnalisé</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

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

    <script>

        // Initialiser la carte

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

        // Ajouter une couche de base (carte OpenStreetMap)

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

        // Données GeoJSON (ici un simple polygone)

        var geojsonData = {

          "type": "FeatureCollection",

          "features": [

              "type": "Feature",

              "geometry": {

                "type": "Polygon",

                "coordinates": [

                    [2.35, 48.85],

                    [2.36, 48.85],

                    [2.36, 48.86],

                    [2.35, 48.86],

                    [2.35, 48.85]

},

              "properties": {

                "name": "Paris Square"

};

        // Fonction pour personnaliser le style du polygone

        var style = function (feature) {

          return {

            color: "blue",          // Couleur de la bordure

            weight: 3,              // Épaisseur de la bordure

            opacity: 1,             // Opacité de la bordure

            fillColor: "lightblue", // Couleur de remplissage

            fillOpacity: 0.5       // Opacité du remplissage

};

};

        // Ajouter les données GeoJSON avec le style personnalisé

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

    </script>

</body>

</html>

Exibir a página HTML em uma nova guia.

Explicação:

color: Define a cor da borda do polígono.

weight: Define a espessura da borda.

fillColor: Define a cor do preenchimento do polígono.

fillOpacity: Define a opacidade do preenchimento do polígono.

opacity: Define a opacidade da borda.

Slide 8 : Outras propriedades de estilo disponíveis

Personalize um popup GeoJSON

Ao trabalhar com dados GeoJSON, você também pode personalizar popups de acordo com as propriedades dos objetos geográficos. Veja como fazer isso:

geojson_popup.html

<!DOCTYPE html>

<html lang="fr">

<head>

    <meta charset="UTF-8">

    <meta name="viewport" content="width=device-width, initial-scale=1.0">

    <title>Carte Leaflet avec Popups et GeoJSON</title>

    <link rel="stylesheet" href="https://unpkg.com/leaflet/dist/leaflet.css" />

    <script src="https://unpkg.com/leaflet/dist/leaflet.js"></script>

</head>

<body>

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

    <script>

        // Initialiser la carte

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

        // Ajouter une couche de base (carte OpenStreetMap)

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

        // Données GeoJSON avec des propriétés pour chaque objet

        var geojsonData = {

          "type": "FeatureCollection",

          "features": [

              "type": "Feature",

              "geometry": {

                "type": "Point",

                "coordinates": [2.3522, 48.8566]

},

              "properties": {

                "name": "Paris",

                "description": "La capitale de la France"

};

        // Ajouter les données GeoJSON à la carte avec un popup personnalisé

        L.geoJSON(geojsonData, {

          onEachFeature: function (feature, layer) {

            layer.bindPopup("<b>" + feature.properties.name + "</b><br>" + feature.properties.description);

        }).addTo(map);

    </script>

</body>

</html>

Explicação:

onEachFeature: Essa função é chamada para cada objeto GeoJSON. É usada para personalizar as interações, inclusive os pop-ups.

bindPopup(): Aqui, o conteúdo do pop-up é definido dinamicamente a partir das propriedades do GeoJSON.

Conclusão

A personalização de estilos e pop-ups no Leaflet possibilita a criação de mapas mais interativos e visualmente atraentes. Você pode estilizar objetos geoespaciais, como polígonos e polilinhas, e adicionar pop-ups interativos para fornecer informações adicionais. Seja para um simples mapa interativo ou para um aplicativo mais complexo, a personalização de estilos e pop-ups desempenha um papel fundamental para tornar a experiência do usuário mais agradável e funcional.

Slide 9: Estilo condicional de um polígono

Aplicação de estilos dinâmicos a polígonos com o Leaflet

Ao trabalhar com dados GeoJSON, muitas vezes é útil alterar a aparência de um polígono de acordo com suas propriedades. Isso permite, por exemplo, visualizar rapidamente diferenças de altitude, densidade, área de superfície etc.

Aqui está um exemplo em que os polígonos são coloridos de acordo com a altitude:

// Fonction de style pour les polygones, basée sur l'altitude

function polygonStyle(feature) {

  return {

fillColor: feature.properties.altitude > 300 ? “green” : “yellow”, // Altitude > 300m = vert, sinon jaune

weight: 2, // Épaisseur des contours

opacity: 1, // Opacité du contour (1 = totalement opaque)

color: “black”, // Couleur du contour

dashArray: “3”, // Trait en pointillés

fillOpacity: 0.5 // Opacité du remplissage (0.5 = semi-transparent)

};

}

Et voici comment l’utiliser lors de l’ajout d’un calque GeoJSON :

L.geoJSON(geojsonPolygons, {

style: polygonStyle

}).addTo(map);

Explicação passo a passo

feature.properties.altitude: a propriedade altitude de cada polígono é recuperada.

fillColor: condition ? “green” : “yellow” : uma condição ternária é usada:

Se a altitude for maior que 300, a cor de preenchimento será verde.

Caso contrário, será amarela.

Essa lógica torna o mapa visualmente informativo: você pode distinguir imediatamente as áreas de alta altitude (verde) das áreas de baixa altitude (amarelo), sem precisar ler os dados.

Pode ser personalizado

É claro que você pode adaptar esse estilo a outras propriedades, por exemplo:

Colorir polígonos de acordo com a densidade populacional.

Usar cores diferentes dependendo da categoria do terreno (floresta, área urbana etc.).

Adicionar uma dica de ferramenta ou pop-up para exibir detalhes ao passar o mouse ou clicar.

Slide 10: Interações com GeoJSON no Leaflet

Interações com objetos GeoJSON no Leaflet

O objetivo aqui é tornar o mapa interativo: exibir informações, reagir aos cliques do usuário ou até mesmo alterar a aparência de um elemento em tempo real.

A opção onEachFeature

Ao usar L.geoJSON(…), você pode especificar uma opção especial chamada onEachFeature.

L.geoJSON(data, {

  onEachFeature: function(feature, layer) {

    // Action à réaliser pour chaque entité GeoJSON

});

O que onEachFeature faz?

Essa função é chamada automaticamente para cada “recurso” no arquivo GeoJSON.

Ela pode ser usada para:

Adicionar um pop-up com layer.bindPopup() para exibir informações.

Anexar eventos como clique, mouseover, mouseout etc.

Modificar dinamicamente o estilo (por exemplo, alterar a cor quando clicado).

Adicionar dicas de ferramentas, animações ou outros efeitos de interação.

Exemplo simples: pop-up com o nome

L.geoJSON(data, {

  onEachFeature: function(feature, layer) {

    // Affiche le nom dans une popup

    layer.bindPopup(feature.properties.nom);

}).addTo(map);

Quando o usuário clica em uma entidade (ponto, linha ou polígono), uma caixa pop-up é aberta com o valor da propriedade “name”.

Essa função pode ser aprimorada com a adição de vários tipos de interação:

onEachFeature: function(feature, layer) {

  layer.bindPopup("<b>" + feature.properties.nom + "</b>");

  // Changer la couleur au survol

  layer.on("mouseover", function () {

    this.setStyle({ color: "blue" });

});

  // Remettre la couleur d'origine à la sortie de la souris

  layer.on("mouseout", function () {

    this.setStyle({ color: "black" });

});

Em resumo,

onEachFeature é uma porta de entrada ideal para tornar um mapa interativo. É nessa função que você define o comportamento de cada entidade GeoJSON exibida no mapa.

Sessão de exercícios 3: Exibição e interação com dados GeoJSON no Leaflet

Objetivo:

Criar um mapa interativo que exiba zonas dinamicamente estilizadas de acordo com seus atributos, com um pop-up ao clicar.

Conteúdo:

Você trabalhará com um pequeno arquivo HTML contendo :

Um mapa do Leaflet centrado em Maurício

Polígonos GeoJSON representando zonas fictícias (agrícolas e urbanas)

Um estilo condicional de acordo com o tipo de zona

Um pop-up exibindo informações sobre cada zona

Esse arquivo é …\leaflet_starter_kit\data\exercice_geojson.html

Exibir esse arquivo em uma nova guia.

Para fazer:

Abra o arquivo HTML em um navegador (você pode salvá-lo localmente como exercise-geojson.html).

Observe:
- O mapa exibe dois polígonos, cada um colorido de acordo com seu tipo.
- Uma janela pop-up é exibida quando você clica nela, mostrando o nome e o tipo da zona.

Compreender:
- O estilo é definido pela função styleFeature(), que testa feature.properties.type.
- A interação é definida por onEachFeature, que vincula um bindPopup() a cada entidade.

Modifique o código para fazer os seguintes exercícios:
- Adicione uma nova zona do tipo “floresta” com geometria simples.
- Em styleFeature(), dê à zona ‘floresta’ uma cor diferente (por exemplo, “verde-escuro”).
- Em onEachFeature(), modifique o conteúdo do popup para que ele também exiba uma pequena mensagem como “Click to zoom”.
- Adicione um evento de clique (layer.on(‘click’, …)) que aumenta automaticamente o zoom na área clicada (map.fitBounds(layer.getBounds())).

Bônus:

Adicione uma opacidade diferente dependendo do tipo de zona.

Teste um efeito de mouseover e mouseout.

Resultado esperado:

Um mapa com três zonas coloridas, cada uma com :

Seu próprio estilo

Um pop-up personalizado

Interação de cliques

Veja o resultado final em uma nova guia.

<-Sessão 2: Camadas e interatividade

->Sessão 4: Controles

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