kylefelipe/README.md

Criando um HTML para ser exibido no GOOGLE EARTH usando QGIS

Um colega da comunidade QGIS Brasil no TELEGRAM perguntou como criar um HTML para ser exibido no Google Earth. Abaixo estão os passos para criar um HTML simples que pode ser exibido no Google Earth.

Para a realização desse tutorial estou utilizando o arquivo exemplo.gpkg que contém uma camada de exemplo, mas você pode utilizar qualquer camada que tenha os dados que você deseja exibir no HTML.

O arquivo exemplo.html contém o código básico do HTML que será trabalhado nesse tutorial, mas você pode criar o seu próprio HTML.

O arquivo exemplo_qgis.html contém o código do HTML já pronto para ser utilizado no QGIS, mas você pode utilizar o seu próprio HTML.

Passo 1 - Criar um HTML

Utilizando um editor de texto/IDE da sua preferência (Eu estou utilizando o VSCODE), crie um arquivo HTML, dê a esse nome um nome qualquer (ex.: exemplo.html). Abra esse arquivo em um navegador e veja como ele é exibido (basta pressionar F5 para ir vendo as atualizações).

O exemplo abaixo cria um arquivo HTML que exibe uma imagem e um texto.

<body style="background-color: #2197ff;">
  <img src="https://sigef.incra.gov.br/static/img/logo-incra-horizontal.png" width=200>
  <img src="./feito_no_qgis.jpg" width=200>
  <table border="3" cellpadding="2" align="center" bgcolor="#DCDCDC" bordercolor="Black">
    <h2 style="color: white;"><strong>
        <fontface="Arial">Georrefeenciado no Sigef</font>
      </strong></h2>
    <tr>
      <td width="38%"><b> &nbsp; Parcela</b></td>
      <td><b> &nbsp; ' || parcela_co || '</b></td>
    </tr>
    <tr>
      <td width="38%"><b> &nbsp; Código Profissional</b></td>
      <td><b> &nbsp; ' || "rt" || '</b></td>
    </tr>
    <tr>
      <td width="38%"><b> &nbsp; ART</b></td>
      <td><b> &nbsp ' || "art" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Situação</b></td>
    <td><b> &nbsp ' || "situacao_i" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Código Imóvel</b></td>
    <td><b> &nbsp ' || "codigo_imo" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Data Submissão</b></td>
    <td><b> &nbsp ' || "data_submi" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Data Aprovação</b></td>
    <td><b> &nbsp ' || "data_aprov" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Status</b></td>
    <td><b> &nbsp ' || "status" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Nome da Área</b></td>
    <td><b> &nbsp ' || "nome_area" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Matrícula</b></td>
    <td><b> &nbsp ' || "registro_m" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Data Registro</b></td>
    <td><b> &nbsp ' || "registro_d" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Município</b></td>
    <td><b> &nbsp ' || "nome" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; UF</b></td>
    <td><b> &nbsp ' || "uf" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Atualização</b></td>
    <td><b> &nbsp; Janeiro de 2024</b></td>
    </tr>
  </table>
</body>'

Exibição do HTML no navegador:

Repare que no html acima, o src da imagem do INCRA é um link externo, isso é interessante para que o arquivo fique mais leve, mas você pode utilizar imagens locais também, basta colocar o caminho correto da imagem, ou inserir o base64 da imagem no src da tag <img>, o que fará com que o arquivo fique mais pesado, mas não precisará de internet para exibir a imagem. Meu conselho é hospedar a imagem em algum lugar e utilizar o link dela, assim o arquivo ficará mais leve.

Para exibir os dados da camada no HTML criamos uma tabela, onde cada linha da tabela exibe um campo da camada.

Essa é uma explicação rápida do HTML:

<body> - É o corpo do HTML, onde ficam os elementos que serão exibidos na página.
<img> - É a tag que exibe uma imagem, o src é o caminho da imagem, o width é a largura da imagem.
<table> - É a tag que cria uma tabela, o border define a espessura da borda da tabela, o cellpadding define o espaçamento entre as células da tabela, o align define o alinhamento da tabela, o bgcolor define a cor de fundo da tabela e o bordercolor define a cor da borda da tabela.
<h2> - É a tag que cria um título, o style define a cor do texto.
<tr> - É a tag que cria uma linha na tabela.
<td> - É a tag que cria uma célula na tabela, o width define a largura da célula, o b define que o texto dentro da célula será exibido em negrito.
  - É um espaço em branco, utilizado para dar espaçamento entre os elementos.
fontface="Arial" - Define a fonte do texto, nesse caso Arial.

Passo 1.1 - Alterando o HTML e Estilizando com CSS

Agora que você já tem o HTML pronto, vamos alterar ele para que fique mais bonito e tenha mais informações.

Vamos agora alterar o HTML para que apareça o logo do QGIS ao lado do logo do INCRA, para isso vamos adicionar a imagem do QGIS no mesmo diretório do HTML e alterar o src da tag <img>.

<body style="background-color: #2197ff;">
  <img src="https://sigef.incra.gov.br/static/img/logo-incra-horizontal.png" width=200>
  <img src="https://qgis.org/img/logosign.svg" width=100> <!-- Imagem da logo do QGIS -->

    <!-- Restante do código -->
</body>

OBS: Copiei o endenreço da imagem do QGIS do site oficial.

Você perceberá que as imagens aparecem no HTML, mas a logo do INCRA fica alinhada na parte inferior em relação a logo do QGIS, isso acontece porque a imagem do INCRA é menor que a do QGIS no quesito altura.

Para resolver isso vamos utilizar o CSS para alinhar as imagens.

Primeiro vamos criar uma div para colocar as imagens, assim podemos estilizar elas juntas.

<body style="background-color: #2197ff;">
  <div>
    <img src="https://sigef.incra.gov.br/static/img/logo-incra-horizontal.png" width="200">
    <img src="https://qgis.org/img/logosign.svg" width="100">
  </div>
<!-- Restante do código -->
</body>

Agora vamos adicionar o CSS para alinhar as imagens.

<body style="background-color: #2197ff;">
  <div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start;">
    <img src="https://sigef.incra.gov.br/static/img/logo-incra-horizontal.png" width="200">
    <img src="https://qgis.org/img/logosign.svg" width="100">
  </div>
<!-- Restante do código -->
</body>

Veja que adicionei o style na div para receber o CSS para fazer o alinhamento das imagens, essa é a explicação do CSS:

display: flex; - Faz com que a div se torne um container flexível, permitindo o alinhamento dos itens dentro dela.
flex-direction: row; - Faz com que os itens dentro da div sejam exibidos em linha, ou seja, lado a lado.
align-items: center; - Faz com que os itens dentro da div sejam alinhados verticalmente no centro.
justify-content: flex-start; - Faz com que os itens dentro da div sejam alinhados horizontalmente no início, ou seja, à esquerda.

Nas imagens tem uma propriedade width que define a largura da imagem, você pode alterar essa propriedade para deixar as imagens do tamanho que você desejar.

Agora as imagens estão alinhadas corretamente.

Passo 2 - Modificando o código HTML para utilizar no QGIS

Agora que você já tem o HTML pronto, vamos utilizar ele no QGIS.

Mas para isso vamos precisar de fazer algumas alterações no código, pois precisamos que o HTML utilize os dados da camada que você está utilizando, então vamos utilizar o || para concatenar os campos da camada com o HTML.

IMPORTANTE: Lembre-se de colocar sempre o nome do campo entre aspas duplas, caso contrário o QGIS poderá não reconhecer o campo.

Vamos seprar o texto HTML em partes, para poder concatenar os campos da camada. Afinal de contas o HTML nada mais é do que um texto, e no QGIS textos precisam estar entre aspas simples, o código ficará assim:

'<body style="background-color: #2197ff;">
  <div style="display: flex; flex-direction: row; align-items: center; justify-content: flex-start;">
    <img src="https://sigef.incra.gov.br/static/img/logo-incra-horizontal.png" width="200">
    <img src="https://qgis.org/img/logosign.svg" width="100">
  </div>
  <table border="3" cellpadding="2" align="center" bgcolor="#DCDCDC" bordercolor="Black">
    <h2 style="color: white;"><strong>
        <fontface="Arial">Georrefeenciado no Sigef</font>
      </strong></h2>
    <tr>
      <td width="38%"><b> &nbsp; Parcela</b></td>
      <td><b> &nbsp; ' || "parcela_co" || '</b></td>
    </tr>
    <tr>
      <td width="38%"><b> &nbsp; Código Profissional</b></td>
      <td><b> &nbsp; ' || "rt" || '</b></td>
    </tr>
    <tr>
      <td width="38%"><b> &nbsp; ART</b></td>
      <td><b> &nbsp ' || "art" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Situação</b></td>
    <td><b> &nbsp ' || "situacao_i" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Código Imóvel</b></td>
    <td><b> &nbsp ' || "codigo_imo" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Data Submissão</b></td>
    <td><b> &nbsp ' || "data_submi" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Data Aprovação</b></td>
    <td><b> &nbsp ' || "data_aprov" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Status</b></td>
    <td><b> &nbsp ' || "status" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Nome da Área</b></td>
    <td><b> &nbsp ' || "nome_area" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Matrícula</b></td>
    <td><b> &nbsp ' || "registro_m" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Data Registro</b></td>
    <td><b> &nbsp ' || "registro_d" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Município</b></td>
    <td><b> &nbsp ' || "nome" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; UF</b></td>
    <td><b> &nbsp ' || "uf" || '</b></td>
    </tr>
    <td width="38%"><b> &nbsp; Atualização</b></td>
    <td><b> &nbsp; Janeiro de 2024</b></td>
    </tr>
  </table>
</body>'

Para que o Google Earth consiga ler o HTML e exibir os valores quando clicarmos sobre a feição, você precisa colocar o HTML dentro de um campo próprio, esse campo é o campo description, caso a camada não tenha esse campo, você pode criar um campo novo e colocar o HTML dentro dele, no nosso caso a camada já tem o campo description, então vamos utilizar ele.

OBS: O QGIS não edita arquivos KML/KMZ, mas ele edita arquivos Geopackage (GPKG), então se caso sua camada esteja em um arquivo KML/KMZ, você pode exportar ela para um arquivo GPKG e depois editar o arquivo GPKG no QGIS.

Passo 3 - Colocando o HTML no campo `description` da camada

Nesse passo vamos utilizar a calculadora de campos do QGIS para colocar o HTML no campo description da camada.

Abra o arquivo exemplo.gpkg no QGIS.
Clique na camada que você deseja editar.

Veja que o arquivo já tem o campo description, mas ele está vazio, então vamos colocar o HTML que criamos no campo description.

Pressione F6 para abrir tabela de atributos da camada.
Clique no botão Calculadora de Campos.
Na calculadora de campos, marque a opção Atualizar um campo existente e selecione o campo description.
Na aba Expressão cole o HTML que você criou, mas lembre-se de colocar o HTML entre aspas simples e concatenar os campos da camada com o HTML, como fizemos no passo 2.

Clique em OK para inserir o HTML no campo description. Você que a camada entrará em modo de edição e que o campo description foi preenchido com o HTML que você criou. Agora basta salvar a edição e fechar o modo de edição para que os dados sejam salvos.

Passo 4 - Exportando a camada para KML

Agora que você já tem o HTML pronto e ele está no campo description da camada, vamos exportar a camada para o Google Earth.

Clique com o botão direito na camada e selecione a opção Exportar > Salvar Feições Como....
Em Formato selecione a opção Keyhole Markup Language [KML].
Em Arquivo selecione o local onde você deseja salvar o arquivo KML.
Em Opções de Fonte de Dados preenche o campo "DescriptionField" com o nome do campo que contém o HTML, no nosso caso é o campo description.
Clique em OK para exportar a camada.

Abra o kml gerado e clique sobre alguma feição, você verá que o HTML que você criou será exibido na tela do Google Earth.

Conclusão

Agora você já sabe como criar um HTML para ser exibido no Google Earth utilizando o QGIS. Caso tenha alguma dúvida para a criação de HTML hoje há muitas referências na internet, como o W3Schools e o MDN Web Docs, que são ótimos para aprender HTML e CSS. E opções como chatGPT e o Copilot são ótimos para tirar dúvidas e ajudar na criação de HTML e CSS.

Esses exemplos foram todos criados utilizando o assistente Copilot no VSCODE e em seguida inserido no QGIS , então não tenha medo de perguntar e testar.

Espero que esse tutorial tenha te ajudado a criar um HTML para ser exibido no Google Earth utilizando o QGIS.